@layer components {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background: var(--black);
		color: var(--white-text);
	}

	/* ---- Utility bar ---- */
	.utility {
		height: var(--utility-h);
		overflow: hidden;
		transition: height var(--dur) var(--ease);
		border-bottom: var(--bw-hair) solid var(--on-dark-line);
	}
	.utility__inner { height: var(--utility-h); display: flex; align-items: center; justify-content: space-between; }
	.utility__place {
		font-size: var(--fs-micro);
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-label);
		text-transform: uppercase;
		color: var(--on-dark-muted);
	}
	.utility__right { display: none; align-items: center; gap: 18px; }
	.utility__menu { display: flex; gap: 22px; }
	.utility__menu a {
		font-size: var(--fs-micro);
		font-weight: var(--fw-semi);
		letter-spacing: var(--ls-ui);
		text-transform: uppercase;
		color: var(--white-text);
	}
	.utility__divider { width: 1px; height: 16px; background: var(--on-dark-faint); }
	.utility__social { display: flex; gap: 14px; }
	.utility__social .icon, .utility__search .icon { width: 15px; height: 15px; }
	.utility__social__link { display: flex; }
	.utility__social a, .utility__search { color: var(--white-text); display: flex; }

	/* ---- Masthead ---- */
	.masthead {
		height: var(--masthead-h);
		border-bottom: var(--nav-rule) solid var(--red);
		transition: height var(--dur) var(--ease);
	}
	.masthead__inner { height: 100%; display: flex; align-items: center; gap: var(--sp-6); }

	/* Placeholder type wordmark until the vector logo is supplied */
	.logo { display: block; flex: none; }
	.logo--type { display: flex; flex-direction: column; align-items: center; line-height: 1; }
	.logo__word {
		font-family: var(--font-display);
		font-weight: var(--fw-black);
		font-size: clamp(2.4rem, 4vw, 3.6rem);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--red);
		-webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.55);
		paint-order: stroke fill;
		line-height: 0.9;
	}
	.logo__sub {
		font-size: clamp(0.5rem, 0.8vw, 0.6875rem);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-mark);
		text-transform: uppercase;
		color: var(--white-text);
		margin-top: 3px;
		padding-left: var(--ls-mark);
	}

	.primary-nav { display: none; }
	.primary-nav__menu { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
	.primary-nav__menu a {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: var(--fs-ui);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-ui);
		text-transform: uppercase;
		color: var(--white-text);
		padding-block: 6px;
		border-bottom: 2px solid transparent;
		transition: border-color var(--dur) var(--ease);
	}
	.primary-nav__menu a:hover { border-bottom-color: var(--red); }
	.menu-item__chevron { width: 0.85em; height: 0.85em; opacity: 0.7; }
	.primary-nav__menu > .menu-item { position: relative; display: flex; align-items: center; }
	.menu-item__toggle { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--white-text); }
	.primary-nav .sub-menu { display: none; position: absolute; top: 100%; left: -16px; min-width: 220px; padding: 10px 0; background: var(--black); border-top: var(--bw-accent) solid var(--red); box-shadow: 0 16px 32px rgba(0,0,0,.4); z-index: 20; }
	.primary-nav .sub-menu a { display: block; padding: 8px 18px; font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--white-text); border-bottom: 0; }
	.primary-nav .sub-menu a:hover { color: var(--red); }
	.primary-nav__menu > .menu-item:hover > .sub-menu, .primary-nav__menu > .menu-item:focus-within > .sub-menu, .primary-nav__menu > .menu-item.is-open > .sub-menu { display: block; }
	.primary-nav__drawer-extras { display: none; }

	.masthead__cta { display: none; margin-left: auto; }

	.nav-toggle {
		margin-left: auto;
		width: 44px;
		height: 44px;
		display: grid;
		place-items: center;
		color: var(--white-text);
	}
	.nav-toggle .icon { width: 26px; height: 26px; }
	.nav-toggle__close { display: none; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

	/* ---- Compact on scroll ---- */
	.site-header.is-compact .utility { height: 0; border-bottom-width: 0; overflow: hidden; }
	.utility, .masthead { transition: height 160ms var(--ease); }
	.site-header.is-compact .masthead { height: var(--masthead-h-compact); }
	.site-header.is-compact .logo__word { font-size: clamp(1.8rem, 2.6vw, 2.2rem); }

	/* ---- Mobile drawer ---- */
	.primary-nav.is-open {
		display: block;
		position: fixed;
		inset: calc(var(--utility-h) + var(--masthead-h) + var(--nav-rule)) 0 0 0;
		background: var(--black);
		padding: var(--sp-6) var(--gutter) var(--sp-8);
		overflow-y: auto;
		z-index: 90;
	}
	.site-header.is-compact .primary-nav.is-open { inset-block-start: calc(var(--masthead-h-compact) + var(--nav-rule)); }
	.primary-nav.is-open .primary-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav.is-open .primary-nav__menu > .menu-item { flex-wrap: wrap; justify-content: space-between; border-bottom: var(--bw-hair) solid var(--on-dark-line); }
	.primary-nav.is-open .primary-nav__menu > .menu-item > a { font-size: 1.75rem; font-weight: var(--fw-extra); padding-block: 14px; border-bottom: 0; flex: 1; }
	.primary-nav.is-open .menu-item__toggle { width: 44px; height: 44px; }
	.primary-nav.is-open .menu-item__toggle .icon { width: 22px; height: 22px; transition: transform var(--dur) var(--ease); }
	.primary-nav.is-open .menu-item.is-open .menu-item__toggle .icon { transform: rotate(180deg); }
	.primary-nav.is-open .sub-menu { position: static; display: none; width: 100%; min-width: 0; padding: 0 0 12px 16px; background: transparent; border-top: 0; box-shadow: none; }
	.primary-nav.is-open .menu-item.is-open > .sub-menu { display: block; }
	.primary-nav.is-open .sub-menu a { padding: 8px 0; font-size: 1.0625rem; }
	.primary-nav.is-open .primary-nav__drawer-extras {
		display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-6);
	}
	.primary-nav.is-open .primary-nav__social { display: flex; gap: var(--sp-5); }
	.primary-nav.is-open .primary-nav__social .icon { width: 22px; height: 22px; }
	body.nav-open { overflow: hidden; }

	@media (min-width: 768px) {
		.utility__right { display: flex; }
	}

	@media (min-width: 1024px) {
		.primary-nav { display: block; margin-right: auto; }
		.masthead__cta { display: inline-flex; margin-left: 0; }
		.nav-toggle { display: none; }
		.masthead__inner { gap: var(--sp-7); }
	}
}

@layer components {
	/* ---- Search form (drawer, search page, 404) ---- */
	.searchform { display: flex; gap: 8px; width: 100%; max-width: 560px; }
	.searchform__input { flex: 1; min-width: 0; height: var(--btn-md); padding: 0 14px; font-family: var(--font-display); font-size: var(--fs-body); background: var(--white-card); border: var(--bw-hair) solid var(--gray-line); color: var(--gray-ink); }
	.searchform__input::placeholder { color: var(--gray-meta); }
	.searchform__go { display: grid; place-items: center; width: var(--btn-md); height: var(--btn-md); background: var(--red); color: #fff; }
	.searchform__go .icon { width: 20px; height: 20px; }
	.searchform--dark .searchform__input, .primary-nav .searchform__input { background: var(--black-panel); border-color: var(--on-dark-line); color: var(--white-text); }
	.page-head .searchform { margin-top: var(--sp-2); }
	.page-head .searchform__input { background: var(--black-panel); border-color: var(--on-dark-line); color: var(--white-text); }
	.search-group + .search-group { margin-top: var(--sp-7); }
	.search-results { padding-block: var(--sp-6) var(--sp-9); }
	.notfound { background: var(--black); color: var(--white-text); border-bottom: var(--nav-rule) solid var(--red); }
	.notfound__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-9); }
	.notfound__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(3.5rem, 10vw, 8rem); line-height: 0.88; letter-spacing: var(--ls-tight); text-transform: uppercase; }
	.notfound__text { max-width: 40rem; font-family: var(--font-serif); font-size: var(--fs-body); color: var(--on-dark-muted); }
	.notfound__links { display: flex; flex-wrap: wrap; gap: 8px; }
}