/* ==========================================================================
   Base: document, typography scale, layout primitives, focus behaviour
   ========================================================================== */

body {
	background-color: var(--hp-color-background);
	color: var(--hp-color-text);
	font-family: var(--hp-font-body);
	font-size: var(--hp-text-base);
	line-height: var(--hp-leading-normal);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* --- Headings ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .hp-display {
	font-family: var(--hp-font-display);
	font-weight: 600;
	line-height: var(--hp-leading-tight);
	color: var(--hp-color-text);
	letter-spacing: -0.008em;
	text-wrap: balance;
}

h1 { font-size: var(--hp-text-3xl); }
h2 { font-size: var(--hp-text-2xl); }
h3 { font-size: var(--hp-text-xl); }
h4 { font-size: var(--hp-text-lg); }
h5 { font-size: var(--hp-text-md); }
h6 { font-size: var(--hp-text-base); }

@media (min-width: 1024px) {
	h1 { font-size: var(--hp-text-4xl); }
}

p { text-wrap: pretty; }

a {
	color: var(--hp-color-primary-dark);
	text-decoration-color: var(--hp-color-border-strong);
	text-underline-offset: 0.18em;
	transition: color var(--hp-transition), text-decoration-color var(--hp-transition);
}
a:hover { color: var(--hp-color-accent); text-decoration-color: currentColor; }

/* --- Focus ------------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--hp-color-focus);
	outline-offset: 2px;
	border-radius: var(--hp-radius-sm);
}
.hp-skip-link:focus { z-index: 10000; }

/* --- Layout ------------------------------------------------------------ */
.hp-container {
	width: 100%;
	max-width: var(--hp-container);
	margin-inline: auto;
	padding-inline: var(--hp-gutter);
}
.hp-container--wide { max-width: var(--hp-container-wide); }
.hp-container--narrow { max-width: var(--hp-container-narrow); }

.hp-site { display: flex; flex-direction: column; min-height: 100vh; }
.hp-main { flex: 1 1 auto; }

.hp-section { padding-block: var(--hp-space-xl); }
.hp-section--tight { padding-block: var(--hp-space-lg); }
.hp-section--canvas { background-color: var(--hp-color-canvas); }
.hp-section--ink { background-color: var(--hp-color-primary-dark); color: var(--hp-color-text-invert); }
.hp-section--ink h2,
.hp-section--ink h3 { color: var(--hp-color-text-invert); }
.hp-section + .hp-section--canvas,
.hp-section--canvas + .hp-section--canvas { padding-top: var(--hp-space-xl); }

.hp-grid { display: grid; gap: var(--hp-space-md); }
.hp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.hp-stack > * + * { margin-top: var(--hp-space-sm); }
.hp-cluster { display: flex; flex-wrap: wrap; gap: var(--hp-space-2xs) var(--hp-space-sm); align-items: center; }

/* --- Section heading: hairline rule + short primary tick ---------------- */
.hp-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hp-space-2xs) var(--hp-space-md);
	margin-bottom: var(--hp-space-md);
	padding-top: var(--hp-space-xs);
	border-top: 2px solid var(--hp-color-text);
}
.hp-section-head__title { font-size: var(--hp-text-xl); margin: 0; }
.hp-section-head__intro {
	flex-basis: 100%;
	max-width: 62ch;
	margin: 0;
	color: var(--hp-color-text-muted);
	font-size: var(--hp-text-sm);
}
.hp-section-head__link {
	font-family: var(--hp-font-body);
	font-size: var(--hp-text-sm);
	font-weight: 600;
	color: var(--hp-color-primary-dark);
	text-decoration: none;
	border-bottom: 2px solid var(--hp-color-signal);
	padding-bottom: 1px;
	white-space: nowrap;
}
.hp-section-head__link:hover { border-bottom-color: var(--hp-color-accent); }

.hp-section--ink .hp-section-head { border-top-color: rgba(255, 255, 255, 0.4); }
.hp-section--ink .hp-section-head__intro { color: rgba(244, 247, 247, 0.78); }
.hp-section--ink .hp-section-head__link { color: var(--hp-color-text-invert); }

/* --- Utilities --------------------------------------------------------- */
.hp-muted { color: var(--hp-color-text-muted); }
.hp-text-sm { font-size: var(--hp-text-sm); }
.hp-text-xs { font-size: var(--hp-text-xs); }
.hp-measure { max-width: 68ch; }
.hp-center { text-align: center; }
.hp-mt-md { margin-top: var(--hp-space-md); }
.hp-mt-lg { margin-top: var(--hp-space-lg); }
.hp-mb-md { margin-bottom: var(--hp-space-md); }
.hp-no-scroll { overflow: hidden; }