/**
 * Components — Công Nghiệp Số, v3 "Ca đêm"
 *
 * BEM, `mona-` prefixed from the start so phase 2 is a copy rather than a rename.
 * No hardcoded colours here — everything comes from variables.css.
 *
 * Sections
 *   1. Layout primitives         9. Parallax band + glass cards
 *   2. Chips, buttons, meta     10. Rail (horizontal snap scroller)
 *   3. Chrome: topline, header  11. People, editorial block
 *   4. Search drawer, mobile nav12. Footer
 *   5. Home hero                13. Article: hero, TOC, prose, notes, FAQ
 *   6. Category tiles           14. Page hero, static pages, contact, listing
 *   7. Poster + white cards     15. Search, 404, empty, pagination
 *   8. Bento, rows              16. Motion, utilities, responsive
 */

/* ===============================================================
 * 1. Layout primitives
 * =============================================================== */

.mona-container {
	width: 100%;
	max-width: var(--mona-container);
	margin-inline: auto;
	padding-inline: var(--mona-gutter);
}

.mona-container--narrow {
	max-width: calc(var(--mona-container-narrow) + 2 * var(--mona-gutter));
}

.mona-section {
	padding-block: var(--mona-section);
}

.mona-section--tight {
	padding-block: calc(var(--mona-section) * 0.6);
}

.mona-section--dark {
	background: var(--mona-ink);
	color: var(--mona-text-invert);
}

.mona-section--surface {
	background: var(--mona-surface);
}

.mona-sechead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mona-s-3) var(--mona-s-6);
	margin-bottom: var(--mona-s-6);
}

.mona-sechead__title {
	font-size: var(--mona-fs-h2);
}

.mona-sechead__title em {
	font-style: normal;
	color: var(--mona-amber-ink);
}

.mona-section--dark .mona-sechead__title em,
.mona-band .mona-sechead__title em {
	color: var(--mona-amber);
}

.mona-sechead__lead {
	flex: 1 1 320px;
	max-width: 52ch;
	margin: 0;
	color: var(--mona-text-muted);
}

.mona-section--dark .mona-sechead__lead,
.mona-band .mona-sechead__lead {
	color: var(--mona-text-invert-muted);
}

.mona-sechead__link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--mona-s-2);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
	text-decoration: none;
	color: var(--mona-text);
}

.mona-section--dark .mona-sechead__link,
.mona-band .mona-sechead__link {
	color: var(--mona-text-invert);
}

.mona-sechead__link svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--mona-dur-fast) var(--mona-ease);
}

.mona-sechead__link:hover {
	color: var(--mona-amber-ink);
}

.mona-section--dark .mona-sechead__link:hover,
.mona-band .mona-sechead__link:hover {
	color: var(--mona-amber);
}

.mona-sechead__link:hover svg {
	transform: translateX(4px);
}

.mona-grid {
	display: grid;
	gap: var(--mona-s-5);
}

.mona-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.mona-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.mona-grid--2 > *,
.mona-grid--3 > * {
	max-width: 680px;
}

/* ===============================================================
 * 2. Chips, buttons, meta, avatar
 * =============================================================== */

.mona-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 28px;
	padding: 0.2em 0.8em;
	border-radius: var(--mona-radius-pill);
	background: var(--mona-amber-soft);
	color: var(--mona-amber-ink);
	font-family: var(--mona-font-display);
	font-size: 0.9375rem;
	font-weight: var(--mona-w-semibold);
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--mona-dur-fast) var(--mona-ease),
		color var(--mona-dur-fast) var(--mona-ease);
}

a.mona-chip:hover {
	background: var(--mona-amber);
	color: var(--mona-ink);
}

/* On photographs: glass pill with an amber dot. */
.mona-chip--invert {
	background: rgba(14, 17, 20, 0.45);
	color: var(--mona-text-invert);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 0 0 1px var(--mona-glass-line);
}

.mona-chip--invert::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mona-amber);
	box-shadow: 0 0 8px var(--mona-amber);
}

a.mona-chip--invert:hover {
	background: var(--mona-amber);
	color: var(--mona-ink);
}

a.mona-chip--invert:hover::before {
	background: var(--mona-ink);
	box-shadow: none;
}

.mona-chip--neutral {
	background: var(--mona-paper-2);
	color: var(--mona-text-muted);
}

a.mona-chip--neutral:hover {
	background: var(--mona-text);
	color: var(--mona-surface);
}

.mona-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mona-s-2);
	min-height: 52px;
	padding: 0 var(--mona-s-6);
	border: 1px solid transparent;
	border-radius: var(--mona-radius-pill);
	background: var(--mona-text);
	color: var(--mona-surface);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--mona-dur-fast) var(--mona-ease),
		color var(--mona-dur-fast) var(--mona-ease),
		border-color var(--mona-dur-fast) var(--mona-ease),
		transform var(--mona-dur-fast) var(--mona-ease),
		box-shadow var(--mona-dur) var(--mona-ease);
}

.mona-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--mona-dur-fast) var(--mona-ease);
}

.mona-btn:hover {
	background: var(--mona-ink-3);
	color: var(--mona-surface);
	transform: translateY(-1px);
}

.mona-btn:hover svg {
	transform: translateX(3px);
}

.mona-btn--amber {
	background: var(--mona-amber);
	color: var(--mona-ink);
	box-shadow: 0 12px 30px -12px var(--mona-amber);
}

.mona-btn--amber:hover {
	background: var(--mona-amber-hot);
	color: var(--mona-ink);
	box-shadow: 0 16px 36px -12px var(--mona-amber);
}

.mona-btn--ghost {
	background: transparent;
	border-color: var(--mona-line-strong);
	color: var(--mona-text);
}

.mona-btn--ghost:hover {
	background: var(--mona-surface);
	border-color: var(--mona-text);
	color: var(--mona-text);
}

.mona-btn--ghost-invert {
	background: rgba(14, 17, 20, 0.3);
	border-color: rgba(242, 241, 236, 0.3);
	color: var(--mona-text-invert);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.mona-btn--ghost-invert:hover {
	background: rgba(242, 241, 236, 0.12);
	border-color: var(--mona-text-invert);
	color: var(--mona-text-invert);
}

.mona-btn--sm {
	min-height: 42px;
	padding-inline: var(--mona-s-4);
	font-size: 1rem;
}

.mona-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mona-s-2) var(--mona-s-3);
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
}

.mona-meta > * {
	display: inline-flex;
	align-items: center;
	gap: var(--mona-s-2);
}

.mona-meta > * + *::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

.mona-meta a {
	color: inherit;
	text-decoration: none;
}

.mona-meta a:hover {
	color: var(--mona-amber-ink);
}

.mona-meta--invert {
	color: var(--mona-text-invert-muted);
}

.mona-meta--invert strong {
	color: var(--mona-text-invert);
	font-weight: var(--mona-w-semibold);
}

.mona-meta--invert a:hover {
	color: var(--mona-amber);
}

.mona-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mona-amber);
	color: var(--mona-ink);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-bold);
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
}

.mona-avatar--lg {
	width: 68px;
	height: 68px;
	font-size: 1.5rem;
}

/* ===============================================================
 * 3. Chrome — topline + header, fixed over the photograph
 *
 * Both live in .mona-chrome, which starts transparent over the hero photo
 * and turns into light glass once the page scrolls (.is-scrolled from JS).
 * =============================================================== */

.mona-chrome {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 50;
	color: var(--mona-text-invert);
	background: linear-gradient(180deg, rgba(14, 17, 20, 0.55), rgba(14, 17, 20, 0));
	transition: background var(--mona-dur) var(--mona-ease),
		color var(--mona-dur) var(--mona-ease),
		box-shadow var(--mona-dur) var(--mona-ease);
}

.mona-chrome.is-scrolled {
	color: var(--mona-text);
	background: var(--mona-glass-light);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	backdrop-filter: saturate(160%) blur(16px);
	box-shadow: 0 1px 0 var(--mona-line), var(--mona-shadow-sm);
}

.mona-topline {
	background: var(--mona-ink);
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-2xs);
	line-height: 1.4;
}

.mona-topline__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mona-s-2);
	min-height: 32px;
	margin: 0;
	text-align: center;
}

.mona-topline a {
	color: var(--mona-text-invert);
	text-decoration-color: rgba(242, 241, 236, 0.4);
}

.mona-topline a:hover {
	color: var(--mona-amber);
}

.mona-topline__long,
.mona-topline__link {
	display: none;
}

.mona-header__bar {
	display: flex;
	align-items: center;
	gap: var(--mona-s-4);
	height: var(--mona-header-h);
}

.mona-logo {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--mona-s-3);
	margin-right: auto;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.mona-logo__mark {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
}

.mona-logo__mark .mona-logo__bg {
	fill: var(--mona-brand-navy);
}

/* stroke-width 5 is the brand file's own value at this 64 viewBox — scaling it
   is what would make the mark stop matching the favicon beside it. */
.mona-logo__mark .mona-logo__fg {
	fill: none;
	stroke: var(--mona-brand-amber);
	stroke-width: 5;
	stroke-linejoin: round;
}

.mona-logo__word {
	display: flex;
	flex-direction: column;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-bold);
	font-size: 1.375rem;
	line-height: 0.95;
	letter-spacing: 0.005em;
}

.mona-logo__word small {
	margin-top: 0.35em;
	font-family: var(--mona-font);
	font-weight: var(--mona-w-medium);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.mona-nav {
	display: none;
}

.mona-nav__list {
	display: flex;
	gap: var(--mona-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mona-nav__list li {
	margin: 0;
}

.mona-nav__link {
	position: relative;
	display: block;
	padding: var(--mona-s-2) var(--mona-s-3);
	color: inherit;
	font-family: var(--mona-font-display);
	font-size: 1.125rem;
	font-weight: var(--mona-w-semibold);
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.88;
	transition: opacity var(--mona-dur-fast) var(--mona-ease);
}

.mona-nav__link::after {
	content: "";
	position: absolute;
	left: var(--mona-s-3);
	right: var(--mona-s-3);
	bottom: 2px;
	height: 3px;
	border-radius: 3px;
	background: var(--mona-amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mona-dur) var(--mona-ease);
}

.mona-nav__link:hover {
	opacity: 1;
}

.mona-nav__link:hover::after,
.current-menu-item > .mona-nav__link::after,
.current-menu-ancestor > .mona-nav__link::after,
.current-menu-parent > .mona-nav__link::after {
	transform: scaleX(1);
}

.current-menu-item > .mona-nav__link,
.current-menu-ancestor > .mona-nav__link,
.current-menu-parent > .mona-nav__link {
	opacity: 1;
}

.mona-header__actions {
	display: flex;
	align-items: center;
	gap: var(--mona-s-2);
}

.mona-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--mona-radius-pill);
	color: inherit;
	transition: background var(--mona-dur-fast) var(--mona-ease),
		border-color var(--mona-dur-fast) var(--mona-ease);
}

.mona-iconbtn:hover {
	border-color: currentColor;
}

.mona-iconbtn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mona-iconbtn[aria-expanded="true"] {
	background: var(--mona-amber);
	border-color: var(--mona-amber);
	color: var(--mona-ink);
}

.mona-burger {
	position: relative;
	width: 22px;
	height: 14px;
}

.mona-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--mona-dur) var(--mona-ease),
		opacity var(--mona-dur-fast) var(--mona-ease),
		top var(--mona-dur) var(--mona-ease);
}

.mona-burger span:nth-child(1) { top: 0; }
.mona-burger span:nth-child(2) { top: 6px; width: 70%; }
.mona-burger span:nth-child(3) { top: 12px; }

[aria-expanded="true"] .mona-burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
[aria-expanded="true"] .mona-burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .mona-burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ===============================================================
 * 4. Search drawer, mobile navigation
 * =============================================================== */

.mona-search {
	position: absolute;
	inset: 100% 0 auto 0;
	background: var(--mona-ink);
	color: var(--mona-text-invert);
	border-top: var(--mona-border-invert);
	box-shadow: var(--mona-shadow-lg);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--mona-dur) var(--mona-ease),
		transform var(--mona-dur) var(--mona-ease),
		visibility 0s linear var(--mona-dur);
}

.mona-search.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0s;
}

.mona-search__inner {
	padding-block: var(--mona-s-5);
}

.mona-search__hint {
	margin: var(--mona-s-3) 0 0;
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-xs);
}

.mona-searchform {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--mona-s-2);
	padding: var(--mona-s-1);
	background: var(--mona-surface);
	border: 1px solid var(--mona-line-strong);
	border-radius: var(--mona-radius-pill);
	color: var(--mona-text);
	transition: border-color var(--mona-dur-fast) var(--mona-ease),
		box-shadow var(--mona-dur-fast) var(--mona-ease);
}

.mona-searchform:focus-within {
	border-color: var(--mona-amber);
	box-shadow: 0 0 0 4px var(--mona-amber-glow);
}

.mona-searchform__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-left: var(--mona-s-3);
	fill: none;
	stroke: var(--mona-text-muted);
	stroke-width: 2;
	stroke-linecap: round;
}

.mona-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 0 var(--mona-s-2);
	background: transparent;
	border: 0;
	color: var(--mona-text);
	font-size: var(--mona-fs-body);
}

.mona-searchform__input:focus {
	outline: none;
}

.mona-searchform__input::placeholder {
	color: var(--mona-text-muted);
}

.mona-searchform__submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 var(--mona-s-5);
	background: var(--mona-amber);
	border: 0;
	border-radius: var(--mona-radius-pill);
	color: var(--mona-ink);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.0625rem;
	transition: background var(--mona-dur-fast) var(--mona-ease);
}

.mona-searchform__submit:hover {
	background: var(--mona-amber-hot);
}

.mona-searchform--lg .mona-searchform__input {
	min-height: 58px;
	font-size: var(--mona-fs-lead);
}

.mona-searchform--lg .mona-searchform__submit {
	min-height: 54px;
}

.mona-scrim {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(14, 17, 20, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mona-dur) var(--mona-ease), visibility 0s linear var(--mona-dur);
}

.mona-scrim.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Full-height dark panel with big condensed links — a menu, not a list. */
.mona-mobilenav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	width: min(92vw, 420px);
	display: flex;
	flex-direction: column;
	background: var(--mona-ink);
	color: var(--mona-text-invert);
	box-shadow: var(--mona-shadow-lg);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--mona-dur-slow) var(--mona-ease), visibility 0s linear var(--mona-dur-slow);
}

.mona-mobilenav.is-open {
	transform: translateX(0);
	visibility: visible;
	transition-delay: 0s;
}

.mona-mobilenav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--mona-header-h);
	padding: 0 var(--mona-s-4) 0 var(--mona-s-6);
	border-bottom: var(--mona-border-invert);
}

.mona-mobilenav__label {
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
	color: var(--mona-text-invert-muted);
}

.mona-mobilenav__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--mona-s-5) var(--mona-s-6) var(--mona-s-6);
}

.mona-mobilenav__list {
	margin: 0 0 var(--mona-s-6);
	padding: 0;
	list-style: none;
}

.mona-mobilenav__list li {
	margin: 0;
}

.mona-mobilenav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	padding: var(--mona-s-2) 0;
	border-bottom: var(--mona-border-invert);
	color: var(--mona-text-invert);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.75rem;
	line-height: 1.1;
	text-decoration: none;
	transition: color var(--mona-dur-fast) var(--mona-ease), padding-left var(--mona-dur) var(--mona-ease);
}

.mona-mobilenav__link:hover {
	color: var(--mona-amber);
	padding-left: var(--mona-s-2);
}

.mona-mobilenav .current-menu-item > .mona-mobilenav__link {
	color: var(--mona-amber);
}

.mona-mobilenav__list--minor .mona-mobilenav__link {
	min-height: 46px;
	border-bottom: 0;
	color: var(--mona-text-invert-muted);
	font-family: var(--mona-font);
	font-size: var(--mona-fs-body);
	font-weight: var(--mona-w-regular);
}

.mona-mobilenav__foot {
	padding: var(--mona-s-4) var(--mona-s-6);
	border-top: var(--mona-border-invert);
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-xs);
}

/* ===============================================================
 * 5. Home hero — full-viewport photograph
 * =============================================================== */

.mona-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 100svh;
	color: var(--mona-text-invert);
	background: var(--mona-ink);
	overflow: hidden;
	isolation: isolate;
}

.mona-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mona-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Ken Burns: a slow push-in that settles, once. */
	transform: scale(1.08);
	animation: mona-kenburns var(--mona-dur-kenburns) var(--mona-ease) forwards;
}

@keyframes mona-kenburns {
	to { transform: scale(1); }
}

.mona-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mona-scrim-hero);
}

.mona-hero__inner {
	position: relative;
	display: grid;
	gap: var(--mona-s-6);
	padding-top: calc(var(--mona-header-h) + var(--mona-s-8));
	padding-bottom: var(--mona-s-8);
}

.mona-hero__content {
	max-width: 820px;
}

.mona-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mona-s-3);
	margin-bottom: var(--mona-s-5);
	color: var(--mona-text-invert);
	font-size: var(--mona-fs-sm);
	text-shadow: 0 1px 12px rgba(14, 17, 20, 0.7);
}

.mona-hero__title {
	max-width: 24ch;
	margin-bottom: var(--mona-s-5);
	font-size: var(--mona-fs-display);
	line-height: var(--mona-lh-display);
	letter-spacing: var(--mona-ls-display);
	color: var(--mona-surface);
	text-shadow: 0 2px 24px rgba(14, 17, 20, 0.55);
	text-wrap: balance;
}

.mona-hero__title a {
	color: inherit;
	text-decoration: none;
}

.mona-hero__title a:hover {
	color: var(--mona-amber-hot);
}

.mona-hero__lead {
	max-width: 56ch;
	margin-bottom: var(--mona-s-6);
	color: var(--mona-text-invert);
	font-size: var(--mona-fs-lead);
	line-height: 1.55;
	opacity: 0.9;
	text-shadow: 0 1px 12px rgba(14, 17, 20, 0.6);
}

.mona-hero__meta {
	margin-bottom: var(--mona-s-6);
}

.mona-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-3);
}

/* "Next up" — a glass panel of three more headlines with thumbnails. */
.mona-nextup {
	display: grid;
	gap: var(--mona-s-2);
	padding: var(--mona-s-4);
	background: var(--mona-glass);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid var(--mona-glass-line);
	border-radius: var(--mona-radius-lg);
}

.mona-nextup__label {
	margin: 0 0 var(--mona-s-1);
	padding-inline: var(--mona-s-2);
	color: var(--mona-text-invert-muted);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1rem;
}

.mona-nextup__item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--mona-s-3);
	align-items: center;
	padding: var(--mona-s-2);
	border-radius: var(--mona-radius);
	color: var(--mona-text-invert);
	text-decoration: none;
	transition: background var(--mona-dur-fast) var(--mona-ease);
}

.mona-nextup__item:hover {
	background: rgba(242, 241, 236, 0.08);
	color: var(--mona-text-invert);
}

.mona-nextup__thumb {
	aspect-ratio: 1;
	border-radius: var(--mona-radius-sm);
	overflow: hidden;
	background: var(--mona-ink-3);
}

.mona-nextup__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mona-nextup__cat {
	display: block;
	color: var(--mona-amber);
	font-size: var(--mona-fs-2xs);
	font-weight: var(--mona-w-semibold);
	letter-spacing: 0.02em;
}

.mona-nextup__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
	line-height: 1.15;
}

/* Scroll cue — a short line that keeps falling. */
.mona-hero__cue {
	position: absolute;
	left: 50%;
	bottom: var(--mona-s-5);
	width: 1px;
	height: 44px;
	background: rgba(242, 241, 236, 0.25);
	overflow: hidden;
}

.mona-hero__cue::after {
	content: "";
	position: absolute;
	left: 0;
	top: -100%;
	width: 100%;
	height: 100%;
	background: var(--mona-amber);
	animation: mona-cue 1.8s var(--mona-ease-in-out) infinite;
}

@keyframes mona-cue {
	to { top: 100%; }
}

/* Load sequence — lines rise in order. JS adds .is-ready to <body>. */
.mona-hero [data-rise] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--mona-dur-reveal) var(--mona-ease),
		transform var(--mona-dur-reveal) var(--mona-ease);
	transition-delay: calc(var(--i, 0) * 110ms + 150ms);
}

body.is-ready .mona-hero [data-rise] {
	opacity: 1;
	transform: none;
}

/* ===============================================================
 * 6. Category tiles — five photographs, a swipeable rail on phones
 * =============================================================== */

.mona-tiles {
	display: flex;
	gap: var(--mona-s-3);
	margin-inline: calc(var(--mona-gutter) * -1);
	padding-inline: var(--mona-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mona-tiles::-webkit-scrollbar {
	display: none;
}

.mona-tile {
	position: relative;
	flex: 0 0 min(72vw, 280px);
	aspect-ratio: 3 / 4;
	border-radius: var(--mona-radius-lg);
	overflow: hidden;
	scroll-snap-align: start;
	color: var(--mona-text-invert);
	text-decoration: none;
	background: var(--mona-ink-2);
	isolation: isolate;
}

.mona-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mona-dur-slow) var(--mona-ease);
}

.mona-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mona-scrim-up);
	transition: opacity var(--mona-dur) var(--mona-ease);
}

.mona-tile:hover img {
	transform: scale(1.06);
}

.mona-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mona-s-3);
	padding: var(--mona-s-5);
}

.mona-tile__name {
	display: block;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-bold);
	font-size: 1.625rem;
	line-height: 1.05;
	color: var(--mona-surface);
}

.mona-tile__count {
	display: block;
	margin-top: var(--mona-s-2);
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-xs);
}

.mona-tile__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(242, 241, 236, 0.14);
	border: 1px solid var(--mona-glass-line);
	transition: background var(--mona-dur) var(--mona-ease),
		color var(--mona-dur) var(--mona-ease),
		transform var(--mona-dur) var(--mona-ease);
}

.mona-tile__arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mona-tile:hover .mona-tile__arrow {
	background: var(--mona-amber);
	border-color: var(--mona-amber);
	color: var(--mona-ink);
	transform: rotate(-45deg);
}

/* ===============================================================
 * 7. Poster cards (text on photo) and white cards (photo above text)
 * =============================================================== */

.mona-poster {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--mona-radius-lg);
	overflow: hidden;
	background: var(--mona-ink-2);
	color: var(--mona-text-invert);
	isolation: isolate;
}

.mona-poster--tall {
	aspect-ratio: 4 / 5;
}

.mona-poster--wide {
	aspect-ratio: 21 / 9;
}

.mona-poster--square {
	aspect-ratio: 1;
}

.mona-poster__media {
	position: absolute;
	inset: 0;
}

.mona-poster__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mona-dur-slow) var(--mona-ease);
}

.mona-poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mona-scrim-up);
	pointer-events: none;
}

.mona-poster:hover .mona-poster__media img {
	transform: scale(1.05);
}

.mona-poster__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: grid;
	gap: var(--mona-s-3);
	padding: var(--mona-s-5);
}

.mona-poster__body .mona-chip {
	justify-self: start;
	position: relative;
	z-index: 2;
}

.mona-poster__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--mona-fs-h3);
	line-height: 1.1;
	color: var(--mona-surface);
	text-wrap: pretty;
}

.mona-poster__title a {
	color: inherit;
	text-decoration: none;
}

/* The whole poster is the target. */
.mona-poster__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mona-poster:hover .mona-poster__title {
	color: var(--mona-amber-hot);
}

.mona-poster__excerpt {
	display: none;
	margin: 0;
	max-width: 60ch;
	color: var(--mona-text-invert);
	opacity: 0.85;
	font-size: var(--mona-fs-sm);
}

.mona-poster--feature .mona-poster__title {
	font-size: var(--mona-fs-h2);
	-webkit-line-clamp: 3;
}

.mona-poster--feature .mona-poster__body {
	padding: var(--mona-s-6);
}

/* Big number on rail posters (a real sequence). */
.mona-poster__num {
	position: absolute;
	top: var(--mona-s-4);
	left: var(--mona-s-5);
	z-index: 1;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-heavy);
	font-size: 4rem;
	line-height: 1;
	color: var(--mona-amber);
	text-shadow: 0 2px 20px rgba(14, 17, 20, 0.5);
}

/* White card */
.mona-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mona-surface);
	border-radius: var(--mona-radius-lg);
	overflow: hidden;
	box-shadow: var(--mona-shadow-sm);
	transition: transform var(--mona-dur) var(--mona-ease),
		box-shadow var(--mona-dur) var(--mona-ease);
}

.mona-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mona-shadow);
}

.mona-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mona-paper-2);
}

.mona-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mona-dur-slow) var(--mona-ease);
}

.mona-card:hover .mona-card__media img {
	transform: scale(1.05);
}

.mona-card__media .mona-chip {
	position: absolute;
	left: var(--mona-s-4);
	top: var(--mona-s-4);
	z-index: 2;
}

.mona-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--mona-s-3);
	padding: var(--mona-s-5);
}

.mona-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--mona-fs-h3);
	line-height: 1.1;
	text-wrap: pretty;
}

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

.mona-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mona-card:hover .mona-card__title a {
	color: var(--mona-amber-ink);
}

.mona-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-card__foot {
	margin-top: auto;
	padding-top: var(--mona-s-3);
}

/* Missing featured image: a dark plate with the mark, same box. */
.mona-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--mona-ink-3), var(--mona-ink));
	color: var(--mona-amber);
}

.mona-noimg svg {
	width: 56px;
	height: 56px;
}

/* ===============================================================
 * 8. Bento and list rows
 * =============================================================== */

.mona-bento {
	display: grid;
	gap: var(--mona-s-4);
}

.mona-bento__side {
	display: grid;
	gap: var(--mona-s-4);
}

.mona-list {
	display: grid;
	gap: var(--mona-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mona-list > li {
	margin: 0;
}

.mona-row {
	position: relative;
	display: grid;
	gap: var(--mona-s-4);
	padding: var(--mona-s-3);
	background: var(--mona-surface);
	border-radius: var(--mona-radius-lg);
	box-shadow: var(--mona-shadow-sm);
	transition: transform var(--mona-dur) var(--mona-ease),
		box-shadow var(--mona-dur) var(--mona-ease);
}

.mona-row:hover {
	transform: translateY(-3px);
	box-shadow: var(--mona-shadow);
}

.mona-row__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--mona-radius);
	overflow: hidden;
	background: var(--mona-paper-2);
}

.mona-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mona-dur-slow) var(--mona-ease);
}

.mona-row:hover .mona-row__media img {
	transform: scale(1.05);
}

.mona-row__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mona-s-3);
	padding: var(--mona-s-2) var(--mona-s-3) var(--mona-s-3);
}

.mona-row__body .mona-chip {
	position: relative;
	z-index: 2;
	align-self: flex-start;
}

.mona-row__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--mona-fs-h3);
	line-height: 1.1;
	text-wrap: pretty;
}

.mona-row__title a {
	color: var(--mona-text);
	text-decoration: none;
}

.mona-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mona-row:hover .mona-row__title a {
	color: var(--mona-amber-ink);
}

.mona-row__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-row__body .mona-meta {
	margin-top: auto;
}

/* ===============================================================
 * 9. Parallax photo band + glass cards
 * =============================================================== */

.mona-band {
	position: relative;
	padding-block: var(--mona-section);
	color: var(--mona-text-invert);
	background: var(--mona-ink);
	overflow: hidden;
	isolation: isolate;
}

.mona-band__media {
	position: absolute;
	inset: -18% 0;
	z-index: -2;
	will-change: transform;
}

.mona-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mona-band__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mona-scrim-flat);
}

.mona-band--edge .mona-band__scrim {
	background: var(--mona-scrim-side);
}

.mona-glasscards {
	display: grid;
	gap: var(--mona-s-4);
}

.mona-glasscard {
	display: grid;
	gap: var(--mona-s-3);
	padding: var(--mona-s-5);
	background: var(--mona-glass);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
	border: 1px solid var(--mona-glass-line);
	border-radius: var(--mona-radius-lg);
	transition: transform var(--mona-dur) var(--mona-ease),
		border-color var(--mona-dur) var(--mona-ease);
}

.mona-glasscard:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 178, 36, 0.5);
}

.mona-glasscard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--mona-radius);
	background: var(--mona-amber);
	color: var(--mona-ink);
}

.mona-glasscard__icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mona-glasscard__title {
	color: var(--mona-surface);
	font-size: 1.5rem;
	line-height: 1.1;
}

.mona-glasscard__text {
	margin: 0;
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-sm);
}

/* ===============================================================
 * 10. Rail — a horizontal snap scroller with buttons and progress
 * =============================================================== */

.mona-rail {
	position: relative;
}

.mona-rail__track {
	display: flex;
	gap: var(--mona-s-4);
	margin-inline: calc(var(--mona-gutter) * -1);
	padding-inline: var(--mona-gutter);
	padding-bottom: var(--mona-s-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mona-rail__track::-webkit-scrollbar {
	display: none;
}

.mona-rail__item {
	flex: 0 0 clamp(260px, 30vw, 380px);
	scroll-snap-align: start;
}

.mona-rail__foot {
	display: flex;
	align-items: center;
	gap: var(--mona-s-4);
	margin-top: var(--mona-s-5);
}

.mona-rail__bar {
	flex: 1 1 auto;
	height: 2px;
	background: var(--mona-line);
	border-radius: 2px;
	overflow: hidden;
}

.mona-section--dark .mona-rail__bar,
.mona-band .mona-rail__bar {
	background: var(--mona-line-invert);
}

.mona-rail__bar span {
	display: block;
	width: 25%;
	height: 100%;
	background: var(--mona-amber);
	transform: translateX(var(--x, 0px));
	transition: transform var(--mona-dur-fast) linear;
}

.mona-rail__btns {
	display: flex;
	gap: var(--mona-s-2);
}

.mona-rail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--mona-line-strong);
	border-radius: 50%;
	color: inherit;
	transition: background var(--mona-dur-fast) var(--mona-ease),
		color var(--mona-dur-fast) var(--mona-ease),
		border-color var(--mona-dur-fast) var(--mona-ease);
}

.mona-section--dark .mona-rail__btn,
.mona-band .mona-rail__btn {
	border-color: rgba(242, 241, 236, 0.3);
}

.mona-rail__btn:hover {
	background: var(--mona-amber);
	border-color: var(--mona-amber);
	color: var(--mona-ink);
}

.mona-rail__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.mona-rail__btn[disabled]:hover {
	background: transparent;
	border-color: var(--mona-line-strong);
	color: inherit;
}

.mona-rail__btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ===============================================================
 * 11. People, editorial block
 * =============================================================== */

.mona-editorial {
	display: grid;
	gap: var(--mona-s-5);
}

.mona-editorial__quote {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	gap: var(--mona-s-4);
	align-content: end;
	padding: var(--mona-s-6);
}

.mona-editorial__quote p {
	margin: 0;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	line-height: 1.1;
	color: var(--mona-surface);
}

.mona-editorial__quote small {
	color: var(--mona-text-invert-muted);
	font-family: var(--mona-font);
	font-size: var(--mona-fs-sm);
}

.mona-people {
	display: grid;
	gap: var(--mona-s-4);
}

/* Beside the tall photograph the two cards centre in the column instead of
 * stretching into empty white boxes. */
.mona-editorial .mona-people {
	align-content: center;
}

.mona-editorial .mona-person--compact {
	align-items: center;
}

.mona-person {
	display: grid;
	gap: var(--mona-s-4);
	padding: var(--mona-s-5);
	background: var(--mona-surface);
	border-radius: var(--mona-radius-lg);
	box-shadow: var(--mona-shadow-sm);
}

/* Real people, no invented photographs: a monogram on graphite. */
.mona-person__plate {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	max-width: 220px;
	padding: var(--mona-s-4);
	border-radius: var(--mona-radius);
	background:
		radial-gradient(ellipse at 30% 25%, rgba(255, 178, 36, 0.35), transparent 55%),
		linear-gradient(160deg, var(--mona-ink-3), var(--mona-ink));
	color: var(--mona-amber);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-heavy);
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 1;
}

.mona-person__name {
	font-size: var(--mona-fs-h3);
	margin-bottom: var(--mona-s-1);
}

.mona-person__role {
	margin-bottom: var(--mona-s-3);
	color: var(--mona-amber-ink);
	font-weight: var(--mona-w-semibold);
	font-size: var(--mona-fs-sm);
}

.mona-person__bio {
	margin-bottom: var(--mona-s-3);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-person__beats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-2);
	margin: 0 0 var(--mona-s-4);
	padding: 0;
	list-style: none;
}

.mona-person__beats li {
	margin: 0;
}

.mona-person__contact {
	margin: 0;
	font-size: var(--mona-fs-sm);
}

.mona-person--compact {
	grid-template-columns: 76px 1fr;
	align-items: start;
}

.mona-person--compact .mona-person__plate {
	aspect-ratio: 1;
	max-width: 76px;
	padding: 0;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}

.mona-person--compact .mona-person__name {
	font-size: 1.5rem;
}

/* ===============================================================
 * 12. Footer
 * =============================================================== */

.mona-footer {
	position: relative;
	background: var(--mona-ink);
	color: var(--mona-text-invert-muted);
}

.mona-footer a {
	color: var(--mona-text-invert);
	text-decoration: none;
}

.mona-footer a:hover {
	color: var(--mona-amber);
}

.mona-disclosure {
	display: grid;
	gap: var(--mona-s-4);
	margin-block: var(--mona-s-8) var(--mona-s-7);
	padding: var(--mona-s-5) var(--mona-s-6);
	background: var(--mona-ink-2);
	border: 1px solid var(--mona-line-invert);
	border-left: 4px solid var(--mona-amber);
	border-radius: var(--mona-radius-lg);
}

.mona-disclosure__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--mona-amber);
	color: var(--mona-ink);
}

.mona-disclosure__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mona-disclosure p {
	margin: 0;
	font-size: var(--mona-fs-sm);
	line-height: 1.6;
}

.mona-disclosure strong {
	color: var(--mona-surface);
	font-weight: var(--mona-w-semibold);
}

.mona-disclosure a {
	text-decoration: underline;
	text-decoration-color: rgba(242, 241, 236, 0.35);
}

.mona-footer__grid {
	display: grid;
	gap: var(--mona-s-6);
	padding-block: var(--mona-s-8) var(--mona-s-7);
}

.mona-footer__brand .mona-logo {
	color: var(--mona-surface);
	margin-bottom: var(--mona-s-4);
}

.mona-footer__about {
	max-width: 42ch;
	margin: 0;
	font-size: var(--mona-fs-sm);
}

.mona-footer__title {
	margin-bottom: var(--mona-s-3);
	color: var(--mona-surface);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
}

.mona-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mona-footer__list li {
	margin: 0 0 var(--mona-s-2);
	font-size: var(--mona-fs-sm);
}

.mona-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-2) var(--mona-s-5);
	padding-block: var(--mona-s-5);
	border-top: 1px solid var(--mona-line-invert);
	font-size: var(--mona-fs-xs);
}

/* ===============================================================
 * 13. Article — photo hero, TOC, prose, notes, tables, FAQ, author
 * =============================================================== */

.mona-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 55;
	width: 100%;
	height: 3px;
	pointer-events: none;
}

.mona-progress__bar {
	width: 100%;
	height: 100%;
	background: var(--mona-amber);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}

.mona-arthero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 78svh;
	color: var(--mona-text-invert);
	background: var(--mona-ink);
	overflow: hidden;
	isolation: isolate;
}

.mona-arthero__media {
	position: absolute;
	inset: -12% 0;
	z-index: -2;
	will-change: transform;
}

.mona-arthero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mona-arthero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mona-scrim-hero);
}

.mona-arthero__inner {
	padding-top: calc(var(--mona-header-h) + var(--mona-s-8));
	padding-bottom: var(--mona-s-8);
	max-width: 900px;
}

.mona-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mona-s-2);
	margin: 0 0 var(--mona-s-5);
	padding: 0;
	list-style: none;
	font-size: var(--mona-fs-xs);
	color: var(--mona-text-invert);
	text-shadow: 0 1px 12px rgba(14, 17, 20, 0.7);
}

.mona-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--mona-s-2);
	margin: 0;
}

.mona-crumbs li + li::before {
	content: "";
	width: 12px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

.mona-crumbs a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.mona-crumbs a:hover {
	color: var(--mona-amber);
}

.mona-arthero__title {
	margin: var(--mona-s-4) 0 var(--mona-s-5);
	color: var(--mona-surface);
	font-size: var(--mona-fs-h1);
	text-shadow: 0 2px 24px rgba(14, 17, 20, 0.45);
}

.mona-arthero__lead {
	max-width: 62ch;
	margin-bottom: var(--mona-s-6);
	color: var(--mona-text-invert);
	opacity: 0.9;
	font-size: var(--mona-fs-lead);
	line-height: 1.55;
	text-shadow: 0 1px 12px rgba(14, 17, 20, 0.6);
}

.mona-arthero__credit {
	position: absolute;
	right: var(--mona-gutter);
	bottom: var(--mona-s-4);
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-2xs);
	opacity: 0.8;
}

.mona-artgrid {
	display: grid;
	gap: var(--mona-s-6);
	padding-top: var(--mona-s-7);
}

.mona-article__body {
	min-width: 0;
	max-width: 760px;
}

.mona-toc {
	background: var(--mona-surface);
	border-radius: var(--mona-radius-lg);
	box-shadow: var(--mona-shadow-sm);
}

.mona-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mona-s-3);
	padding: var(--mona-s-4) var(--mona-s-5);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
}

.mona-toc__summary svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	transition: transform var(--mona-dur) var(--mona-ease);
}

.mona-toc[open] .mona-toc__summary svg {
	transform: rotate(180deg);
}

.mona-toc__list {
	margin: 0;
	padding: 0 var(--mona-s-3) var(--mona-s-3);
	list-style: none;
}

.mona-toc__list li {
	margin: 0;
}

/* Two-line entries run together without this — the marker was the only thing
   separating one heading from the next. */
.mona-toc__list li + li {
	margin-top: 2px;
}

.mona-toc__link {
	position: relative;
	display: block;
	padding: 10px var(--mona-s-3) 10px 26px;
	border-radius: var(--mona-radius-sm);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
	line-height: 1.45;
	text-decoration: none;
	transition: color var(--mona-dur-fast) var(--mona-ease),
		background var(--mona-dur-fast) var(--mona-ease);
}

.mona-toc__link::before {
	content: "";
	position: absolute;
	left: var(--mona-s-2);
	/* Aligned to the FIRST line, not the box centre: on a two-line entry a
	   centred marker floats in the gap between the lines and reads as a stray
	   hyphen. Same trick as .mona-figure figcaption::before. */
	top: calc(10px + 0.72em);
	width: 8px;
	height: 2px;
	border-radius: 2px;
	background: var(--mona-line-strong);
	transition: background var(--mona-dur-fast) var(--mona-ease), width var(--mona-dur-fast) var(--mona-ease);
}

.mona-toc__link:hover {
	color: var(--mona-text);
	background: var(--mona-paper);
}

.mona-toc__link.is-current {
	color: var(--mona-text);
	background: var(--mona-amber-soft);
	font-weight: var(--mona-w-semibold);
}

.mona-toc__link.is-current::before {
	width: 12px;
	background: var(--mona-amber);
}

.mona-toc__foot {
	padding: var(--mona-s-3) var(--mona-s-5) var(--mona-s-4);
	border-top: var(--mona-border);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
}

.mona-prose {
	font-size: var(--mona-fs-body);
}

.mona-prose > p:first-child {
	font-size: var(--mona-fs-lead);
}

.mona-prose h2 {
	margin: var(--mona-s-8) 0 var(--mona-s-4);
	scroll-margin-top: calc(var(--mona-header-h) + var(--mona-s-8));
}

.mona-prose h3 {
	margin: var(--mona-s-6) 0 var(--mona-s-3);
}

.mona-prose ul,
.mona-prose ol {
	padding-left: 0;
	list-style: none;
}

.mona-prose ul li {
	position: relative;
	padding-left: var(--mona-s-6);
	margin-bottom: var(--mona-s-3);
}

.mona-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--mona-amber);
}

.mona-prose ol {
	counter-reset: mona-ol;
}

.mona-prose ol li {
	position: relative;
	padding-left: var(--mona-s-7);
	margin-bottom: var(--mona-s-3);
	counter-increment: mona-ol;
}

.mona-prose ol li::before {
	content: counter(mona-ol);
	position: absolute;
	left: 0;
	top: 0.1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mona-ink);
	color: var(--mona-amber);
	font-family: var(--mona-font-display);
	font-size: var(--mona-fs-sm);
	font-weight: var(--mona-w-bold);
}

.mona-prose strong {
	font-weight: var(--mona-w-semibold);
}

.mona-figure {
	margin: var(--mona-s-6) 0;
}

.mona-figure__media {
	overflow: hidden;
	border-radius: var(--mona-radius-lg);
	background: var(--mona-paper-2);
	aspect-ratio: 16 / 10;
}

.mona-figure__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mona-figure figcaption {
	display: flex;
	gap: var(--mona-s-3);
	margin-top: var(--mona-s-3);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
	line-height: 1.5;
}

.mona-figure figcaption::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 3px;
	margin-top: 0.55em;
	border-radius: 2px;
	background: var(--mona-amber);
}

/* Pull quote — the article's one loud line. */
.mona-pull {
	margin: var(--mona-s-7) 0;
	padding: var(--mona-s-5) 0 var(--mona-s-5) var(--mona-s-6);
	border-left: 4px solid var(--mona-amber);
}

.mona-pull p {
	margin: 0;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);
	line-height: 1.1;
	text-wrap: balance;
}

.mona-note {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--mona-s-4);
	margin: var(--mona-s-6) 0;
	padding: var(--mona-s-5);
	background: var(--mona-info-bg);
	border: 1px solid var(--mona-info-line);
	border-radius: var(--mona-radius-lg);
	color: var(--mona-text);
}

.mona-note__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mona-info);
	color: var(--mona-surface);
}

.mona-note__icon svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mona-note__body p {
	margin: 0;
	font-size: var(--mona-fs-sm);
}

.mona-note__body p + p {
	margin-top: var(--mona-s-2);
}

.mona-note__title {
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
	color: var(--mona-info);
}

.mona-note--warn {
	background: var(--mona-warn-bg);
	border-color: var(--mona-warn-line);
}

.mona-note--warn .mona-note__icon {
	background: var(--mona-warn);
}

.mona-note--warn .mona-note__title {
	color: var(--mona-warn);
}

.mona-tablewrap {
	margin: var(--mona-s-5) 0 var(--mona-s-3);
	overflow-x: auto;
	border-radius: var(--mona-radius-lg);
	background: var(--mona-surface);
	box-shadow: var(--mona-shadow-sm);
	-webkit-overflow-scrolling: touch;
}

.mona-tablewrap table {
	min-width: 700px;
	font-size: var(--mona-fs-sm);
}

.mona-tablewrap th {
	background: var(--mona-ink);
	color: var(--mona-text-invert);
	font-family: var(--mona-font-display);
	font-size: 1rem;
	font-weight: var(--mona-w-semibold);
	letter-spacing: 0.02em;
	white-space: nowrap;
	border-bottom: 0;
}

.mona-tablewrap tbody tr:last-child td {
	border-bottom: 0;
}

.mona-tablewrap tbody tr:hover td {
	background: var(--mona-amber-soft);
}

.mona-tablewrap td:first-child {
	font-weight: var(--mona-w-semibold);
	white-space: nowrap;
}

.mona-tablecap {
	margin: 0 0 var(--mona-s-6);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
}

.mona-faq {
	margin-top: var(--mona-s-8);
}

.mona-faq__list {
	display: grid;
	gap: var(--mona-s-3);
}

.mona-faq__item {
	background: var(--mona-surface);
	border-radius: var(--mona-radius-lg);
	box-shadow: var(--mona-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--mona-dur) var(--mona-ease);
}

.mona-faq__item[open] {
	box-shadow: var(--mona-shadow);
}

.mona-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mona-s-4);
	padding: var(--mona-s-4) var(--mona-s-5);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.25rem;
	line-height: 1.2;
}

.mona-faq__q:hover {
	color: var(--mona-amber-ink);
}

.mona-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background:
		linear-gradient(var(--mona-ink), var(--mona-ink)) center / 12px 2px no-repeat,
		linear-gradient(var(--mona-ink), var(--mona-ink)) center / 2px 12px no-repeat,
		var(--mona-amber-soft);
	transition: transform var(--mona-dur) var(--mona-ease), background var(--mona-dur) var(--mona-ease);
}

.mona-faq__item[open] .mona-faq__q::after {
	transform: rotate(45deg);
	background:
		linear-gradient(var(--mona-ink), var(--mona-ink)) center / 12px 2px no-repeat,
		linear-gradient(var(--mona-ink), var(--mona-ink)) center / 2px 12px no-repeat,
		var(--mona-amber);
}

.mona-faq__a {
	padding: 0 var(--mona-s-5) var(--mona-s-5);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-faq__a p {
	margin: 0;
}

.mona-faq__a p + p {
	margin-top: var(--mona-s-3);
}

.mona-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-2);
	margin: var(--mona-s-7) 0 0;
	padding: 0;
	list-style: none;
}

.mona-tags li {
	margin: 0;
}

.mona-author {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--mona-s-4);
	margin-top: var(--mona-s-7);
	padding: var(--mona-s-5);
	background: var(--mona-surface);
	border-radius: var(--mona-radius-lg);
	box-shadow: var(--mona-shadow-sm);
}

.mona-author__name {
	margin: 0 0 var(--mona-s-1);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-bold);
	font-size: 1.5rem;
	line-height: 1.1;
}

.mona-author__role {
	margin: 0 0 var(--mona-s-2);
	color: var(--mona-amber-ink);
	font-size: var(--mona-fs-xs);
	font-weight: var(--mona-w-semibold);
}

.mona-author__bio {
	margin: 0 0 var(--mona-s-3);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-artnav {
	display: grid;
	gap: var(--mona-s-3);
	margin-top: var(--mona-s-7);
}

.mona-artnav__item {
	display: grid;
	gap: var(--mona-s-1);
	padding: var(--mona-s-4) var(--mona-s-5);
	background: var(--mona-surface);
	border-radius: var(--mona-radius);
	box-shadow: var(--mona-shadow-sm);
	color: var(--mona-text);
	text-decoration: none;
	transition: box-shadow var(--mona-dur) var(--mona-ease), transform var(--mona-dur) var(--mona-ease);
}

.mona-artnav__item:hover {
	box-shadow: var(--mona-shadow);
	transform: translateY(-2px);
	color: var(--mona-text);
}

.mona-artnav__label {
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-2xs);
}

.mona-artnav__title {
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
	line-height: 1.15;
}

.mona-artnav__item--next {
	text-align: right;
}

/* ===============================================================
 * 14. Page hero (secondary pages), static pages, contact, listing
 * =============================================================== */

.mona-pagehero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 52svh;
	color: var(--mona-text-invert);
	background: var(--mona-ink);
	overflow: hidden;
	isolation: isolate;
}

.mona-pagehero--tall {
	min-height: 66svh;
}

.mona-pagehero__media {
	position: absolute;
	inset: -12% 0;
	z-index: -2;
	will-change: transform;
}

.mona-pagehero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mona-pagehero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mona-scrim-hero);
}

.mona-pagehero__inner {
	padding-top: calc(var(--mona-header-h) + var(--mona-s-7));
	padding-bottom: var(--mona-s-7);
	max-width: 860px;
}

.mona-pagehero__kicker {
	margin-bottom: var(--mona-s-4);
	color: var(--mona-amber);
	text-shadow: 0 1px 12px rgba(14, 17, 20, 0.7);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
	letter-spacing: 0.02em;
}

.mona-pagehero__title {
	margin-bottom: var(--mona-s-4);
	color: var(--mona-surface);
	font-size: var(--mona-fs-h1);
	text-shadow: 0 2px 24px rgba(14, 17, 20, 0.45);
}

.mona-pagehero__lead {
	max-width: 60ch;
	margin: 0;
	color: var(--mona-text-invert);
	opacity: 0.9;
	font-size: var(--mona-fs-lead);
	line-height: 1.55;
	text-shadow: 0 1px 12px rgba(14, 17, 20, 0.6);
}

.mona-pagehero__form {
	max-width: 640px;
	margin-top: var(--mona-s-6);
}

.mona-catnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-2);
	margin: var(--mona-s-6) 0 0;
	padding: 0;
	list-style: none;
}

.mona-catnav li {
	margin: 0;
}

.mona-catnav__link {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 var(--mona-s-4);
	border: 1px solid rgba(242, 241, 236, 0.3);
	border-radius: var(--mona-radius-pill);
	background: rgba(14, 17, 20, 0.3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--mona-text-invert);
	font-family: var(--mona-font-display);
	font-size: 1.0625rem;
	font-weight: var(--mona-w-semibold);
	text-decoration: none;
	transition: background var(--mona-dur-fast) var(--mona-ease),
		color var(--mona-dur-fast) var(--mona-ease),
		border-color var(--mona-dur-fast) var(--mona-ease);
}

.mona-catnav__link:hover {
	border-color: var(--mona-amber);
	color: var(--mona-amber);
}

.mona-catnav .current-menu-item > .mona-catnav__link,
.mona-catnav__link.is-active {
	background: var(--mona-amber);
	border-color: var(--mona-amber);
	color: var(--mona-ink);
}

.mona-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mona-s-3);
	margin-bottom: var(--mona-s-5);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-toolbar strong {
	color: var(--mona-text);
	font-weight: var(--mona-w-semibold);
}

.mona-page__body {
	max-width: var(--mona-measure);
}

/*
 * These two restate .mona-prose's lead paragraph and H2 rhythm, and this block
 * sits ~500 lines after .mona-prose at identical specificity — so on an element
 * carrying both classes the copies WIN. That is silent and costly: .mona-prose
 * h2 also carries the scroll-margin-top that keeps a TOC anchor clear of the
 * sticky header, and these copies do not, so every in-page link would land with
 * its heading hidden behind it.
 *
 * page.php composes `mona-page__body mona-prose`, so it is excluded here and
 * .mona-prose owns its typography. The three templates that use the class alone
 * — single-chao_ban.php, home.php, template-editorial-board.php — keep exactly
 * the rendering they had. Give any new caller .mona-prose rather than growing
 * this block.
 */
.mona-page__body:not(.mona-prose) > p:first-child {
	font-size: var(--mona-fs-lead);
}

.mona-page__body:not(.mona-prose) h2 {
	margin: var(--mona-s-7) 0 var(--mona-s-4);
}

.mona-page__body > h2:first-child {
	margin-top: 0;
}

.mona-deflist {
	display: grid;
	gap: var(--mona-s-3);
	margin: var(--mona-s-5) 0;
	padding: 0;
	list-style: none;
}

.mona-deflist li {
	display: grid;
	gap: var(--mona-s-1);
	margin: 0;
	padding: var(--mona-s-4) var(--mona-s-5);
	background: var(--mona-surface);
	border-left: 4px solid var(--mona-amber);
	border-radius: var(--mona-radius);
	box-shadow: var(--mona-shadow-sm);
	font-size: var(--mona-fs-sm);
	color: var(--mona-text-muted);
}

.mona-deflist__term {
	color: var(--mona-text);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.25rem;
	line-height: 1.15;
}

.mona-deflist--muted li {
	border-left-color: var(--mona-line-strong);
}

.mona-mailcard {
	position: relative;
	display: grid;
	gap: var(--mona-s-4);
	margin-bottom: var(--mona-s-6);
	padding: var(--mona-s-6);
	background: var(--mona-ink);
	border-radius: var(--mona-radius-xl);
	color: var(--mona-text-invert);
	overflow: hidden;
	isolation: isolate;
}

.mona-mailcard__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mona-mailcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.mona-mailcard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mona-scrim-side);
}

.mona-mailcard__label {
	color: var(--mona-amber);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.125rem;
}

.mona-mailcard__addr {
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-bold);
	font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem);
	line-height: 1;
	color: var(--mona-surface);
	text-decoration: none;
	word-break: break-all;
}

.mona-mailcard__addr:hover {
	color: var(--mona-amber);
}

.mona-mailcard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-3);
}

.mona-copybtn__done {
	display: none;
}

.mona-copybtn.is-done .mona-copybtn__label {
	display: none;
}

.mona-copybtn.is-done .mona-copybtn__done {
	display: inline;
}

.mona-mailcard__note {
	margin: 0;
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-xs);
}

/* ===============================================================
 * 15. Search, 404, empty state, pagination
 * =============================================================== */

.mona-resultcount {
	margin-bottom: var(--mona-s-5);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-lost {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100svh;
	color: var(--mona-text-invert);
	background: var(--mona-ink);
	overflow: hidden;
	isolation: isolate;
}

.mona-lost__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mona-lost__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.mona-lost__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mona-scrim-side);
}

.mona-lost__inner {
	padding-top: calc(var(--mona-header-h) + var(--mona-s-8));
	padding-bottom: var(--mona-s-8);
	max-width: 720px;
}

.mona-lost__code {
	margin-bottom: var(--mona-s-2);
	color: var(--mona-amber);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-heavy);
	font-size: clamp(6rem, 2rem + 14vw, 13rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.mona-lost__title {
	margin-bottom: var(--mona-s-4);
	color: var(--mona-surface);
	font-size: var(--mona-fs-h2);
}

.mona-lost__lead {
	max-width: 50ch;
	margin-bottom: var(--mona-s-6);
	color: var(--mona-text-invert);
	opacity: 0.9;
	font-size: var(--mona-fs-lead);
	text-shadow: 0 1px 12px rgba(14, 17, 20, 0.6);
}

.mona-lost__form {
	max-width: 540px;
	margin-bottom: var(--mona-s-6);
}

.mona-lost__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-2);
}

.mona-empty {
	display: grid;
	justify-items: start;
	gap: var(--mona-s-3);
	max-width: 560px;
	padding: var(--mona-s-7) var(--mona-s-6);
	background: var(--mona-surface);
	border: 1px dashed var(--mona-line-strong);
	border-radius: var(--mona-radius-xl);
}

.mona-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--mona-s-2);
	border-radius: var(--mona-radius);
	background: var(--mona-amber-soft);
	color: var(--mona-amber-ink);
}

.mona-empty__icon svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mona-empty__title {
	font-size: var(--mona-fs-h3);
}

.mona-empty__text {
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-3);
	margin-top: var(--mona-s-3);
}

.mona-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--mona-s-2);
	margin-top: var(--mona-s-7);
}

.mona-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 46px;
	padding: 0 var(--mona-s-3);
	border-radius: var(--mona-radius-pill);
	background: var(--mona-surface);
	box-shadow: var(--mona-shadow-sm);
	color: var(--mona-text);
	font-family: var(--mona-font-display);
	font-size: 1.0625rem;
	font-weight: var(--mona-w-semibold);
	text-decoration: none;
	transition: background var(--mona-dur-fast) var(--mona-ease),
		color var(--mona-dur-fast) var(--mona-ease);
}

.mona-pagination a.page-numbers:hover {
	background: var(--mona-amber);
	color: var(--mona-ink);
}

.mona-pagination .page-numbers.current {
	background: var(--mona-ink);
	color: var(--mona-amber);
}

.mona-pagination .page-numbers.dots {
	background: transparent;
	box-shadow: none;
	color: var(--mona-text-muted);
}

.mona-pagination .page-numbers svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ===============================================================
 * 16. Motion, utilities, prototype bar, responsive
 * =============================================================== */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--mona-dur-reveal) var(--mona-ease),
		transform var(--mona-dur-reveal) var(--mona-ease);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

.js [data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--mona-dur-reveal) var(--mona-ease),
		transform var(--mona-dur-reveal) var(--mona-ease);
}

.js [data-reveal-stagger].is-visible > * {
	opacity: 1;
	transform: none;
}

.js [data-reveal-stagger].is-visible > :nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-stagger].is-visible > :nth-child(2) { transition-delay: 80ms; }
.js [data-reveal-stagger].is-visible > :nth-child(3) { transition-delay: 160ms; }
.js [data-reveal-stagger].is-visible > :nth-child(4) { transition-delay: 240ms; }
.js [data-reveal-stagger].is-visible > :nth-child(5) { transition-delay: 320ms; }
.js [data-reveal-stagger].is-visible > :nth-child(n+6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal],
	.js [data-reveal-stagger] > *,
	.mona-hero [data-rise] {
		opacity: 1;
		transform: none;
	}

	.mona-hero__media img {
		animation: none;
		transform: none;
	}

	.mona-hero__cue {
		display: none;
	}
}

.mona-mt-5 {
	margin-top: var(--mona-s-5);
}

.mona-mt-6 {
	margin-top: var(--mona-s-6);
}

/* Photo credit line — the Unsplash licence asks for none; courtesy gives one. */
.mona-credit {
	margin: var(--mona-s-2) 0 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-2xs);
}

/* .mona-protobar removed on port: prototype-only chrome, per its own note. */

@media (max-width: 359px) {
	.mona-logo__word small {
		display: none;
	}
}

@media (min-width: 640px) {
	.mona-topline__long,
	.mona-topline__link {
		display: inline;
	}

	.mona-topline__short {
		display: none;
	}

	.mona-tile {
		flex-basis: 260px;
	}

	.mona-glasscards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mona-row {
		grid-template-columns: 260px 1fr;
		align-items: center;
	}

	.mona-row--nomedia {
		grid-template-columns: 1fr;
	}

	.mona-person {
		grid-template-columns: 200px 1fr;
		align-items: start;
	}

	.mona-people--grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	}

	.mona-disclosure {
		grid-template-columns: auto 1fr;
		align-items: start;
	}

	.mona-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mona-artnav {
		grid-template-columns: 1fr 1fr;
	}

	.mona-poster__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.mona-bento__side {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {
	.mona-hero__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
		align-items: end;
		gap: var(--mona-s-8);
	}

	.mona-bento {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	}

	.mona-bento__side {
		grid-template-columns: 1fr;
	}

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

	.mona-editorial {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: stretch;
	}

	.mona-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
		gap: var(--mona-s-7);
	}

	/*
	 * 260px could not hold a real Vietnamese H2 — every entry wrapped to two
	 * lines and the rail clipped into an internal scrollbar. Widening alone did
	 * not help (at 340px still only 3 of 7 fit), so the rail gets 300px and the
	 * body column is capped where its line length already was. `space-between`
	 * then spends the leftover as one gutter instead of leaving it as dead air
	 * to the right of the text, which is what made the page look lopsided: the
	 * prose stopped at 1204 while the header ran to 1345.
	 */
	.mona-artgrid {
		grid-template-columns: 300px minmax(0, 760px);
		justify-content: space-between;
		gap: var(--mona-s-8);
	}

	.mona-toc {
		position: sticky;
		top: calc(var(--mona-header-h) + var(--mona-s-6));
		align-self: start;
		max-height: calc(100vh - var(--mona-header-h) - var(--mona-s-8));
		overflow: auto;
	}

	.mona-toc__summary {
		pointer-events: none;
	}

	.mona-toc__summary svg {
		display: none;
	}
}

/* Condensed labels fit beside the wordmark from 1100px; below that the
 * drawer serves tablets. */
@media (min-width: 1100px) {
	.mona-nav {
		display: block;
	}

	.mona-menu-toggle {
		display: none;
	}

	/*
	 * The prototype drew five sections in the bar; the site has ten. At the
	 * design's 18px the row needs ~1150px of container, so between the nav's
	 * own 1100px breakpoint and 1280 the last item and the search button were
	 * pushed outside the bar and clipped by body{overflow-x:hidden} — 30px over
	 * at a 1200 viewport, 130px over at 1100. Tightened only in that band, so
	 * every width the design was actually drawn for is untouched.
	 */
	.mona-nav__list {
		gap: 4px;
	}

	.mona-nav__link {
		padding-inline: 8px;
		font-size: 0.9375rem;
	}

	/* The active underline is inset to the padding, so it has to move with it
	   or it draws wider than the word it belongs to. */
	.mona-nav__link::after {
		left: 8px;
		right: 8px;
	}

	/* Five tiles in a row only once each can be ~220px wide; narrower than
	 * that the category names break one word per line. */
	.mona-tiles {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.mona-tile {
		flex: none;
	}
}

/* Once the bar has room for it again, the header goes back to the size the
 * design draws: 1.125rem with the --mona-s-2 / --mona-s-3 rhythm. Below this
 * the block above wins, which is the whole point of the split. */
@media (min-width: 1280px) {
	.mona-nav__list {
		gap: var(--mona-s-2);
	}

	.mona-nav__link {
		padding-inline: var(--mona-s-3);
		font-size: 1.125rem;
	}

	.mona-nav__link::after {
		left: var(--mona-s-3);
		right: var(--mona-s-3);
	}
}

/* ===============================================================
 * 17. Home modules — ticker, category block, ranked list, tool cards,
 *     glossary, subscribe
 * =============================================================== */

/* Headline ticker under the hero. The list is written twice in the markup so
 * a -50% translate loops seamlessly. */
.mona-ticker {
	background: var(--mona-ink);
	color: var(--mona-text-invert);
	border-top: var(--mona-border-invert);
	border-bottom: var(--mona-border-invert);
	overflow: hidden;
}

.mona-ticker__inner {
	display: flex;
	align-items: center;
	gap: var(--mona-s-4);
	min-height: 54px;
}

.mona-ticker__label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--mona-s-2);
	padding-right: var(--mona-s-4);
	border-right: var(--mona-border-invert);
	color: var(--mona-amber);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1rem;
	white-space: nowrap;
}

.mona-ticker__label::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mona-amber);
	animation: mona-ping 1.8s var(--mona-ease) infinite;
}

@keyframes mona-ping {
	0% { box-shadow: 0 0 0 0 var(--mona-amber-glow); }
	100% { box-shadow: 0 0 0 10px transparent; }
}

/*
 * The track holds TWO copies of the list (section-ticker.php prints it twice) so
 * the loop has no visible snap. It must therefore lay them out as a flex ROW:
 * as a block it stacked them, and the strip ran as two identical rows at double
 * height — 56px against the prototype's 28px. The keyframe travels -100% rather
 * than the prototype's -50% for the same reason: -50% is right for a single copy
 * scrolling half its own width, -100% lands copy 2 exactly where copy 1 started,
 * which is what makes the wrap invisible. Change the two together or it snaps.
 */
.mona-ticker__track {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.mona-ticker__list {
	display: flex;
	flex: 0 0 auto;
	gap: var(--mona-s-7);
	width: max-content;
	margin: 0;
	padding: 0 var(--mona-s-7) 0 0;
	list-style: none;
	animation: mona-ticker 48s linear infinite;
}

.mona-ticker:hover .mona-ticker__list {
	animation-play-state: paused;
}

.mona-ticker__list li {
	margin: 0;
	white-space: nowrap;
}

.mona-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: var(--mona-s-3);
	color: var(--mona-text-invert);
	font-size: var(--mona-fs-sm);
	text-decoration: none;
}

.mona-ticker__item time {
	color: var(--mona-amber);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
}

.mona-ticker__item:hover {
	color: var(--mona-amber-hot);
}

@keyframes mona-ticker {
	to { transform: translateX(-100%); }
}

/* Category block: one poster beside a stack of compact rows. */
.mona-catblock {
	display: grid;
	gap: var(--mona-s-4);
}

.mona-catblock__list {
	display: grid;
	gap: var(--mona-s-3);
	align-content: start;
}

.mona-mini {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--mona-s-4);
	align-items: center;
	padding: var(--mona-s-3);
	background: var(--mona-surface);
	border-radius: var(--mona-radius);
	box-shadow: var(--mona-shadow-sm);
	transition: transform var(--mona-dur) var(--mona-ease),
		box-shadow var(--mona-dur) var(--mona-ease);
}

.mona-mini:hover {
	transform: translateY(-2px);
	box-shadow: var(--mona-shadow);
}

.mona-mini__media {
	aspect-ratio: 1;
	border-radius: var(--mona-radius-sm);
	overflow: hidden;
	background: var(--mona-paper-2);
}

.mona-mini__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mona-dur-slow) var(--mona-ease);
}

.mona-mini:hover .mona-mini__media img {
	transform: scale(1.06);
}

.mona-mini__body {
	min-width: 0;
	display: grid;
	gap: var(--mona-s-1);
}

.mona-mini__cat {
	color: var(--mona-amber-ink);
	font-size: var(--mona-fs-2xs);
	font-weight: var(--mona-w-semibold);
	letter-spacing: 0.02em;
}

.mona-mini__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.1875rem;
	line-height: 1.15;
	text-wrap: pretty;
}

.mona-mini__title a {
	color: var(--mona-text);
	text-decoration: none;
}

.mona-mini__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mona-mini:hover .mona-mini__title a {
	color: var(--mona-amber-ink);
}

/* Two-column shelf: ranked list beside tool cards. */
.mona-split {
	display: grid;
	gap: var(--mona-s-7);
}

.mona-split__col > .mona-sechead {
	margin-bottom: var(--mona-s-4);
}

.mona-split__col > .mona-sechead .mona-sechead__title {
	font-size: var(--mona-fs-h3);
}

/* Ranked list — a real ranking, so it is numbered. */
.mona-ranked {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mona-rank;
}

.mona-ranked li {
	margin: 0;
	counter-increment: mona-rank;
}

.mona-ranked__item {
	display: grid;
	grid-template-columns: auto 72px 1fr;
	gap: var(--mona-s-4);
	align-items: center;
	padding: var(--mona-s-4) 0;
	border-bottom: var(--mona-border);
	color: var(--mona-text);
	text-decoration: none;
}

.mona-ranked li:last-child .mona-ranked__item {
	border-bottom: 0;
}

.mona-ranked__item::before {
	content: counter(mona-rank, decimal-leading-zero);
	min-width: 2.4ch;
	color: var(--mona-amber-ink);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-heavy);
	font-size: 2rem;
	line-height: 1;
	white-space: nowrap;
}

.mona-ranked__thumb {
	aspect-ratio: 1;
	border-radius: var(--mona-radius-sm);
	overflow: hidden;
	background: var(--mona-paper-2);
}

.mona-ranked__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mona-ranked__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.1875rem;
	line-height: 1.15;
	transition: color var(--mona-dur-fast) var(--mona-ease);
}

.mona-ranked__item:hover .mona-ranked__title {
	color: var(--mona-amber-ink);
}

.mona-ranked__meta {
	margin-top: 2px;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
}

/* Tool cards — tables and checklists, the site's utility content. */
.mona-tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--mona-s-3);
}

.mona-tool {
	position: relative;
	display: grid;
	gap: var(--mona-s-3);
	align-content: start;
	padding: var(--mona-s-5);
	background: var(--mona-ink);
	border-radius: var(--mona-radius-lg);
	color: var(--mona-text-invert);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--mona-dur) var(--mona-ease),
		box-shadow var(--mona-dur) var(--mona-ease);
}

.mona-tool::after {
	content: "";
	position: absolute;
	right: -30%;
	top: -40%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--mona-amber-glow), transparent);
	transition: transform var(--mona-dur-slow) var(--mona-ease);
	pointer-events: none;
}

.mona-tool:hover {
	transform: translateY(-3px);
	box-shadow: var(--mona-shadow);
	color: var(--mona-text-invert);
}

.mona-tool:hover::after {
	transform: scale(1.5);
}

.mona-tool__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--mona-radius-sm);
	background: var(--mona-amber);
	color: var(--mona-ink);
}

.mona-tool__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mona-tool__title {
	color: var(--mona-surface);
	font-size: 1.375rem;
	line-height: 1.1;
}

.mona-tool__text {
	margin: 0;
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-sm);
}

.mona-tool__meta {
	margin-top: auto;
	padding-top: var(--mona-s-2);
	color: var(--mona-amber);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1rem;
}

/* Glossary — the handbook's own vocabulary. */
.mona-glossary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: var(--mona-s-3);
}

.mona-term {
	display: grid;
	gap: var(--mona-s-2);
	align-content: start;
	padding: var(--mona-s-5);
	background: var(--mona-surface);
	border-top: 4px solid var(--mona-amber);
	border-radius: var(--mona-radius-lg);
	box-shadow: var(--mona-shadow-sm);
}

.mona-term__word {
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-bold);
	font-size: 1.875rem;
	line-height: 1;
}

.mona-term__full {
	color: var(--mona-amber-ink);
	font-size: var(--mona-fs-xs);
	font-weight: var(--mona-w-semibold);
}

.mona-term__def {
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-term__link {
	margin-top: var(--mona-s-1);
	font-size: var(--mona-fs-xs);
	font-weight: var(--mona-w-semibold);
}

/* Subscribe — an email field over a night photograph. */
.mona-subscribe {
	position: relative;
	display: grid;
	gap: var(--mona-s-5);
	padding: clamp(2rem, 1rem + 4vw, 4rem);
	background: var(--mona-ink);
	border-radius: var(--mona-radius-xl);
	color: var(--mona-text-invert);
	overflow: hidden;
	isolation: isolate;
}

.mona-subscribe__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mona-subscribe__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
}

.mona-subscribe::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mona-scrim-side);
}

.mona-subscribe__title {
	max-width: 20ch;
	color: var(--mona-surface);
	font-size: var(--mona-fs-h2);
}

.mona-subscribe__text {
	max-width: 52ch;
	margin: var(--mona-s-3) 0 0;
	color: var(--mona-text-invert);
	opacity: 0.85;
}

.mona-subscribe__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mona-s-3);
	max-width: 560px;
}

.mona-subscribe__input {
	flex: 1 1 240px;
	min-height: 52px;
	padding: 0 var(--mona-s-5);
	background: rgba(242, 241, 236, 0.1);
	border: 1px solid rgba(242, 241, 236, 0.3);
	border-radius: var(--mona-radius-pill);
	color: var(--mona-text-invert);
	font-size: var(--mona-fs-body);
}

.mona-subscribe__input::placeholder {
	color: var(--mona-text-invert-muted);
}

.mona-subscribe__input:focus {
	outline: none;
	border-color: var(--mona-amber);
	box-shadow: 0 0 0 4px var(--mona-amber-glow);
}

.mona-subscribe__note {
	margin: var(--mona-s-3) 0 0;
	color: var(--mona-text-invert-muted);
	font-size: var(--mona-fs-2xs);
}

@media (prefers-reduced-motion: reduce) {
	.mona-ticker__list {
		animation: none;
	}

	.mona-ticker__label::before {
		animation: none;
	}
}

@media (min-width: 900px) {
	.mona-catblock {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.mona-catblock--flip > .mona-poster {
		order: 2;
	}

	.mona-catblock > .mona-poster {
		aspect-ratio: auto;
		min-height: 420px;
	}

	.mona-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--mona-s-8);
	}

	.mona-subscribe {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
	}
}

/* ===============================================================
 * 18. Contact page — form card, info tiles, aside stack
 * =============================================================== */

.mona-contact {
	display: grid;
	gap: var(--mona-s-5);
	align-items: start;
}

.mona-contact__aside {
	display: grid;
	gap: var(--mona-s-4);
}

.mona-contact .mona-mailcard {
	margin-bottom: 0;
}

/* Form card */
.mona-form {
	display: grid;
	gap: var(--mona-s-4);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--mona-surface);
	border-radius: var(--mona-radius-xl);
	box-shadow: var(--mona-shadow);
}

.mona-form__head {
	display: grid;
	gap: var(--mona-s-2);
	margin-bottom: var(--mona-s-2);
}

.mona-form__title {
	font-size: var(--mona-fs-h3);
}

.mona-form__lead {
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
}

.mona-form__row {
	display: grid;
	gap: var(--mona-s-4);
}

.mona-field {
	display: grid;
	gap: var(--mona-s-2);
}

.mona-field__label {
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}

.mona-field__label small {
	margin-left: var(--mona-s-2);
	color: var(--mona-text-muted);
	font-family: var(--mona-font);
	font-weight: var(--mona-w-regular);
	font-size: var(--mona-fs-xs);
}

.mona-input,
.mona-select,
.mona-textarea {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--mona-s-4);
	background: var(--mona-paper);
	border: 1px solid var(--mona-line-strong);
	border-radius: var(--mona-radius);
	color: var(--mona-text);
	font-size: var(--mona-fs-body);
	transition: border-color var(--mona-dur-fast) var(--mona-ease),
		box-shadow var(--mona-dur-fast) var(--mona-ease),
		background var(--mona-dur-fast) var(--mona-ease);
}

.mona-textarea {
	min-height: 160px;
	padding-block: var(--mona-s-3);
	resize: vertical;
	line-height: 1.55;
}

.mona-select {
	appearance: none;
	padding-right: var(--mona-s-8);
	background-image: linear-gradient(45deg, transparent 50%, var(--mona-text) 50%),
		linear-gradient(135deg, var(--mona-text) 50%, transparent 50%);
	background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.mona-input::placeholder,
.mona-textarea::placeholder {
	color: var(--mona-text-muted);
}

.mona-input:focus,
.mona-select:focus,
.mona-textarea:focus {
	outline: none;
	background: var(--mona-surface);
	border-color: var(--mona-amber);
	box-shadow: 0 0 0 4px var(--mona-amber-glow);
}

.mona-field__hint {
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
}

.mona-check {
	display: flex;
	align-items: flex-start;
	gap: var(--mona-s-3);
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-sm);
	line-height: 1.5;
}

.mona-check input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--mona-amber);
}

.mona-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mona-s-3) var(--mona-s-5);
	margin-top: var(--mona-s-2);
}

.mona-form__note {
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
}

/* Info tiles — three response promises. Rows on phones, columns from 640px. */
.mona-infotiles {
	display: grid;
	gap: var(--mona-s-3);
}

.mona-infotile {
	display: grid;
	grid-template-columns: 6.75rem 1fr;
	column-gap: var(--mona-s-4);
	row-gap: var(--mona-s-1);
	align-items: center;
	padding: var(--mona-s-4);
	background: var(--mona-surface);
	border-radius: var(--mona-radius);
	box-shadow: var(--mona-shadow-sm);
}

.mona-infotile__num {
	grid-row: 1 / 3;
}

.mona-infotile__num {
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-heavy);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--mona-amber-ink);
}

.mona-infotile__label {
	color: var(--mona-text);
	font-family: var(--mona-font-display);
	font-weight: var(--mona-w-semibold);
	font-size: 1.0625rem;
	line-height: 1.15;
}

.mona-infotile__text {
	margin: 0;
	color: var(--mona-text-muted);
	font-size: var(--mona-fs-xs);
}

/* A plain white panel for short lists beside the form. */
.mona-panel {
	padding: var(--mona-s-5);
	background: var(--mona-surface);
	border-radius: var(--mona-radius-lg);
	box-shadow: var(--mona-shadow-sm);
}

.mona-panel__title {
	margin-bottom: var(--mona-s-3);
	font-size: 1.375rem;
}

.mona-panel .mona-deflist {
	margin: 0;
	gap: var(--mona-s-2);
}

.mona-panel .mona-deflist li {
	padding: var(--mona-s-3) var(--mona-s-4);
	box-shadow: none;
	background: var(--mona-paper);
}

.mona-panel .mona-deflist__term {
	font-size: 1.0625rem;
}

@media (min-width: 640px) {
	.mona-form__row--2 {
		grid-template-columns: 1fr 1fr;
	}

	.mona-infotiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mona-infotile {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.mona-infotile__num {
		grid-row: auto;
	}
}

@media (min-width: 1000px) {
	.mona-contact {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--mona-s-6);
	}

	/* The form is the shorter column: it stays in view while the aside scrolls. */
	.mona-contact .mona-form {
		position: sticky;
		top: calc(var(--mona-header-h) + var(--mona-s-5));
	}
}

.mona-faqwrap {
	max-width: 900px;
}

.mona-footer__contact {
	margin-top: var(--mona-s-4);
	padding-top: var(--mona-s-4);
	border-top: 1px solid var(--mona-line-invert);
	max-width: 46ch;
}

.mona-footer__contact li {
	color: var(--mona-text-invert-muted);
}

/* ---------------------------------------------------------------------------
 * Front-page preloader
 *
 * Printed only on the front page, by inc/hooks/preloader.php. Everything below
 * is inert on every other template because the markup is not there.
 *
 * ⚠️ The dismissal is CSS, deliberately. `mona-preloader-out` runs on its own
 * and always ends in `visibility: hidden`, so the site arrives even when
 * main.js does not — it is a footer script, and a blocked, stale or broken one
 * would otherwise leave a black panel over the home page forever. main.js adds
 * `.is-done`, which only shortens the wait. Never make this JS-only, and never
 * remove the animation on the assumption that the script covers it.
 * ------------------------------------------------------------------------- */
.mona-preloader {
	position: fixed;
	inset: 0;
	/* Above .mona-skip and .screen-reader-text:focus, the highest at 100. */
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mona-ink);
	opacity: 1;
	visibility: visible;
	/* visibility is stepped to the END of the fade so the panel stays hit-testable
	   until it is actually invisible, then stops intercepting clicks. */
	transition:
		opacity var(--mona-dur) var(--mona-ease),
		visibility 0s linear var(--mona-dur);
	animation: mona-preloader-out var(--mona-dur) var(--mona-ease) 2200ms forwards;
}

/*
 * main.js sets this the moment the page has loaded.
 *
 * It CANCELS the animation rather than re-timing it. Re-declaring the same
 * animation with a shorter delay does not restart it — the name is unchanged,
 * so the running animation simply re-reads the delay, finds its local time is
 * already past the end, and snaps straight to the finished state. The panel
 * vanished in one frame instead of fading. Handing the exit to a transition
 * lets it start from wherever the panel currently is.
 */
.mona-preloader.is-done {
	animation: none;
	opacity: 0;
	visibility: hidden;
}

@keyframes mona-preloader-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.mona-preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mona-s-4);
	padding: var(--mona-s-6);
}

.mona-preloader__mark {
	width: 64px;
	height: 64px;
}

.mona-preloader__bg {
	fill: var(--mona-brand-navy);
}

.mona-preloader__gear {
	fill: none;
	stroke: var(--mona-brand-amber);
	stroke-width: 5;
	/*
	 * The gear's own centre, not the tile's: the teeth run y 12–53 and the hub
	 * circle sits at (32, 34), so spinning about 50% 50% wobbles visibly.
	 */
	transform-origin: 50% 53%;
	animation: mona-preloader-turn 3.2s linear infinite;
}

@keyframes mona-preloader-turn {
	to {
		transform: rotate(360deg);
	}
}

.mona-preloader__word {
	margin: 0;
	font-family: var(--mona-font-display);
	font-size: var(--mona-fs-h4);
	font-weight: var(--mona-w-bold);
	letter-spacing: 0.02em;
	color: var(--mona-text-invert);
}

.mona-preloader__bar {
	position: relative;
	width: 160px;
	height: 3px;
	border-radius: var(--mona-radius-pill);
	background: var(--mona-line-invert);
	overflow: hidden;
}

/*
 * Indeterminate. A bar that filled 0→100% would be claiming to know how much is
 * left, and nothing on this page does.
 */
.mona-preloader__bar span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	border-radius: inherit;
	background: var(--mona-amber);
	animation: mona-preloader-sweep 1.15s var(--mona-ease-in-out) infinite;
}

@keyframes mona-preloader-sweep {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(250%);
	}
}

/*
 * Reduced motion: the panel still appears and still leaves — removing it here
 * would give these visitors a different page, not a calmer one — but nothing
 * inside it moves, and it leaves sooner because there is no animation left to
 * watch.
 */
@media (prefers-reduced-motion: reduce) {
	.mona-preloader {
		animation-delay: 900ms;
	}

	.mona-preloader__gear,
	.mona-preloader__bar span {
		animation: none;
	}

	.mona-preloader__bar span {
		width: 100%;
	}
}