/* ── Layout ──────────────────────────────────────────────────── */

/* Site shell */
.hsk-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #F2F3F5;
}

/* Shared site container — matches main website */
.hsk-container,
.hsk-header__inner,
.hsk-footer__inner,
.hsk-fp-container,
.hsk-layout {
	width: 100%;
	max-width: var(--page-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--page-gutter);
	padding-right: var(--page-gutter);
	box-sizing: border-box;
}

/* Header — always white, elevated */
.hsk-header {
	position: sticky;
	top: 0;
	z-index: 200;
	height: var(--header-h);
	background: #FFFFFF;
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
	display: flex;
	align-items: center;
}
.hsk-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

/* Main layout grid */
.hsk-layout {
	flex: 1;
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
}
.hsk-layout--three {
	grid-template-columns: var(--sidebar-w) 1fr var(--context-w);
}

/* Sidebar — white panel */
.hsk-sidebar {
	width: var(--sidebar-w);
	background: #FFFFFF;
	border-right: 1px solid var(--color-border);
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

/* Main content — white card on gray background */
.hsk-content {
	padding: var(--space-8) var(--space-10) var(--space-16);
	min-width: 0;
	background: #FFFFFF;
}

/* Context sidebar — white panel */
.hsk-context {
	width: var(--context-w);
	background: #FFFFFF;
	border-left: 1px solid var(--color-border);
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
	padding: var(--space-6) var(--space-5);
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

/* Footer — blends with gray background */
.hsk-footer {
	border-top: 1px solid var(--color-border);
	background: #EAEBEE;
	padding: var(--space-8) 0;
}
.hsk-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-6);
	flex-wrap: wrap;
}

/* Prose content max-width */
.hsk-article-body {
	max-width: var(--content-max);
}

/* Post grid (homepage) */
.hsk-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-6);
}

/* Page header */
.hsk-page-header {
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-border);
}
.hsk-page-header h1 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.hsk-page-header .hsk-description { color: var(--color-text-muted); font-size: var(--text-lg); }

/* Skip link */
.hsk-skip-link {
	position: absolute;
	top: -40px;
	left: var(--space-4);
	background: var(--color-accent);
	color: #fff;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 600;
	z-index: 9999;
	text-decoration: none;
	transition: top var(--trans-fast);
}
.hsk-skip-link:focus { top: var(--space-3); }

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}