/*
 * Site header.
 * Below 64rem: one 44px bar (menu toggle | logo | search) plus a slide-in drawer.
 * From 64rem: utility row (menu, search) above the logo + topics mega-menu.
 */

/* Let the sticky header travel the whole page, not just the header template part. */
.curio-header-part {
	display: contents;
}

.curio-site-header {
	position: sticky;
	top: 0;
	/* Above ad creatives (often z-index 10+) and the theme's z-20 popups. */
	z-index: var(--header-z, 10000);
	margin-bottom: 0.75rem;
	color: var(--c-primary);
	font-family: var(--f-primary);
	pointer-events: none;
}

.admin-bar .curio-site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Set by view.js when the (wrapped) desktop header would cover over a third
   of the screen, e.g. at 200% text: it then scrolls away with the page. */
.curio-site-header.is-tall {
	position: relative;
}

/* Pages whose first module sits flush under the header. */
.page-template-page-all-topics .curio-site-header,
.error404 .curio-site-header,
.search .curio-site-header {
	margin-bottom: 0;
}

.curio-site-header :where(a) {
	color: var(--c-primary);
}

.curio-site-header :where(ul) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.curio-site-header :where(button) {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

.curio-site-header__inner {
	position: relative;
	background-color: var(--c-white);
	pointer-events: auto;
}

/* Small chevron (lucide 24px box scaled so the visible stroke is ~10×5px). */
.curio-site-header .curio-site-header__chevron {
	display: block;
	width: 20px;
	height: 20px;
	margin: -7px -5px -7px 0;
	stroke-width: 2.4;
}

@media (prefers-reduced-motion: no-preference) {
	.curio-site-header .curio-site-header__chevron {
		transition: transform 250ms ease-in-out;
	}
}

.curio-site-header [aria-expanded="true"] > .curio-site-header__chevron {
	transform: rotate(180deg);
}

/* Logo (text wordmark or uploaded image). */
.curio-site-header__logo {
	display: block;
	line-height: 0;
}

.curio-site-header__logo .curio-logo--text {
	/* Placeholder wordmark: same box as the reference logo (width ≈ 10.43 × height). */
	box-sizing: border-box;
	width: 10.43em;
	max-width: 100%;
	font-size: var(--curio-logo-h);
	line-height: 1;
}

.curio-site-header__bar-home .curio-logo--text {
	justify-content: center;
}

.curio-site-header__logo img {
	width: auto;
	max-width: 100%;
	height: var(--curio-logo-h);
}

/* -------------------------------------------------------------
 * Bar (mobile header row; utility row on desktop)
 * ----------------------------------------------------------- */
.curio-site-header__bar {
	position: relative;
	display: grid;
	grid-template-columns: max-content 1fr max-content;
	align-items: center;
	column-gap: 0.75rem;
	height: 2.75rem;
	border-bottom: 1px solid var(--c-text);
	background-color: var(--c-white);
}

.curio-site-header__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 100%;
	border-right: 1px solid var(--c-text);
	color: var(--c-black);
}

.curio-site-header__toggle .curio-icon {
	width: 26px;
	height: 26px;
	stroke-width: 1.9;
}

.curio-site-header__bar-home {
	/* Shrinks with the screen at large text sizes so the wordmark isn't cut off. */
	--curio-logo-h: min(1.25rem, 6vw);
	justify-self: center;
	display: block;
	max-width: 100%;
	overflow: hidden;
}

.curio-site-header__bar-home:hover,
.curio-site-header__home:hover {
	text-decoration: none;
}

/* -------------------------------------------------------------
 * Drawer (mobile) — becomes the utility row on desktop
 * ----------------------------------------------------------- */
.curio-site-header__drawer {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	z-index: 1;
	width: 100%;
	max-height: calc(100vh - 2.75rem);
	max-height: calc(100dvh - 2.75rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.25rem var(--grid-edge) 4.25rem;
	background-color: var(--c-white);
	box-shadow: 0 4px 3px 0 color-mix(in srgb, var(--c-black) 50%, transparent);
	transform: translateX(-110%);
	visibility: hidden;
	transition: transform 250ms ease-in-out, visibility 0s linear 250ms;
}

.curio-site-header__drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 250ms ease-in-out, visibility 0s;
}

.curio-site-header__topics-menu,
.curio-site-header__menu {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.1666666667;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.curio-site-header__item {
	break-inside: avoid-column;
}

.curio-site-header__item > a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 0;
}

.curio-site-header__item > a[aria-current] {
	color: var(--c-secondary);
	font-weight: 900;
}

.curio-site-header__topics-menu > .curio-site-header__item,
.curio-site-header__menu > .curio-site-header__item {
	border-bottom: 1px solid var(--c-rule);
}

.curio-site-header__sub-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0 0.625rem;
	color: var(--c-primary);
	font-weight: 300;
	text-align: left;
	cursor: pointer;
}

.curio-site-header__sub-menu .curio-site-header__item > a {
	padding: 0.5rem 0 0.625rem;
	font-weight: 300;
}

/* Drawer subcategories: full-width 44px rows in the bold sans, sentence case. */
.curio-site-header__accordion .curio-site-header__sub-menu {
	padding-block: 0.25rem 0.5rem;
}

.curio-site-header__accordion .curio-site-header__sub-menu .curio-site-header__item:not(.curio-site-header__item--all) + .curio-site-header__item {
	border-top: 1px solid var(--c-rule);
}

.curio-site-header__accordion .curio-site-header__sub-menu .curio-site-header__item > a {
	width: 100%;
	padding: 0.5rem 0;
	color: var(--c-heading);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

.curio-site-header__accordion .curio-site-header__sub-menu .curio-site-header__item > a[aria-current] {
	color: var(--c-heading);
}

/* The page or section you are in: an amber bar before the name. */
.curio-site-header__accordion .curio-site-header__sub-menu .curio-site-header__item > a[aria-current]::before {
	content: "";
	align-self: stretch;
	flex: 0 0 4px;
	margin: 0.125rem 0.625rem 0.125rem 0;
	border-radius: 2px;
	background-color: var(--c-tag);
}

/* "View all <Category>": first in each panel, an amber button. */
.curio-site-header__accordion .curio-site-header__sub-menu .curio-site-header__item > .curio-site-header__view-all {
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-button);
	background-color: var(--c-tag);
	color: var(--c-tag-text);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.curio-site-header__accordion .curio-site-header__sub-menu .curio-site-header__item > .curio-site-header__view-all::before {
	content: none;
}

.curio-site-header__view-all .curio-icon {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.5;
}

.curio-site-header__accordion .curio-site-header__sub-menu .curio-site-header__view-all:hover,
.curio-site-header__accordion .curio-site-header__sub-menu .curio-site-header__view-all:focus-visible {
	background-color: var(--c-navy);
	color: var(--c-white);
	text-decoration: none;
}

/* The section you are in: its name is underlined in amber. */
.curio-site-header__item--parent.is-current > .curio-site-header__sub-toggle .curio-site-header__sub-label {
	box-shadow: inset 0 -3px 0 var(--c-tag);
}

/* All Topics, About: closing links of the drawer. */
.curio-site-header__pages {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.1666666667;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.curio-site-header__pages > .curio-site-header__item {
	border-bottom: 1px solid var(--c-rule);
}

.curio-site-header__pages > .curio-site-header__item > a {
	width: 100%;
	color: var(--c-primary);
}

/* Topic accordion (mobile). */
.curio-site-header__accordion .curio-site-header__sub-menu {
	margin-inline: calc(var(--grid-edge) * -1);
	padding-inline: var(--grid-edge);
	background-color: var(--c-gray-light);
}

.curio-site-header__accordion .curio-site-header__sub-menu[hidden] {
	display: none;
}

/* Utility menu with sub-items: always expanded in the drawer. */
.curio-site-header__menu .curio-site-header__sub-toggle {
	display: inline-block;
	width: auto;
	padding: 0.75rem 0 0.375rem;
	font-weight: 700;
	cursor: default;
}

.curio-site-header__menu .curio-site-header__sub-toggle .curio-site-header__chevron {
	display: none;
}

.curio-site-header__menu .curio-site-header__sub-menu {
	column-count: 2;
	column-gap: var(--grid-gap);
}

/* -------------------------------------------------------------
 * Search: the field sweeps in from the icon at the far right and
 * covers the row (menu button + logo on phones, topic menu on desktop).
 * ----------------------------------------------------------- */
.curio-site-header .curio-search {
	--search-speed: 420ms;
	--search-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	display: flex;
	align-items: center;
	height: 100%;
}

/* The panel is positioned against the header row, not the search box. */
.curio-search__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 2.75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	padding-left: 0.75rem;
	background-color: var(--c-white);
	clip-path: inset(0 0 0 100%);
	visibility: hidden;
	transition:
		clip-path var(--search-speed) var(--search-ease),
		visibility 0s linear var(--search-speed);
}

/* Phone: the same gap before the close button as at the left edge. */
.curio-search--mobile .curio-search__panel {
	padding-right: 0.625rem;
}

.curio-search__panel.is-open {
	clip-path: inset(0 0 0 0);
	visibility: visible;
	transition:
		clip-path var(--search-speed) var(--search-ease),
		visibility 0s;
}

.curio-search__form {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	opacity: 0;
	transform: translateX(1.5rem);
	transition: opacity 200ms ease, transform var(--search-speed) var(--search-ease);
}

.curio-search__panel.is-open .curio-search__form {
	opacity: 1;
	transform: none;
	transition-delay: 90ms;
}

.curio-search__icon {
	display: none;
}

.curio-search__input {
	appearance: none;
	flex: 1;
	min-width: 0;
	height: 2rem;
	margin: 0;
	padding: 0 0.25rem;
	border: 0;
	border-bottom: 2px solid var(--c-primary);
	border-radius: 0;
	background: var(--c-white);
	color: var(--c-black);
	font: inherit;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
}

.curio-search__input::placeholder {
	color: var(--c-gray-mid);
}

.curio-search__input::-webkit-search-cancel-button {
	display: none;
}

.curio-search__input:focus,
.curio-search__input:focus-visible {
	outline: none;
	border-bottom-color: var(--c-tag);
	box-shadow: 0 2px 0 0 var(--c-tag);
}

.curio-search__submit {
	flex-shrink: 0;
	height: 1.875rem;
	padding: 0 0.625rem;
	border: 0;
	border-radius: var(--radius-button);
	background-color: var(--c-secondary);
	color: var(--c-white);
	font-family: var(--f-primary);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.curio-search__submit:hover,
.curio-search__submit:focus-visible {
	background-color: var(--c-navy);
	color: var(--c-white);
}

.curio-search__toggle {
	position: relative;
	z-index: 3;
	display: block;
	width: 2.75rem;
	height: 100%;
	padding: 0;
	border: 0;
	overflow: hidden;
	background-color: var(--c-white);
	cursor: pointer;
}

.curio-search__toggle-inner {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 5.5rem;
	height: 100%;
	transition: left 250ms ease-in-out;
}

.curio-search__toggle[aria-expanded="true"] .curio-search__toggle-inner {
	left: -2.75rem;
}

.curio-search__toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 100%;
}

.curio-search__toggle-icon--open {
	color: var(--c-primary);
}

.curio-search__toggle-icon--open .curio-icon {
	width: 25px;
	height: 25px;
	stroke-width: 2.1;
}

.curio-search__toggle-icon--close {
	color: var(--c-black);
}

.curio-search__toggle-icon--close .curio-icon {
	width: 30px;
	height: 30px;
	stroke-width: 1.8;
}

/* Phones: the menu button and logo fade as the field sweeps over them. */
.curio-site-header__toggle,
.curio-site-header__bar-home {
	transition: opacity 250ms ease;
}

.curio-site-header.has-search-open .curio-site-header__toggle,
.curio-site-header.has-search-open .curio-site-header__bar-home {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.curio-search__panel,
	.curio-search__panel.is-open,
	.curio-search__form,
	.curio-search__toggle-inner {
		transition: none;
	}
}

/* -------------------------------------------------------------
 * Branding row (desktop only)
 * ----------------------------------------------------------- */
.curio-site-header__branding {
	display: none;
}

/* Topics mega-menu. */
.curio-mega {
	display: none;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.curio-mega__link {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.curio-mega__link[aria-current] {
	color: var(--c-secondary);
	font-weight: 900;
}

.curio-mega__item:has(> .curio-mega__toggle[aria-expanded="true"]) > .curio-mega__link {
	text-decoration: underline;
}

.curio-mega__all,
.curio-mega__topic {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.curio-site-header__drawer {
		transition: none;
	}
}

/* -------------------------------------------------------------
 * Mobile: hide the bar when scrolling down, show it when scrolling up.
 * ----------------------------------------------------------- */
@media (max-width: 63.9375rem) {
	.curio-site-header__inner {
		backface-visibility: hidden;
		transform: translate3d(0, 0, 0);
	}

	@media (prefers-reduced-motion: no-preference) {
		.curio-site-header__inner {
			transition: transform 250ms ease-in-out;
		}
	}

	.curio-site-header.is-pinned.is-scroll-down:not(.has-open) .curio-site-header__inner {
		transform: translate3d(0, -100%, 0);
	}

	/* The page behind the open drawer doesn't scroll. Only on <html> (it
	   applies to the viewport): on <body> too, body would become the scroll
	   container, the sticky header would fall back to the top of the page and
	   the drawer would open off-screen (or the page would jump to the top). */
	html.curio-drawer-open {
		overflow: hidden;
	}
}

/* -------------------------------------------------------------
 * Desktop
 * ----------------------------------------------------------- */
@media (min-width: 64rem) {
	/* min-height, not height: at large text sizes the menu wraps to more lines. */
	.curio-site-header {
		min-height: 6.6875rem;
		margin-bottom: 1.875rem;
	}

	.page-template-page-all-topics .curio-site-header,
	.error404 .curio-site-header,
	.search .curio-site-header {
		margin-bottom: 0;
	}

	.curio-site-header__inner {
		border-bottom: 1px solid var(--c-text);
	}

	/* The utility row is gone on desktop; its links live in the mobile drawer. */
	.curio-site-header__bar {
		display: none;
	}

	.curio-site-header__toggle,
	.curio-site-header__bar-home,
	.curio-search--mobile {
		display: none;
	}

	.curio-site-header__drawer {
		position: static;
		display: flex;
		align-items: stretch;
		width: 100%;
		max-width: var(--grid-max);
		height: 2.1875rem;
		max-height: none;
		margin: 0 auto;
		padding: 0;
		overflow: visible;
		box-shadow: none;
		transform: none;
		visibility: visible;
		transition: none;
	}

	.curio-site-header__topics-menu {
		display: none;
	}

	.curio-site-header__menu {
		display: flex;
		align-items: center;
		column-gap: 1.75rem;
		margin-left: auto;
		margin-right: 0.75rem;
	}

	.curio-site-header__menu > .curio-site-header__item {
		border: 0;
	}

	.curio-site-header__menu > .curio-site-header__item--parent {
		position: relative;
	}

	.curio-site-header__menu .curio-site-header__sub-toggle {
		display: flex;
		padding: 0.75rem 0;
		cursor: pointer;
	}

	.curio-site-header__menu .curio-site-header__sub-toggle .curio-site-header__chevron {
		display: block;
	}

	.curio-site-header__menu .curio-site-header__sub-toggle[aria-expanded="true"] {
		text-decoration: underline;
	}

	.curio-site-header__menu .curio-site-header__sub-menu {
		position: absolute;
		top: 50%;
		left: 0;
		display: none;
		width: 11.25rem;
		padding: 0.625rem;
		columns: auto;
		background-color: var(--c-white);
		box-shadow: 0 4px 3px 0 color-mix(in srgb, var(--c-black) 50%, transparent);
		transform: translateY(1.09375rem);
	}

	.curio-site-header__menu .curio-site-header__sub-menu.is-open {
		display: block;
	}

	.curio-site-header__menu .curio-site-header__sub-menu .curio-site-header__item > a {
		font-weight: 700;
	}

	/* Search sits at the far right of the main row; the field covers the topic menu. */
	.curio-site-header__right {
		position: relative;
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: flex-end;
		align-self: stretch;
		min-width: 0;
	}

	/* The 44px button reaches past the content edge so the magnifier's ink,
	   not its box, lines up with the edge (as the logo does on the left). */
	.curio-search--desktop {
		flex-shrink: 0;
		height: 2.75rem;
		margin-left: 1.25rem;
		margin-right: var(--curio-search-overhang, -0.875rem);
	}

	.curio-search--desktop .curio-search__panel {
		top: 50%;
		bottom: auto;
		right: calc(3.25rem + var(--curio-search-overhang, -0.875rem));
		height: 3rem;
		padding-left: 0;
		transform: translateY(-50%);
	}

	.curio-search--desktop .curio-search__form {
		gap: 0.75rem;
	}

	.curio-search--desktop .curio-search__input {
		height: 2.75rem;
		font-size: 1.125rem;
	}

	.curio-search--desktop .curio-search__submit {
		height: 2.5rem;
		padding: 0 1.125rem;
		font-size: 0.875rem;
	}

	.curio-search--desktop .curio-search__toggle {
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 50%;
		transition: background-color 0.15s ease;
	}

	.curio-search--desktop .curio-search__toggle:hover {
		background-color: var(--c-gray-light);
	}

	.curio-search--desktop .curio-search__toggle[aria-expanded="true"] {
		background-color: var(--c-gray-light);
	}

	.curio-search--desktop .curio-search__toggle-inner {
		width: 5.5rem;
	}

	.curio-search--desktop .curio-search__toggle[aria-expanded="true"] .curio-search__toggle-inner {
		left: -2.75rem;
	}

	.curio-search--desktop .curio-search__toggle-icon {
		width: 2.75rem;
	}

	.curio-search--desktop .curio-search__toggle-icon--open .curio-icon {
		width: 22px;
		height: 22px;
		stroke-width: 2.4;
	}

	.curio-search--desktop .curio-search__toggle-icon--close .curio-icon {
		width: 24px;
		height: 24px;
		stroke-width: 2.2;
		color: var(--c-primary);
	}

	/* The topic menu fades and slides aside while the field is open. */
	.curio-mega {
		transition: opacity 250ms ease, transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.curio-site-header.has-search-open .curio-mega {
		opacity: 0;
		transform: translateX(-1.5rem);
		pointer-events: none;
	}

	.curio-site-header.is-pinned .curio-search--desktop .curio-search__panel {
		height: 2.75rem;
	}

	/* Branding row. */
	.curio-site-header__branding {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: var(--content-max);
		min-height: 6.625rem;
		margin: 0 auto;
		transition: min-height 0.2s ease-in-out;
	}

	.curio-site-header__home {
		--curio-logo-h: 2.3rem;
		display: block;
		flex-shrink: 0;
		min-width: 0;
		max-width: 35.1588rem;
		margin-right: var(--grid-gap);
	}

	.curio-site-header__home .curio-logo--text,
	.curio-site-header__home img {
		transition: font-size 0.2s ease-in-out, height 0.2s ease-in-out;
	}

	/* The logo keeps its full width (the menu wraps instead of running under
	   it), so its box is only as wide as the wordmark itself. */
	.curio-site-header__home .curio-logo--text {
		width: auto;
	}

	.curio-site-header.is-pinned .curio-site-header__branding {
		min-height: 3.5rem;
	}

	.curio-site-header.is-pinned .curio-site-header__home {
		--curio-logo-h: 1.5rem;
	}

	/* The menu shrinks and wraps instead of running under the logo or off-screen. */
	.curio-mega {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
	}

	.curio-mega__list {
		--mega-gap: 1rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		column-gap: var(--mega-gap);
		row-gap: 0;
		margin-left: var(--mega-gap);
	}

	.curio-mega__item {
		display: flex;
		align-items: center;
	}

	.curio-mega__link:hover,
	.curio-mega__link:focus-visible {
		text-decoration: underline;
	}

	/* Chevron button: opens the panel (keyboard, touch); the name navigates. */
	/* 44px tall hit area; the hover fill and focus ring are a smaller rounded
	   box (drawn by ::before) about as tall as the name's own ring. */
	.curio-mega__toggle {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;
		height: 2.75rem;
		margin-left: 0.1875rem;
		color: var(--c-header-text);
		cursor: pointer;
	}

	.curio-mega__toggle::before {
		content: "";
		position: absolute;
		inset: 0.625rem 0.125rem;
		z-index: -1;
		border-radius: 4px;
	}

	.curio-mega__toggle:hover::before {
		background-color: color-mix(in srgb, var(--c-header-text) 14%, transparent);
	}

	.curio-site-header .curio-mega__toggle .curio-site-header__chevron {
		margin: 0;
	}

	/* Shared dropdown panel look. */
	.curio-mega__all,
	.curio-mega__topic {
		position: absolute;
		top: calc(100% + 1px);
		z-index: 1;
		background-color: var(--c-white);
		font-weight: 300;
		letter-spacing: normal;
		text-transform: none;
	}

	.curio-mega__all.is-open,
	.curio-mega__topic.is-open {
		display: flex;
	}

	/* "All Topics" panel: full-width sheet, three columns of topics. */
	/* Anchored to the right edge of the header row (which is also the content
	 * edge) and centered in the content area by offsetting half the leftover. */
	.curio-mega__all {
		--curio-all-w: var(--content-max);
		left: auto;
		right: calc((var(--content-max) - var(--curio-all-w)) / 2);
		flex-direction: column;
		width: var(--curio-all-w);
		margin: 0;
		padding: 1.75rem 0;
	}

	.curio-mega__all::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		z-index: -1;
		width: 100vw;
		max-width: var(--grid-max);
		height: 100%;
		background-color: var(--c-white);
		box-shadow: 0 4px 3px 0 color-mix(in srgb, var(--c-black) 50%, transparent);
		transform: translateX(-50%);
	}

	.curio-mega__all-list {
		display: grid;
		grid-template-columns: repeat(3, calc(var(--col-w) * 4 + var(--grid-gap) * 3));
		justify-content: space-between;
		row-gap: 2.5rem;
		margin-bottom: 2.5rem;
	}

	.curio-mega__all-item {
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.2083333333;
	}

	.curio-mega__all-heading {
		display: block;
	}

	.curio-mega__all-heading.has-children {
		margin-bottom: 0.625rem;
		padding-bottom: 0.625rem;
		border-bottom: 1px solid var(--c-rule);
	}

	.curio-mega__all-children {
		font-size: 1rem;
		line-height: 1.625;
	}

	.curio-mega__all-footer {
		display: flex;
		justify-content: center;
	}

	.curio-mega__all-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 2.5rem;
		padding: 0 1.25rem;
		background-color: var(--c-secondary);
		color: var(--c-white);
		font-size: 0.875rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.075em;
		text-transform: uppercase;
	}

	.curio-mega__all-button:hover,
	.curio-mega__all-button:focus-visible {
		background-color: var(--c-navy);
		text-decoration: none;
	color: var(--c-white);
}

	/* Single-topic panel: topic intro on the left, subtopics in two columns. */
	.curio-mega__topic {
		left: 0;
		width: 40rem;
		box-shadow: 0 18px 36px color-mix(in srgb, var(--c-black) 14%, transparent), 0 2px 4px color-mix(in srgb, var(--c-black) 8%, transparent);
	}

	.curio-mega__topic.is-open {
		display: grid;
		grid-template-columns: 13.125rem minmax(0, 1fr);
	}

	.curio-mega__topic--wide {
		width: 52rem;
	}

	.curio-mega__topic--no-children {
		width: 16rem;
	}

	.curio-mega__topic--no-children.is-open {
		grid-template-columns: minmax(0, 1fr);
	}

	/* No description: heading and button share a row above the subcategories,
	   so there is no empty gray column. */
	.curio-mega__topic--no-desc.is-open {
		grid-template-columns: minmax(0, 1fr);
	}

	.curio-mega__topic--no-desc .curio-mega__topic-intro {
		min-height: 0;
	}

	.curio-mega__topic--no-desc:not(.curio-mega__topic--no-children) .curio-mega__topic-intro {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.5rem;
	}

	.curio-mega__topic--no-desc .curio-mega__topic-button {
		margin-top: 0;
	}

	.curio-mega__topic-intro {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		min-height: 11.5rem;
		padding: 1.5rem;
		background-color: var(--c-gray-light);
	}

	.curio-mega__topic-heading {
		color: var(--c-primary);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.1;
	}

	.curio-mega__topic-desc {
		margin: 0;
		color: color-mix(in srgb, var(--c-text) 78%, transparent);
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 1.45;
	}

	.curio-mega__topic-button {
		align-self: flex-start;
		margin-top: auto;
		padding: 0.5625rem 0.875rem;
		border-radius: 0.375rem;
		background-color: var(--c-secondary);
		color: var(--c-white);
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: 0.075em;
		text-transform: uppercase;
		transition: background-color 0.15s ease;
	}

	.curio-site-header .curio-mega__topic-button:hover,
	.curio-site-header .curio-mega__topic-button:focus-visible {
		background-color: var(--c-navy);
		color: var(--c-white);
		text-decoration: none;
	}

	.curio-mega__topic-children {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: start;
		column-gap: 1.5rem;
		margin: 0;
		padding: 1.125rem 1.5rem 1.5rem;
		list-style: none;
	}

	.curio-mega__topic--wide .curio-mega__topic-children {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.curio-mega__topic-children a {
		display: block;
		padding: 0.5625rem 0;
		border-bottom: 1px solid var(--c-rule);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.3;
		transition: color 0.15s ease;
	}

	.curio-mega__topic-children a:hover,
	.curio-mega__topic-children a:focus-visible {
		color: var(--c-secondary);
		text-decoration: none;
	}

	/* The page you are in: an amber bar before the name, as in the phone drawer. */
	.curio-mega__topic-children a[aria-current] {
		display: flex;
		align-items: center;
		color: var(--c-heading);
		font-weight: 800;
	}

	.curio-mega__topic-children a[aria-current]::before {
		content: "";
		align-self: stretch;
		flex: 0 0 4px;
		margin-right: 0.5rem;
		border-radius: 2px;
		background-color: var(--c-tag);
	}
}

@media (min-width: 80rem) {
	.curio-site-header__home {
		--curio-logo-h: 3.375rem;
	}

	.curio-mega__list {
		--mega-gap: 1.875rem;
	}

	.curio-mega__all {
		--curio-all-w: calc(var(--col-w) * 9 + var(--grid-gap) * 8);
	}

	.curio-mega__all-list {
		grid-template-columns: repeat(3, calc(var(--col-w) * 3 + var(--grid-gap) * 2));
	}
}

@media print {
	.curio-site-header {
		position: static;
	}

	.curio-site-header__toggle,
	.curio-site-header__drawer,
	.curio-site-header .curio-search,
	.curio-site-header__branding {
		display: none;
	}

	.curio-site-header__bar-home {
		display: block;
	}
}

/* -------------------------------------------------------------
 * "Always the small bar" (Curio Settings → Header): the desktop
 * header stays at its compact size, with no shrink animation.
 * ----------------------------------------------------------- */
@media (min-width: 64rem) {
	.curio-site-header.curio-site-header--compact {
		min-height: 3.5625rem;
	}

	.curio-site-header--compact .curio-site-header__branding {
		min-height: 3.5rem;
		transition: none;
	}

	.curio-site-header--compact .curio-site-header__home {
		--curio-logo-h: 1.5rem;
	}

	.curio-site-header--compact .curio-site-header__home .curio-logo--text,
	.curio-site-header--compact .curio-site-header__home img {
		transition: none;
	}

	.curio-site-header--compact .curio-search--desktop .curio-search__panel {
		height: 2.75rem;
	}
}

/* Mobile drawer: main categories are the top level of the accordion, so they
   are the stronger type (bold caps) over the regular-weight subcategories. */
.curio-site-header__topics-menu > .curio-site-header__item > .curio-site-header__sub-toggle,
.curio-site-header__pages > .curio-site-header__item > a {
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.06em;
}

.curio-site-header__topics-menu > .curio-site-header__item > .curio-site-header__sub-toggle {
	padding: 0.75rem 0;
	color: inherit;
}

/* ---------------------------------------------------------------
 * Navy header bar (phone bar and desktop row). The phone drawer,
 * the menu panels and the search field stay white.
 * ------------------------------------------------------------- */
.curio-site-header__bar {
	border-bottom-color: var(--c-header);
	background-color: var(--c-header);
}

.curio-site-header__toggle {
	border-right-color: color-mix(in srgb, var(--c-header-text) 22%, transparent);
	color: var(--c-header-text);
}

.curio-site-header__bar-home .curio-logo--text {
	color: var(--c-header-text);
}

.curio-site-header__bar .curio-search__toggle {
	border-left: 1px solid color-mix(in srgb, var(--c-header-text) 22%, transparent);
	background-color: var(--c-header);
}

.curio-site-header__bar .curio-search__toggle-icon--open {
	color: var(--c-tag);
}

.curio-site-header__bar .curio-search__toggle-icon--close {
	color: var(--c-header-text);
}

.curio-site-header__item > a[aria-current],
.curio-site-header__menu .curio-site-header__sub-toggle {
	color: var(--c-label);
}

.curio-search__submit {
	background-color: var(--c-tag);
	color: var(--c-tag-text);
}

@media (min-width: 64rem) {
	.curio-site-header__inner {
		border-bottom-color: var(--c-header);
		background-color: var(--c-header);
	}

	.curio-site-header__logo .curio-logo--text {
		color: var(--c-header-text);
	}

	.curio-mega__link,
	.curio-mega__toggle .curio-site-header__chevron {
		color: var(--c-header-text);
	}

	.curio-mega__link[aria-current] {
		color: var(--c-tag);
	}

	.curio-mega__topic-heading {
		color: var(--c-heading);
	}

	.curio-mega__all-button,
	.curio-mega__topic-button {
		background-color: var(--c-tag);
		color: var(--c-tag-text);
	}

	.curio-search--desktop .curio-search__toggle {
		background-color: transparent;
	}

	.curio-search--desktop .curio-search__toggle:hover,
	.curio-search--desktop .curio-search__toggle[aria-expanded="true"] {
		background-color: color-mix(in srgb, var(--c-header-text) 14%, transparent);
	}

	.curio-search--desktop .curio-search__toggle-icon--open {
		color: var(--c-tag);
	}

	.curio-search--desktop .curio-search__toggle-icon--close .curio-icon {
		color: var(--c-header-text);
	}
}

@media (min-width: 64rem) {
	/* Search on the navy row: a white field and the amber button, same height, side by side. */
	.curio-search--desktop .curio-search__panel {
		background-color: transparent;
	}

	.curio-search--desktop .curio-search__form {
		align-items: center;
		gap: 0.5rem;
	}

	.curio-search--desktop .curio-search__input {
		height: 2.5rem;
		padding: 0 0.875rem;
		border: 0;
		border-radius: var(--radius-button);
		background-color: var(--c-white);
	}

	/* Ring drawn inside the field so the panel's edge never clips it. */
	.curio-search--desktop .curio-search__input:focus,
	.curio-search--desktop .curio-search__input:focus-visible {
		outline: 2px solid var(--c-tag);
		outline-offset: -2px;
		box-shadow: none;
	}

	.curio-search--desktop .curio-search__submit {
		height: 2.5rem;
		margin: 0;
	}

	/* On the navy row the generic navy hover would vanish: invert to white. */
	.curio-search--desktop .curio-search__submit:hover,
	.curio-search--desktop .curio-search__submit:focus-visible {
		background-color: var(--c-white);
		color: var(--c-header);
	}

	/* Room for the button's focus ring outside the field's edges. */
	.curio-search--desktop .curio-search__panel.is-open {
		clip-path: inset(-0.375rem);
	}
}

/* ---------------------------------------------------------------
 * Keyboard focus on the navy bar: a white ring (12:1 on navy; the
 * global blue ring is 2.1:1 there). Buttons at the screen edge draw
 * it inside their box so it isn't clipped. Panels, the drawer and
 * the search field are white and keep the blue ring.
 * ------------------------------------------------------------- */
.curio-site-header .curio-site-header__toggle:focus-visible,
.curio-site-header .curio-site-header__bar .curio-search__toggle:focus-visible {
	outline: 2px solid var(--c-header-text);
	outline-offset: -4px;
}

.curio-site-header .curio-site-header__bar-home:focus-visible {
	outline: 2px solid var(--c-header-text);
	outline-offset: 3px;
}

@media (min-width: 64rem) {
	.curio-site-header .curio-site-header__home:focus-visible,
	.curio-site-header .curio-mega__link:focus-visible {
		outline: 2px solid var(--c-header-text);
		outline-offset: 3px;
	}

	.curio-site-header .curio-search--desktop .curio-search__toggle:focus-visible {
		outline: 2px solid var(--c-header-text);
		outline-offset: -2px;
	}

	.curio-site-header .curio-mega__toggle:focus-visible {
		outline: none;
	}

	.curio-site-header .curio-mega__toggle:focus-visible::before {
		outline: 2px solid var(--c-header-text);
		outline-offset: 0;
	}

	.curio-site-header .curio-search--desktop .curio-search__submit:focus-visible {
		outline: 2px solid var(--c-header-text);
		outline-offset: 2px;
	}
}

/* Drawn wordmark: its own width, never the 10.43em placeholder box. */
.curio-logo.curio-logo--svg.curio-logo--svg {
	width: auto;
}


.curio-site-header__bar-home .curio-logo--svg svg {
	height: 1.35em;
}

@media (min-width: 64rem) {
	/* About 29px tall in the compact header, up to 40px in the tall one. */
	.curio-site-header__home .curio-logo--svg svg {
		height: min(1.2em, 2.5rem);
	}
}

/* Small laptops: tighter menu so all 7 categories stay on one row beside the logo. */
@media (min-width: 64rem) and (max-width: 79.9375rem) {
	.curio-mega__list {
		--mega-gap: 0.625rem;
	}

	.curio-mega {
		font-size: 0.875rem;
		letter-spacing: 0.04em;
	}
}