/*
 * HCC theme: tokens, base, layout, header, footer, components, effects.
 * The engine's screens are styled in engine.css. Class vocabulary: README.md.
 *
 * Color roles (identity/out/tokens.json, PLAN "The look: Ink and Gold"):
 *   ink: headings and the seal ground; seal gold: the mark, the seal and the cursor;
 *   paper: the page; deep gold: links and accents; record green: verified states only.
 * Every text pair below clears WCAG 2.2 AA (4.5:1) in both color schemes.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	--hcc-paper: #FAF9F6;
	--hcc-surface: #FFFFFF;
	--hcc-ink: #16140F;
	--hcc-muted: #5F5A50;
	--hcc-rule: #E2DDD1;
	--hcc-rule-strong: #CFC8B8;
	--hcc-chip: #F1EDE3;
	--hcc-gold: #7A5D24;            /* deep gold: links, accents. #8A6A2C fell to 4.0:1 over the gold mesh (a11y audit 2026-10-19) */
	--hcc-gold-strong: #7A5D24;     /* deep gold text on chips and soft gold */
	--hcc-gold-soft: #EFE3C8;
	--hcc-seal-gold: #C9A35F;       /* the mark only, and decoration */
	--hcc-seal-ink: #16140F;
	--hcc-green: #2D6A4E;           /* verified states only */
	--hcc-green-soft: #E1EFE7;
	--hcc-off: #8F8A80;             /* not current (decoration, never body text) */
	--hcc-critical: #A4471F;
	--hcc-critical-soft: #F6E4DB;
	--hcc-field-border: #8A8375;
	--hcc-focus: #8A6A2C;
	--hcc-btn-bg: #16140F;
	--hcc-btn-bg-hover: #2B271E;
	--hcc-btn-fg: #C9A35F;
	--hcc-band-bg: #16140F;         /* ink bands: hero, CTA, footer */
	--hcc-band-fg: #EDE9E0;
	--hcc-band-muted: #BDB6A7;
	--hcc-band-rule: #3A352C;
	--hcc-header-bg: rgba(250, 249, 246, 0.94);
	--hcc-shadow: 0 1px 2px rgba(22, 20, 15, 0.05), 0 8px 24px rgba(22, 20, 15, 0.06);
	--hcc-mesh-a: rgba(201, 163, 95, 0.13);
	--hcc-mesh-b: rgba(22, 20, 15, 0.05);
	--hcc-mesh-c: rgba(138, 106, 44, 0.08);

	--hcc-display: Marcellus, "Trajan Pro", Georgia, serif;
	--hcc-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
	--hcc-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--hcc-step--1: 0.875rem;
	--hcc-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--hcc-step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
	--hcc-step-2: clamp(1.3125rem, 1.24rem + 0.35vw, 1.5rem);
	--hcc-step-3: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
	--hcc-step-4: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
	--hcc-step-5: clamp(2.75rem, 1.95rem + 4vw, 4.75rem);

	--hcc-content: 720px;
	--hcc-wide: 1180px;
	--hcc-gutter: clamp(1rem, 4vw, 2rem);
	--hcc-space-section: clamp(3rem, 2.2rem + 4vw, 6rem);
	--hcc-radius: 6px;
	--hcc-radius-sm: 4px;
	--hcc-header-h: 72px;
	--hcc-admin-h: var(--wp-admin--admin-bar--height, 0px);
	--hcc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	color-scheme: light;
}

@media (max-width: 781px) {
	:root {
		--hcc-header-h: 64px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--hcc-paper: #121110;
		--hcc-surface: #1A1916;
		--hcc-ink: #EDE9E0;
		--hcc-muted: #A49E91;
		--hcc-rule: #2F2C26;
		--hcc-rule-strong: #47423A;
		--hcc-chip: #24221D;
		--hcc-gold: #D6B470;
		--hcc-gold-strong: #D6B470;
		--hcc-gold-soft: #3A3121;
		--hcc-green: #78C69D;
		--hcc-green-soft: #1D3328;
		--hcc-off: #77726A;
		--hcc-critical: #EE9670;
		--hcc-critical-soft: #3D241B;
		--hcc-field-border: #827C71;
		--hcc-focus: #D6B470;
		--hcc-btn-bg: #D6B470;
		--hcc-btn-bg-hover: #E2C584;
		--hcc-btn-fg: #16140F;
		--hcc-band-bg: #1C1A16;
		--hcc-band-fg: #EDE9E0;
		--hcc-band-muted: #A49E91;
		--hcc-band-rule: #3A352C;
		--hcc-header-bg: rgba(18, 17, 16, 0.92);
		--hcc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
		--hcc-mesh-a: rgba(214, 180, 112, 0.09);
		--hcc-mesh-b: rgba(0, 0, 0, 0.35);
		--hcc-mesh-c: rgba(214, 180, 112, 0.05);
		color-scheme: dark;
	}

	/* theme.json's presets follow the scheme too, for any core block that uses them. */
	html:root {
		--wp--preset--color--ink: #EDE9E0;
		--wp--preset--color--paper: #121110;
		--wp--preset--color--surface: #1A1916;
		--wp--preset--color--deep-gold: #D6B470;
		--wp--preset--color--record-green: #78C69D;
		--wp--preset--color--muted: #A49E91;
		--wp--preset--color--rule: #2F2C26;
		--wp--preset--color--chip: #24221D;
		--wp--preset--color--off: #77726A;
	}
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--hcc-header-h) + var(--hcc-admin-h) + 1rem);
}

body {
	margin: 0;
	background-color: var(--hcc-paper);
	color: var(--hcc-ink);
	font-family: var(--hcc-body);
	font-size: var(--hcc-step-0);
	line-height: 1.6;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	/* The ambient mesh: very soft ink and gold, behind everything. */
	background-image:
		radial-gradient(42% 38% at 12% 8%, var(--hcc-mesh-a), transparent 70%),
		radial-gradient(38% 42% at 88% 22%, var(--hcc-mesh-b), transparent 70%),
		radial-gradient(46% 40% at 70% 92%, var(--hcc-mesh-c), transparent 72%);
	background-size: 180% 180%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	animation: hcc-mesh 64s ease-in-out infinite alternate;
}

@keyframes hcc-mesh {
	0% { background-position: 0% 0%; }
	50% { background-position: 60% 40%; }
	100% { background-position: 100% 100%; }
}

@media (max-width: 781px) {
	body {
		background-attachment: scroll;
		background-size: 220% 220%;
	}
}

[hidden] {
	display: none !important;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--hcc-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
	color: var(--hcc-ink);
	text-decoration-color: var(--hcc-seal-gold);
}

:focus-visible {
	outline: 2px solid var(--hcc-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--hcc-gold-soft);
	color: var(--hcc-ink);
}

h1,
h2,
h3,
h4 {
	font-family: var(--hcc-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: var(--hcc-ink);
	text-wrap: balance;
	margin: 0 0 0.5em;
}

h1 { font-size: var(--hcc-step-4); }
h2 { font-size: var(--hcc-step-3); }
h3 { font-size: var(--hcc-step-2); line-height: 1.25; }
h4 {
	font-family: var(--hcc-body);
	font-size: var(--hcc-step-0);
	font-weight: 700;
	letter-spacing: 0;
}

p,
ul,
ol,
dl,
blockquote,
figure,
table,
pre {
	margin: 0 0 1em;
}

ul,
ol {
	padding-left: 1.3em;
}

li + li {
	margin-top: 0.35em;
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--hcc-step--1);
}

hr {
	border: 0;
	border-top: 1px solid var(--hcc-rule);
	margin: 2.5rem 0;
}

code,
kbd,
samp {
	font-family: var(--hcc-mono);
	font-size: 0.92em;
}

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

/* Tables: a public-record table (plan look). */
.hcc-main table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
}

.hcc-main th,
.hcc-main td {
	text-align: left;
	vertical-align: top;
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-main thead th {
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--hcc-muted);
	background: var(--hcc-chip);
}

.hcc-main tbody tr:last-child > * {
	border-bottom: 0;
}

/* Forms. */
input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

.hcc-main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea),
.hcc-search :where(input[type="search"]) {
	background: var(--hcc-surface);
	color: var(--hcc-ink);
	border: 1px solid var(--hcc-field-border);
	border-radius: var(--hcc-radius-sm);
	padding: 0.6rem 0.75rem;
	min-height: 2.875rem;
	line-height: 1.4;
	max-width: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hcc-main :where(textarea) {
	min-height: 7rem;
	resize: vertical;
}

/* Safari ignores padding and borders on a native select; draw our own chevron. */
.hcc-main :where(select) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.4rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--hcc-muted) 50%),
		linear-gradient(135deg, var(--hcc-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
	background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
	background-repeat: no-repeat;
}

.hcc-main :where(select[multiple]) {
	padding-right: 0.75rem;
	background-image: none;
}

.hcc-main input:focus-visible,
.hcc-main select:focus-visible,
.hcc-main textarea:focus-visible,
.hcc-search input:focus-visible,
/* Safari never matches :focus-visible on a date or time field, and Chrome's calendar button inside
   one matches only :focus-within, so these show the ring on any focus inside the field. */
.hcc-main input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus-within {
	outline: 2px solid var(--hcc-focus);
	outline-offset: 1px;
	border-color: var(--hcc-focus);
}

.hcc-main label {
	font-weight: 600;
	font-size: 0.95em;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--hcc-gold);
	width: 1.1rem;
	height: 1.1rem;
	vertical-align: -0.15em;
	margin: 0 0.45rem 0 0;
}

::placeholder {
	color: var(--hcc-muted);
	opacity: 0.85;
}

/* Visually hidden, still read aloud. */
.hcc-sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hcc-skip {
	position: fixed;
	top: calc(var(--hcc-admin-h) + 0.5rem);
	left: 0.5rem;
	z-index: 1000;
	padding: 0.7rem 1rem;
	background: var(--hcc-btn-bg);
	color: var(--hcc-btn-fg);
	font-weight: 600;
	border-radius: var(--hcc-radius-sm);
	transform: translateY(-200%);
	transition: transform 0.2s ease;
}

.hcc-skip:focus,
.hcc-skip:focus-visible {
	transform: none;
	color: var(--hcc-btn-fg);
}

/* ------------------------------------------------------------------ layout */

/*
 * The ONE mechanism that clears the fixed header (house rule: never stack paddings).
 * The admin bar shifts <html> by its own margin, so this value never adds it again.
 */
.wp-site-blocks {
	padding-top: var(--hcc-header-h);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > * {
	margin-block: 0;
}

/* Go-live status line under the header (first_check gate in tools/gates.json). It sits in
 * normal flow right after the fixed bar, so .wp-site-blocks padding-top still clears the bar
 * and nothing else needs to change. Ink on chip passes 4.5:1 in both schemes. */
.hcc-status {
	background: var(--hcc-chip);
	border-bottom: 1px solid var(--hcc-rule);
	color: var(--hcc-ink);
}

.hcc-status__text {
	margin-block: 0;
	padding-block: 0.6rem;
	font-size: 0.875rem;
	line-height: 1.45;
}

.hcc-main {
	flex: 1 0 auto;
	margin: 0;
	padding: 0;
	outline: none;
}

.hcc-wrap {
	width: 100%;
	max-width: calc(var(--hcc-wide) + 2 * var(--hcc-gutter));
	margin-inline: auto;
	padding-inline: var(--hcc-gutter);
}

.hcc-wrap--narrow {
	max-width: calc(var(--hcc-content) + 2 * var(--hcc-gutter));
}

.hcc-wrap--mid {
	max-width: calc(940px + 2 * var(--hcc-gutter));
}

/* The page body (core/post-content). Both templates: no automatic title; the page's own markup carries its one h1. */
.hcc-page > * {
	margin-block: 0;
}

/* Canvas (page-wide, front page): sections run edge to edge; stray plain elements still get a reading column. */
.hcc-page--canvas > :where(p, h2, h3, h4, ul, ol, dl, table, blockquote, figure, form, details, hr) {
	max-width: var(--hcc-content);
	margin-inline: auto;
	padding-inline: var(--hcc-gutter);
}

/* Reading (default page template): one 720px column; bands break out to full width. */
.hcc-page--reading {
	padding-inline: var(--hcc-gutter);
	padding-top: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	padding-bottom: var(--hcc-space-section);
}

/* A page that opens with its own head or band starts flush under the header. */
.hcc-page.hcc-page--reading > :is(.hcc-hero, .hcc-section, .hcc-page-head, .hcc-bleed):first-child {
	margin-top: calc(-1 * clamp(2rem, 1.5rem + 2.5vw, 3.5rem));
}

/* Doubled class: the column wins over any component's own margin shorthand. */
.hcc-page.hcc-page--reading > * {
	max-width: var(--hcc-content);
	margin-inline: auto;
}

.hcc-page.hcc-page--reading > * + * {
	margin-top: 1.1em;
}

.hcc-page.hcc-page--reading > :is(.hcc-hero, .hcc-section, .hcc-cta, .hcc-bleed) {
	max-width: none;
	margin-inline: calc(-1 * var(--hcc-gutter));
}

/* Components get more room than paragraphs in the reading column. */
.hcc-page.hcc-page--reading > * + :is(.hcc-grid, .hcc-steps, .hcc-table-wrap, .hcc-sheet, .hcc-callout, .hcc-faq, .hcc-split, .hcc-stats, .hcc-toc, .hcc-figure, .hcc-quote, .hcc-seals),
.hcc-page.hcc-page--reading > :is(.hcc-grid, .hcc-steps, .hcc-table-wrap, .hcc-sheet, .hcc-callout, .hcc-faq, .hcc-split, .hcc-stats, .hcc-toc, .hcc-figure, .hcc-quote, .hcc-seals) + * {
	margin-top: 2rem;
}

/* Inside the 720px column a grid never runs wider than two across. */
@media (min-width: 640px) {
	.hcc-page--reading > .hcc-grid:is(.hcc-grid--3, .hcc-grid--4) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hcc-page.hcc-page--reading > .hcc-hero + *,
.hcc-page.hcc-page--reading > .hcc-page-head + *,
.hcc-page.hcc-page--reading > :is(.hcc-hero, .hcc-section, .hcc-cta) + :is(.hcc-section, .hcc-cta) {
	margin-top: 0;
}

.hcc-page.hcc-page--reading > :last-child:is(.hcc-cta, .hcc-section) {
	margin-bottom: calc(-1 * var(--hcc-space-section));
}

.hcc-bleed {
	width: auto;
}

/* Sections. */
.hcc-section {
	position: relative;
	padding-block: var(--hcc-space-section);
}

.hcc-section--tight {
	padding-block: calc(var(--hcc-space-section) * 0.55);
}

.hcc-section--flush-top {
	padding-top: 0;
}

.hcc-section--tint {
	background: color-mix(in srgb, var(--hcc-chip) 70%, transparent);
	border-block: 1px solid var(--hcc-rule);
}

.hcc-section--rule {
	border-top: 1px solid var(--hcc-rule);
}

.hcc-section--surface {
	background: var(--hcc-surface);
	border-block: 1px solid var(--hcc-rule);
}

.hcc-section--ink,
.hcc-hero--ink,
.hcc-cta {
	background: var(--hcc-band-bg);
	color: var(--hcc-band-fg);
	--hcc-ink: var(--hcc-band-fg);
	--hcc-muted: var(--hcc-band-muted);
	--hcc-rule: var(--hcc-band-rule);
	--hcc-gold: #D6B470;
	--hcc-gold-strong: #D6B470;
	--hcc-focus: #C9A35F;
	--hcc-surface: #1F1D18;
	--hcc-chip: #2A2720;
	--hcc-gold-soft: #3A3121;
	--hcc-green: #78C69D;
	--hcc-green-soft: #1D3328;
	--hcc-btn-bg: #C9A35F;
	--hcc-btn-bg-hover: #D9B977;
	--hcc-btn-fg: #16140F;
	--hcc-field-border: #827C71;
	color-scheme: dark;
}

.hcc-section__head {
	max-width: var(--hcc-content);
	margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}

.hcc-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.hcc-section__head > :last-child {
	margin-bottom: 0;
}

.hcc-section__sub {
	color: var(--hcc-muted);
	font-size: var(--hcc-step-1);
	line-height: 1.5;
}

/* Text helpers. */
.hcc-eyebrow {
	display: block;
	font-family: var(--hcc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcc-gold-strong);
	margin: 0 0 0.9rem;
}

.hcc-lede {
	font-size: var(--hcc-step-1);
	line-height: 1.55;
	color: var(--hcc-ink);
	max-width: 40em;
}

.hcc-muted { color: var(--hcc-muted); }
.hcc-small { font-size: var(--hcc-step--1); }
.hcc-center { text-align: center; }

.hcc-mono,
.hcc-record-no,
.hcc-date {
	font-family: var(--hcc-mono);
	font-size: 0.92em;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.hcc-record-no {
	white-space: nowrap;
}

.hcc-display {
	font-family: var(--hcc-display);
	font-size: var(--hcc-step-5);
	line-height: 1.05;
	letter-spacing: 0;
}

.hcc-prose {
	max-width: var(--hcc-content);
}

.hcc-prose > * + * {
	margin-top: 1em;
}

.hcc-prose > :is(h2, h3) {
	margin-top: 2em;
}

.hcc-prose > :is(h2, h3):first-child {
	margin-top: 0;
}

.hcc-prose p,
.hcc-prose li {
	text-wrap: pretty;
}

.hcc-page--reading > :is(h2, h3) {
	margin-top: 2.2em;
}

.hcc-page--reading > :is(h2, h3) + * {
	margin-top: 0.5em;
}

/* ------------------------------------------------------------------ header */

.hcc-progress {
	position: fixed;
	top: var(--hcc-admin-h);
	left: 0;
	right: 0;
	height: 3px;
	z-index: 102;
	pointer-events: none;
}

.hcc-progress__bar {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, #8A6A2C, #C9A35F 55%, #E2C584);
	transition: transform 0.08s linear;
}

.hcc-header {
	position: fixed;
	top: var(--hcc-admin-h);
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: 0;
	border-radius: 0;
	background: var(--hcc-header-bg);
	-webkit-backdrop-filter: saturate(1.2) blur(10px);
	backdrop-filter: saturate(1.2) blur(10px);
	border-bottom: 1px solid var(--hcc-rule);
	opacity: 1;
	transition: opacity 0.38s ease, box-shadow 0.3s ease;
}

.hcc-header.is-scrolled {
	box-shadow: 0 6px 18px rgba(22, 20, 15, 0.06);
}

.hcc-header.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.hcc-header__bar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	height: calc(var(--hcc-header-h) - 1px);
	max-width: calc(var(--hcc-wide) + 2 * var(--hcc-gutter));
	margin-inline: auto;
	padding-inline: var(--hcc-gutter);
}

.hcc-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--hcc-ink);
	text-decoration: none;
	flex: none;
	min-width: 0;
}

.hcc-brand:hover {
	color: var(--hcc-ink);
}

.hcc-brand__mark {
	display: block;
	width: 40px;
	height: 40px;
	flex: none;
}

.hcc-brand__name {
	font-family: var(--hcc-display);
	font-size: 1.15rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

.hcc-nav {
	margin-left: auto;
}

.hcc-nav__list {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcc-nav__list li {
	margin: 0;
}

.hcc-nav__link {
	position: relative;
	display: block;
	padding: 0.55rem 0.7rem;
	color: var(--hcc-ink);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--hcc-radius-sm);
}

.hcc-nav__link::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.25rem;
	height: 1px;
	background: var(--hcc-seal-gold);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.25s var(--hcc-ease);
}

.hcc-nav__link:hover {
	color: var(--hcc-ink);
}

.hcc-nav__link:hover::after,
.hcc-nav__link.is-current::after {
	transform: scaleX(1);
}

.hcc-nav__link.is-current {
	color: var(--hcc-gold-strong);
}

.hcc-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
}

.hcc-header__menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hcc-rule-strong);
	border-radius: var(--hcc-radius-sm);
	background: transparent;
	color: var(--hcc-ink);
	cursor: pointer;
}

.hcc-header__menu .hcc-icon--close,
.hcc-header__menu[aria-expanded="true"] .hcc-icon--menu {
	display: none;
}

.hcc-header__menu[aria-expanded="true"] .hcc-icon--close {
	display: block;
}

.hcc-drawer {
	position: fixed;
	top: calc(var(--hcc-header-h) + var(--hcc-admin-h));
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--hcc-paper);
	border-top: 1px solid var(--hcc-rule);
}

.hcc-drawer[hidden] {
	display: none;
}

.hcc-drawer__inner {
	display: grid;
	gap: 1.5rem;
	padding: 1.25rem var(--hcc-gutter) 2.5rem;
	max-width: 640px;
	margin-inline: auto;
}

.hcc-drawer__list,
.hcc-drawer__more {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcc-drawer__list li + li,
.hcc-drawer__more li + li {
	margin-top: 0;
}

.hcc-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0.25rem;
	border-bottom: 1px solid var(--hcc-rule);
	color: var(--hcc-ink);
	font-family: var(--hcc-display);
	font-size: 1.45rem;
	text-decoration: none;
}

.hcc-drawer__link .hcc-icon {
	color: var(--hcc-gold);
	flex: none;
}

.hcc-drawer__link.is-current {
	color: var(--hcc-gold-strong);
}

.hcc-drawer__more {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.hcc-drawer__more a {
	color: var(--hcc-muted);
	font-size: 0.95rem;
}

html.hcc-drawer-open,
html.hcc-drawer-open body {
	overflow: hidden;
}

/*
 * The drawer sits inside the fixed header. A backdrop-filter makes the header the
 * containing block of its fixed children (spec behavior in WebKit and Chromium), which
 * collapsed the open drawer to 1px high under the bar. The header is opaque paper while
 * the drawer is open, so the blur goes away and the drawer measures from the viewport.
 */
html.hcc-drawer-open .hcc-header {
	opacity: 1;
	pointer-events: auto;
	background: var(--hcc-paper);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media (max-width: 1179px) {
	.hcc-nav {
		display: none;
	}

	.hcc-header__menu {
		display: inline-flex;
	}

	.hcc-header__actions {
		margin-left: auto;
	}
}

@media (min-width: 1180px) {
	.hcc-drawer {
		display: none !important;
	}
}

@media (max-width: 599px) {
	.hcc-header__bar {
		gap: 0.6rem;
	}

	.hcc-brand {
		gap: 0.55rem;
	}

	.hcc-brand__mark {
		width: 34px;
		height: 34px;
	}

	.hcc-brand__name {
		font-size: 0.95rem;
		max-width: 8.5em;
	}

	.hcc-header__cta {
		padding-inline: 0.8rem;
		font-size: 0.85rem;
	}

	/* The admin bar scrolls away on phones; pin it so the fixed header sits below it. */
	#wpadminbar {
		position: fixed !important;
	}
}

@media (max-width: 359px) {
	.hcc-header__cta {
		display: none;
	}
}

/* ------------------------------------------------------------------ footer */

.hcc-footer {
	margin-top: 0;
	background: var(--hcc-band-bg);
	color: var(--hcc-band-fg);
	border-top: 2px solid var(--hcc-seal-gold);
	--hcc-focus: #C9A35F;
	color-scheme: dark;
}

.hcc-footer a {
	color: var(--hcc-band-fg);
	text-decoration: none;
}

.hcc-footer a:hover {
	color: #E2C584;
	text-decoration: underline;
	text-decoration-color: var(--hcc-seal-gold);
}

.hcc-footer__top {
	display: grid;
	gap: 2.5rem;
	padding-block: clamp(3rem, 2.4rem + 3vw, 4.5rem) 2.5rem;
}

@media (min-width: 900px) {
	.hcc-footer__top {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 4rem;
	}
}

.hcc-brand--footer {
	color: var(--hcc-band-fg);
}

.hcc-brand--footer .hcc-brand__mark {
	width: 48px;
	height: 48px;
}

.hcc-brand--footer .hcc-brand__name {
	font-size: 1.35rem;
	max-width: none;
}

.hcc-footer__tagline {
	margin: 1.25rem 0 0.75rem;
	max-width: 30em;
	font-family: var(--hcc-display);
	font-size: 1.2rem;
	line-height: 1.4;
	color: #E2C584;
}

.hcc-footer__scope {
	max-width: 32em;
	font-size: 0.9rem;
	color: var(--hcc-band-muted);
	margin: 0;
}

.hcc-footer__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	gap: 2rem 1.5rem;
}

.hcc-footer__h {
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #C9A35F;
	margin: 0 0 0.9rem;
}

.hcc-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcc-footer__col li + li {
	margin-top: 0.55rem;
}

.hcc-footer__link {
	font-size: 0.95rem;
}

.hcc-footer__link.is-current {
	color: #E2C584;
}

.hcc-footer__legal {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1.25rem 1.75rem;
	font-size: 0.85rem;
	color: var(--hcc-band-muted);
}

.hcc-footer__legal::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--hcc-gutter);
	right: var(--hcc-gutter);
	border-top: 1px solid var(--hcc-band-rule);
}

.hcc-footer__legal p {
	margin: 0;
}

.hcc-footer__legal a {
	color: var(--hcc-band-muted);
}

/* ------------------------------------------------------------------ buttons */

.hcc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.hcc-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 2.875rem;
	padding: 0.7rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--hcc-radius-sm);
	font-family: var(--hcc-body);
	font-size: 0.975rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.35s var(--hcc-ease);
}

.hcc-btn:hover {
	text-decoration: none;
}

.hcc-btn--primary {
	background: var(--hcc-btn-bg);
	color: var(--hcc-btn-fg);
}

.hcc-btn--primary:hover {
	background: var(--hcc-btn-bg-hover);
	color: var(--hcc-btn-fg);
}

.hcc-btn--gold {
	background: #C9A35F;
	color: #16140F;
}

.hcc-btn--gold:hover {
	background: #D9B977;
	color: #16140F;
}

.hcc-btn--ghost {
	background: transparent;
	color: var(--hcc-ink);
	border-color: var(--hcc-rule-strong);
}

.hcc-btn--ghost:hover {
	color: var(--hcc-ink);
	border-color: var(--hcc-seal-gold);
	background: color-mix(in srgb, var(--hcc-seal-gold) 10%, transparent);
}

.hcc-btn--sm {
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
}

.hcc-btn--block {
	display: flex;
	width: 100%;
}

.hcc-btn .hcc-icon {
	width: 1.1em;
	height: 1.1em;
}

.hcc-link-arrow {
	font-weight: 600;
	text-decoration: none;
}

.hcc-link-arrow::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.4em;
	transition: transform 0.25s var(--hcc-ease);
}

.hcc-link-arrow:hover::after {
	transform: translateX(3px);
}

/* ------------------------------------------------------------------ hero */

.hcc-hero {
	position: relative;
	padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem) clamp(3rem, 2.2rem + 4vw, 5.5rem);
	overflow: clip;
}

.hcc-hero__inner {
	position: relative;
}

.hcc-hero__title {
	font-size: var(--hcc-step-5);
	line-height: 1.04;
	margin-bottom: 0.4em;
	max-width: 14em;
}

.hcc-hero__title em {
	font-style: normal;
	color: var(--hcc-gold);
}

.hcc-hero .hcc-lede {
	max-width: 36em;
}

.hcc-hero--ink .hcc-hero__title em {
	color: #C9A35F;
}

.hcc-hero--split .hcc-hero__inner {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.hcc-hero--split .hcc-hero__inner {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	}
}

.hcc-hero__aside {
	justify-self: center;
	width: 100%;
	max-width: 360px;
}

.hcc-hero--plain,
.hcc-page-head {
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

.hcc-hero--plain .hcc-hero__title,
.hcc-page-head h1 {
	font-size: var(--hcc-step-4);
	max-width: 18em;
}

.hcc-page-head {
	border-bottom: 1px solid var(--hcc-rule);
	margin-bottom: 2.25rem;
}

.hcc-page-head .hcc-lede {
	color: var(--hcc-muted);
}

.hcc-updated {
	font-family: var(--hcc-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--hcc-muted);
}

/* ------------------------------------------------------------------ crumbs */

.hcc-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	font-family: var(--hcc-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--hcc-muted);
}

.hcc-crumbs li {
	margin: 0;
}

.hcc-crumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--hcc-rule-strong);
}

.hcc-crumbs a {
	color: var(--hcc-muted);
}

/* ------------------------------------------------------------------ two columns */

.hcc-split {
	display: grid;
	gap: clamp(2rem, 1.2rem + 3vw, 4rem);
	align-items: start;
}

@media (min-width: 900px) {
	.hcc-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.hcc-split--wide-left {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.hcc-split--wide-right {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.hcc-split--reverse > :first-child {
		order: 2;
	}

	.hcc-split--center {
		align-items: center;
	}

	.hcc-split__aside--sticky {
		position: sticky;
		top: calc(var(--hcc-header-h) + var(--hcc-admin-h) + 1.5rem);
	}
}

.hcc-split > * {
	min-width: 0;
}

.hcc-split > * > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ cards and grids */

.hcc-grid {
	display: grid;
	gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	padding: 0;
	margin: 0;
}

.hcc-grid > li {
	margin: 0;
}

@media (min-width: 640px) {
	.hcc-grid--2,
	.hcc-grid--3,
	.hcc-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.hcc-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

.hcc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	box-shadow: 0 1px 0 rgba(22, 20, 15, 0.02);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.35s var(--hcc-ease);
}

.hcc-card > * {
	margin: 0;
}

.hcc-card__eyebrow {
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hcc-gold-strong);
}

.hcc-card__title {
	font-family: var(--hcc-display);
	font-size: var(--hcc-step-2);
	line-height: 1.2;
}

.hcc-card__body {
	color: var(--hcc-ink);
}

.hcc-card__meta {
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: var(--hcc-step--1);
	color: var(--hcc-muted);
	border-top: 1px solid var(--hcc-rule);
}

.hcc-card__more {
	margin-top: auto;
	font-weight: 600;
}

.hcc-card--quiet {
	background: transparent;
	box-shadow: none;
}

.hcc-card--accent {
	border-top: 3px solid var(--hcc-seal-gold);
}

/* A whole-card link: put .hcc-card__link on the one <a> inside (usually in the title). */
.hcc-card--link .hcc-card__link {
	color: inherit;
	text-decoration: none;
}

.hcc-card--link .hcc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.hcc-card--link:hover {
	border-color: var(--hcc-seal-gold);
	box-shadow: var(--hcc-shadow);
	transform: translateY(-2px);
}

.hcc-card--link:focus-within {
	outline: 2px solid var(--hcc-focus);
	outline-offset: 3px;
}

.hcc-card--link .hcc-card__link:focus-visible {
	outline: none;
}

/* A level card: a seal image above the level's name. */
.hcc-card--level {
	align-items: flex-start;
}

.hcc-card--level .hcc-card__seal {
	width: 112px;
	height: 112px;
	margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ steps */

.hcc-steps {
	counter-reset: hcc-step;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.hcc-step {
	counter-increment: hcc-step;
	position: relative;
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0 1.25rem;
	padding-bottom: 2rem;
	margin: 0;
}

.hcc-step::before {
	content: counter(hcc-step, decimal-leading-zero);
	grid-row: 1 / span 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid var(--hcc-seal-gold);
	border-radius: 50%;
	background: var(--hcc-surface);
	font-family: var(--hcc-mono);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--hcc-gold-strong);
	position: relative;
	z-index: 1;
}

.hcc-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.625rem - 0.5px);
	top: 3.25rem;
	bottom: 0;
	width: 1px;
	background: var(--hcc-rule-strong);
}

.hcc-step + .hcc-step {
	margin-top: 0;
}

.hcc-step__title {
	font-family: var(--hcc-display);
	font-size: var(--hcc-step-2);
	margin: 0.6rem 0 0.35rem;
}

.hcc-step > p,
.hcc-step > ul {
	grid-column: 2;
	margin: 0 0 0.5rem;
}

.hcc-step__title {
	grid-column: 2;
}

.hcc-step__meta {
	grid-column: 2;
	font-family: var(--hcc-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--hcc-muted);
}

@media (min-width: 960px) {
	.hcc-steps--row {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.hcc-steps--row .hcc-step {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 0;
	}

	.hcc-steps--row .hcc-step::before {
		grid-row: auto;
		margin-bottom: 0.5rem;
	}

	.hcc-steps--row .hcc-step:not(:last-child)::after {
		left: 3.25rem;
		right: -1.5rem;
		top: 1.625rem;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.hcc-steps--row .hcc-step > *,
	.hcc-steps--row .hcc-step__title {
		grid-column: 1;
	}
}

/* ------------------------------------------------------------------ facts table, sheet, chips */

.hcc-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.5rem;
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	-webkit-overflow-scrolling: touch;
}

.hcc-table-wrap > table {
	margin: 0;
}

.hcc-facts-table th[scope="row"] {
	font-weight: 600;
	width: 32%;
}

.hcc-facts-table--wide {
	min-width: 640px;
}

/*
 * A wide table that stacks on phones instead of scrolling sideways: each row becomes a
 * block and each cell shows its column name from data-label (the first cell, the row's
 * name, shows none). Scrolling cut the cells mid-word at 390px with no cue to scroll.
 */
@media (max-width: 599px) {
	.hcc-table-wrap--stack {
		overflow-x: visible;
	}

	.hcc-facts-table--stack {
		min-width: 0;
	}

	.hcc-facts-table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hcc-facts-table--stack,
	.hcc-facts-table--stack tbody,
	.hcc-facts-table--stack tr,
	.hcc-facts-table--stack td {
		display: block;
		width: auto;
	}

	.hcc-main .hcc-facts-table--stack tr {
		padding: 0.85rem 1rem;
		border-bottom: 1px solid var(--hcc-rule);
	}

	.hcc-main .hcc-facts-table--stack tbody tr:last-child {
		border-bottom: 0;
	}

	.hcc-main .hcc-facts-table--stack td {
		padding: 0;
		border: 0;
	}

	.hcc-main .hcc-facts-table--stack td + td {
		margin-top: 0.6rem;
	}

	.hcc-facts-table--stack td:first-child {
		font-family: var(--hcc-display);
		font-size: var(--hcc-step-1);
	}

	.hcc-facts-table--stack td:first-child strong {
		font-weight: 400;
	}

	.hcc-facts-table--stack td + td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.15rem;
		font-family: var(--hcc-mono);
		font-size: 0.7rem;
		font-weight: 500;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--hcc-muted);
	}
}

.hcc-facts-table td.hcc-num,
.hcc-facts-table th.hcc-num {
	text-align: right;
	white-space: nowrap;
	font-family: var(--hcc-mono);
}

.hcc-sheet {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 1rem 1.75rem;
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
}

.hcc-sheet > div {
	min-width: 0;
}

.hcc-sheet dt {
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hcc-muted);
}

.hcc-sheet dd {
	margin: 0.2rem 0 0;
}

.hcc-chip {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 4px;
	font-family: var(--hcc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.6;
	white-space: nowrap;
	background: var(--hcc-chip);
	color: var(--hcc-muted);
	vertical-align: 0.1em;
}

.hcc-chip--seen,
.hcc-chip--verified,
.hcc-chip--green {
	background: var(--hcc-green-soft);
	color: var(--hcc-green);
}

.hcc-chip--observed,
.hcc-chip--gold {
	background: var(--hcc-gold-soft);
	color: var(--hcc-gold-strong);
}

.hcc-chip--stated {
	background: var(--hcc-chip);
	color: var(--hcc-muted);
}

.hcc-chip--off {
	background: var(--hcc-chip);
	color: var(--hcc-muted);
	border: 1px dashed var(--hcc-off);
}

.hcc-chip--critical {
	background: var(--hcc-critical-soft);
	color: var(--hcc-critical);
}

/* ------------------------------------------------------------------ callouts, lists */

.hcc-callout {
	position: relative;
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.35rem 1.1rem 1.5rem;
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-left: 3px solid var(--hcc-seal-gold);
	border-radius: var(--hcc-radius);
}

.hcc-callout > :last-child {
	margin-bottom: 0;
}

.hcc-callout__title {
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.hcc-callout--note {
	border-left-color: var(--hcc-rule-strong);
	background: var(--hcc-chip);
}

.hcc-callout--green {
	border-left-color: var(--hcc-green);
	background: var(--hcc-green-soft);
}

.hcc-callout--warn {
	border-left-color: var(--hcc-critical);
	background: var(--hcc-critical-soft);
}

/* Links on a tinted callout take the deeper gold. The light link gold is now that same
 * deeper gold; this keeps any later change to --hcc-gold from dropping these below 4.5:1. */
.hcc-callout--note,
.hcc-callout--green,
.hcc-callout--warn {
	--hcc-gold: var(--hcc-gold-strong);
}

.hcc-callout--ink {
	background: var(--hcc-band-bg);
	color: var(--hcc-band-fg);
	border-color: var(--hcc-band-rule);
	border-left-color: #C9A35F;
	--hcc-gold: #D6B470;
	--hcc-ink: var(--hcc-band-fg);
	/* Muted text (".hcc-small", captions) on the ink box: the paper muted is 2.7:1 here. */
	--hcc-muted: var(--hcc-band-muted);
}

.hcc-list {
	list-style: none;
	padding: 0;
}

.hcc-list > li {
	position: relative;
	padding-left: 1.35rem;
}

.hcc-list > li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.62em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	border: 1px solid var(--hcc-seal-gold);
	background: color-mix(in srgb, var(--hcc-seal-gold) 35%, transparent);
}

/* Does / does not lists (what the seal means). */
.hcc-does,
.hcc-doesnt {
	list-style: none;
	padding: 0;
}

.hcc-does > li,
.hcc-doesnt > li {
	position: relative;
	padding-left: 1.9rem;
}

.hcc-does > li::before,
.hcc-doesnt > li::before {
	position: absolute;
	left: 0;
	top: 0.15em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.hcc-does > li::before {
	content: "\2713";
	background: var(--hcc-green-soft);
	color: var(--hcc-green);
}

.hcc-doesnt > li::before {
	content: "\00D7";
	background: var(--hcc-chip);
	color: var(--hcc-muted);
	font-size: 0.95rem;
}

/* Big numbers. */
.hcc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.hcc-stats > li {
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--hcc-seal-gold);
}

.hcc-stat__value {
	display: block;
	font-family: var(--hcc-display);
	font-size: var(--hcc-step-4);
	line-height: 1.1;
	color: var(--hcc-ink);
}

.hcc-stat__label {
	display: block;
	font-size: var(--hcc-step--1);
	color: var(--hcc-muted);
}

/* Quotes. */
.hcc-quote {
	margin: 0 0 1.5rem;
	padding: 0 0 0 1.25rem;
	border-left: 2px solid var(--hcc-seal-gold);
	font-family: var(--hcc-display);
	font-size: var(--hcc-step-2);
	line-height: 1.4;
}

.hcc-quote > :last-child {
	margin-bottom: 0;
}

.hcc-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--hcc-body);
	font-size: var(--hcc-step--1);
	font-style: normal;
	color: var(--hcc-muted);
}

/* Figures and seal images. */
.hcc-figure {
	margin: 0 0 1.5rem;
}

.hcc-figure img {
	display: block;
	border-radius: var(--hcc-radius);
}

.hcc-figure figcaption {
	margin-top: 0.6rem;
	font-size: var(--hcc-step--1);
	color: var(--hcc-muted);
}

/* The home hero's mark with its caption ("visible online and in-store"). */
.hcc-hero__figure {
	margin: 0;
}

.hcc-hero__figure figcaption {
	margin-top: 1rem;
	text-align: center;
	text-wrap: balance;
}

.hcc-keep {
	white-space: nowrap;
}

.hcc-seal {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	aspect-ratio: 1;
	filter: drop-shadow(0 10px 24px rgba(22, 20, 15, 0.16));
}

.hcc-seals {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	align-items: flex-start;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.hcc-seals > li,
.hcc-seals > figure {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--hcc-step--1);
	color: var(--hcc-muted);
	text-align: center;
}

.hcc-seals img {
	width: 132px;
	height: 132px;
}

/* On-page contents. */
.hcc-toc {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	background: var(--hcc-surface);
}

.hcc-toc__title {
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hcc-muted);
	margin: 0 0 0.5rem;
}

.hcc-toc ol,
.hcc-toc ul {
	margin: 0;
	padding-left: 1.2em;
}

.hcc-toc li + li {
	margin-top: 0.2rem;
}

/* ------------------------------------------------------------------ FAQ */

.hcc-faq {
	margin: 0 0 2rem;
	border-top: 1px solid var(--hcc-rule);
}

.hcc-faq__group {
	font-size: var(--hcc-step-2);
	margin: 2.25rem 0 0.75rem;
}

.hcc-faq__item {
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-faq__q {
	position: relative;
	display: block;
	padding: 1.15rem 2.75rem 1.15rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: 1.05em;
	line-height: 1.45;
	color: var(--hcc-ink);
}

.hcc-faq__q::-webkit-details-marker {
	display: none;
}

.hcc-faq__q::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 0.65rem;
	height: 0.65rem;
	margin-top: -0.45rem;
	border-right: 1.5px solid var(--hcc-gold);
	border-bottom: 1.5px solid var(--hcc-gold);
	transform: rotate(45deg);
	transition: transform 0.25s var(--hcc-ease);
}

.hcc-faq__item[open] > .hcc-faq__q::after {
	transform: rotate(-135deg);
	margin-top: -0.1rem;
}

.hcc-faq__q:hover {
	color: var(--hcc-gold-strong);
}

.hcc-faq__a {
	padding: 0 0 1.25rem;
	max-width: 46em;
}

.hcc-faq__a > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ CTA band */

.hcc-cta {
	position: relative;
	padding-block: clamp(3rem, 2.4rem + 3vw, 5rem);
	border-top: 1px solid var(--hcc-band-rule);
	overflow: clip;
}

.hcc-cta::before {
	content: "";
	position: absolute;
	inset: auto -10% -60% auto;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 1px solid rgba(201, 163, 95, 0.22);
	box-shadow: 0 0 0 28px rgba(201, 163, 95, 0.05);
	pointer-events: none;
}

.hcc-cta__inner {
	position: relative;
	display: grid;
	gap: 1.5rem 3rem;
	align-items: center;
}

@media (min-width: 900px) {
	.hcc-cta__inner {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}

	.hcc-cta__inner .hcc-actions {
		justify-content: flex-end;
		margin-top: 0;
	}
}

.hcc-cta__title {
	font-size: var(--hcc-step-3);
	margin-bottom: 0.4em;
}

.hcc-cta p {
	color: var(--hcc-band-muted);
	margin: 0;
	max-width: 38em;
}

.hcc-cta .hcc-btn--ghost,
.hcc-section--ink .hcc-btn--ghost,
.hcc-hero--ink .hcc-btn--ghost {
	color: var(--hcc-band-fg);
	border-color: rgba(237, 233, 224, 0.35);
}

.hcc-cta .hcc-btn--ghost:hover,
.hcc-section--ink .hcc-btn--ghost:hover,
.hcc-hero--ink .hcc-btn--ghost:hover {
	border-color: #C9A35F;
	color: #FFFFFF;
}

/* ------------------------------------------------------------------ search form, 404, index */

.hcc-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: flex-end;
	margin: 0 0 1.5rem;
}

.hcc-search__field {
	display: grid;
	gap: 0.3rem;
	flex: 1 1 16rem;
	min-width: 0;
	margin: 0;
}

.hcc-search__field label {
	font-weight: 600;
	font-size: 0.95rem;
}

.hcc-search input[type="search"] {
	width: 100%;
}

.hcc-404__code {
	font-family: var(--hcc-mono);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hcc-gold-strong);
}

.hcc-404__seal {
	opacity: 0.9;
	filter: grayscale(1) drop-shadow(0 10px 24px rgba(22, 20, 15, 0.12));
}

/* On a stacked hero the mark would push the doors a screen down; the forms come first. */
@media (max-width: 899px) {
	.hcc-404__aside {
		display: none;
	}
}

.hcc-results {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hcc-rule);
}

.hcc-results > li {
	margin: 0;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-results .wp-block-post-title {
	font-size: var(--hcc-step-2);
	margin: 0 0 0.35rem;
}

.hcc-results .wp-block-post-title a {
	color: var(--hcc-ink);
	text-decoration: none;
}

.hcc-results .wp-block-post-title a:hover {
	color: var(--hcc-gold-strong);
}

.hcc-results .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--hcc-muted);
}

.wp-block-query-pagination {
	margin-top: 2rem;
	gap: 1rem;
}

/* The single post template (no posts are planned; kept readable all the same). */
.hcc-single .wp-block-post-title {
	font-size: var(--hcc-step-4);
}

.hcc-single .wp-block-post-date {
	font-family: var(--hcc-mono);
	font-size: 0.8rem;
	color: var(--hcc-muted);
	margin-bottom: 2rem;
}

/* ------------------------------------------------------------------ effects */

/*
 * No transition runs until the page has loaded (hcc.js adds .hcc-ready on the frame after
 * load). WebKit resolves styles once before the theme stylesheet applies, and every color,
 * border and transform would otherwise animate from the bare page on each load.
 */
html:not(.hcc-ready) *,
html:not(.hcc-ready) *::before,
html:not(.hcc-ready) *::after {
	transition: none !important;
}

/* Reveals: only elements below the fold at load are hidden (assets/js/hcc.js marks them). */
[data-reveal].is-pending {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
}

[data-reveal="left"].is-pending { transform: translate3d(-26px, 0, 0); }
[data-reveal="right"].is-pending { transform: translate3d(26px, 0, 0); }
[data-reveal="scale"].is-pending { transform: scale(0.96); }
[data-reveal="fade"].is-pending { transform: none; }

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s var(--hcc-ease), transform 0.8s var(--hcc-ease);
	transition-delay: var(--hcc-reveal-delay, 0ms);
}

/* Cursor ring and dot, in seal gold (fine pointers only; hcc.js adds them). */
.hcc-cursor-ring,
.hcc-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.3s ease, width 0.25s var(--hcc-ease), height 0.25s var(--hcc-ease), margin 0.25s var(--hcc-ease), background-color 0.25s ease, border-color 0.25s ease;
	will-change: transform;
}

.hcc-cursor-ring {
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1.5px solid rgba(201, 163, 95, 0.55);
}

.hcc-cursor-dot {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: #C9A35F;
}

.hcc-cursor-on .hcc-cursor-ring,
.hcc-cursor-on .hcc-cursor-dot {
	opacity: 1;
}

.hcc-hover-link .hcc-cursor-ring {
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	background: rgba(201, 163, 95, 0.08);
	border-color: rgba(201, 163, 95, 0.7);
}

.hcc-hover-cta .hcc-cursor-ring {
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	background: rgba(201, 163, 95, 0.1);
	border-color: #C9A35F;
}

.hcc-hover-cta .hcc-cursor-dot {
	opacity: 0;
}

/* Click ripple. */
.hcc-ripple {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.22;
	transform: scale(0);
	pointer-events: none;
	animation: hcc-ripple 0.65s var(--hcc-ease) forwards;
}

@keyframes hcc-ripple {
	to {
		transform: scale(1);
		opacity: 0;
	}
}

/* Magnetic buttons ease back with a spring. */
.hcc-magnetic {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	body {
		animation: none;
	}

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

	.hcc-cursor-ring,
	.hcc-cursor-dot {
		display: none;
	}
}

@media (pointer: coarse) {
	.hcc-cursor-ring,
	.hcc-cursor-dot {
		display: none;
	}
}

/* ------------------------------------------------------------------ mobile action bar */

/*
 * inc/dock.php prints it; assets/js/hcc.js hides it (.is-hidden, inert) while a form control
 * (field or button) has focus or the footer is in view. Below 760px only, never on staff pages.
 */
.hcc-dock {
	display: none;
}

@media (max-width: 759.98px) {
	:root {
		--hcc-dock-h: 3.75rem;
	}

	/* Keyboard focus that scrolls lands clear of the bar. */
	html:has(body.hcc-has-dock) {
		scroll-padding-bottom: calc(var(--hcc-dock-h) + env(safe-area-inset-bottom, 0px));
	}

	.hcc-dock {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem var(--hcc-gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
		background: var(--hcc-paper); /* opaque: nothing shows through the buttons */
		-webkit-backdrop-filter: saturate(1.2) blur(10px);
		backdrop-filter: saturate(1.2) blur(10px);
		border-top: 1px solid var(--hcc-rule);
		box-shadow: 0 -6px 18px rgba(22, 20, 15, 0.07);
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.28s var(--hcc-ease), visibility 0s linear 0s;
	}

	.hcc-dock .hcc-btn {
		flex: 1 1 0;
		min-width: 0;
		min-height: 2.75rem;
		padding: 0.5rem 0.75rem;
		font-size: 0.925rem;
		white-space: nowrap;
	}

	.hcc-dock .hcc-dock__go {
		flex-grow: 1.3;
	}

	.hcc-dock .hcc-btn:not(.hcc-dock__go) {
		background: var(--hcc-surface);
	}

	.hcc-dock .hcc-btn:focus-visible {
		outline-offset: 2px;
	}

	.hcc-dock.is-hidden,
	html.hcc-drawer-open .hcc-dock,
	body:has(.hcc-main :is(input:not([type="hidden"]), select, textarea, button):focus) .hcc-dock,
	body:has(.hcc-main form:focus-within) .hcc-dock {
		transform: translateY(calc(100% + 2px));
		visibility: hidden;
		transition: transform 0.28s var(--hcc-ease), visibility 0s linear 0.28s;
	}

	/* Room under the footer, so the bar never covers the last of the page. */
	.hcc-has-dock .hcc-footer {
		padding-bottom: calc(var(--hcc-dock-h) + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 759.98px) and (prefers-reduced-motion: reduce) {
	.hcc-dock {
		transition: none !important;
	}
}

@media (max-width: 759.98px) and (prefers-color-scheme: dark) {
	.hcc-dock {
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
	}
}

/* ------------------------------------------------------------------ print */

@media print {
	body {
		background: #FFFFFF;
		color: #000000;
		animation: none;
	}

	.wp-site-blocks {
		padding-top: 0;
	}

	.hcc-header,
	.hcc-progress,
	.hcc-skip,
	.hcc-drawer,
	.hcc-cursor-ring,
	.hcc-cursor-dot,
	.hcc-footer__nav,
	.hcc-actions,
	.hcc-dock {
		display: none !important;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	.hcc-section--ink,
	.hcc-hero--ink,
	.hcc-cta,
	.hcc-footer {
		background: #FFFFFF !important;
		color: #000000 !important;
	}

	a {
		color: #000000;
	}
}