html {
  scroll-behavior: smooth;
}

/* ===== CSP HOME (2026 redesign) — scoped under .csp-home ===== */

.entry-content:has(.csp-home){
	background: #fff;
}

.csp-home{
	--csp-heading:#0c162c;
	--csp-paragraph:#444;
	--csp-ink:#111;
	--csp-border:rgba(0,0,0,.1);
	--csp-panel:#eaf3fb;
	--csp-blue:#598fbf;
	--r-sm:12px;
	--r-xs:8px;
	font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--csp-paragraph);
	max-width:1280px;
	margin:0 auto;
	padding:48px 20px;
	box-sizing:border-box;
	line-height:1.5;
}
.csp-home *,
.csp-home *::before,
.csp-home *::after{box-sizing:border-box;}

.csp-home img{max-width:100%;display:block;}

/* ---- Top section: hero (left) + list (right) ---- */
.csp-home .csp-top{
	display:flex;
	gap:64px;
	align-items:flex-start;
}
.csp-home .csp-hero{flex:694 1 0;min-width:0;}
.csp-home .csp-side{flex:522 1 0;min-width:0;}

/* Hero card */
.csp-home .csp-hero-media{
	position:relative;
	width:100%;
	aspect-ratio:657 / 368;
	background:var(--csp-panel);
	border-radius:var(--r-sm);
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}
.csp-home .csp-hero-media img{
	max-width:38%;
	height:auto;
}
.csp-home .csp-hero-body{padding-top:32px;}
.csp-home .csp-hero-body h2{
	margin:0 0 12px;
	font-size:20px;
	font-weight:600;
	line-height:1.5;
	color:var(--csp-heading);
}
.csp-home .csp-hero-body p{margin:0 0 12px;font-size:16px;line-height:1.5;}
.csp-home .csp-hero-body p:last-of-type{margin-bottom:0;}

/* Text-link button (arrow) */
.csp-home .csp-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:24px;
	font-size:14px;
	font-weight:600;
	line-height:1.5;
	color:var(--csp-ink);
	text-decoration:none;
}
.csp-home .csp-link svg{flex:none;width:18px;height:18px;transition:transform .18s ease;}
.csp-home .csp-link:hover{text-decoration:underline;}
.csp-home .csp-link:hover svg{transform:translateX(3px);}
.csp-home .csp-link:focus-visible{outline:2px solid var(--csp-blue);outline-offset:3px;border-radius:4px;}

/* Right-side list rows */
.csp-home .csp-row{
	display:flex;
	gap:24px;
	align-items:flex-start;
	padding:24px 0;
	border-top:1px solid var(--csp-border);
}
.csp-home .csp-side .csp-row:first-child{border-top:0;padding-top:0;}
.csp-home .csp-row-thumb{
	flex:none;
	width:100px;
	height:80px;
	border-radius:var(--r-xs);
	object-fit:cover;
	overflow:hidden;
}
.csp-home div.csp-row-thumb > *{width:100%;height:100%;}
.csp-home div.csp-row-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.csp-home .csp-row-body{flex:1 1 0;min-width:0;}
.csp-home .csp-row-body h3{
	margin:0 0 4px;
	font-size:16px;
	font-weight:600;
	line-height:1.5;
	color:var(--csp-heading);
}
.csp-home .csp-row-body p{margin:0;font-size:14px;line-height:1.5;}
.csp-home .csp-row-body .csp-link{margin-top:12px;}

/* ---- Divider ---- */
.csp-home .csp-divider{
	border:0;
	border-top:1px solid var(--csp-border);
	margin:64px 0;
}

/* ---- Bottom: 3-up cards ---- */
.csp-home .csp-cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:32px;
}
.csp-home .csp-card{
	display:flex;
	flex-direction:column;
	filter:drop-shadow(0 1px 1px rgba(0,0,0,.05));
}
.csp-home .csp-card-media{
	width:100%;
	height:248px;
	border-radius:var(--r-xs);
	object-fit:cover;
	margin-bottom:12px;
}
.csp-home .csp-card-body{padding:12px 24px 0 0;}
.csp-home .csp-card-body h3{
	margin:0 0 8px;
	font-size:20px;
	font-weight:600;
	line-height:1.5;
	color:var(--csp-heading);
}
.csp-home .csp-card-body p{margin:0;font-size:14px;line-height:1.5;}
.csp-home .csp-card-body .csp-link{margin-top:24px;}

.csp-home .csp-row-body h3,
.csp-home .csp-card-body h3,
.csp-home .csp-hero-body h2{text-transform:none;}

/* ---- Responsive ---- */
@media (max-width:900px){
	.csp-home .csp-top{flex-direction:column;gap:40px;}
	.csp-home .csp-side{flex:1 1 auto;max-width:none;width:100%;}
	.csp-home .csp-cards{grid-template-columns:1fr;gap:40px;}
	.csp-home .csp-card-body{padding-right:0;}
}
@media (max-width:480px){
	.csp-home{padding:32px 16px;}
	.csp-home .csp-hero-body h2,
	.csp-home .csp-card-body h3{font-size:18px;}
	.csp-home .csp-row{gap:16px;}
	.csp-home .csp-row-thumb{width:84px;height:68px;}
	.csp-home .csp-card-media{height:200px;}
}
@media (prefers-reduced-motion:reduce){
	.csp-home .csp-link svg{transition:none;}
}