/* ==========================================================================
   Article reading experience
   ========================================================================== */

.hp-article-layout { display: grid; gap: var(--hp-space-xl); padding-block: var(--hp-space-md) var(--hp-space-2xl); }
@media (min-width: 1024px) {
	.hp-article-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--hp-space-2xl); }
}

.hp-article__header { max-width: 72ch; }
.hp-article__title { font-size: clamp(2rem, 4.4vw, 3rem); margin-block: var(--hp-space-2xs); }
.hp-article__dek { font-size: var(--hp-text-md); color: var(--hp-color-text-muted); max-width: 62ch; }

.hp-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hp-space-2xs) var(--hp-space-md);
	margin-top: var(--hp-space-md);
	padding-block: var(--hp-space-sm);
	border-block: var(--hp-rule);
	font-size: var(--hp-text-xs);
	color: var(--hp-color-text-muted);
}
.hp-byline__people { display: grid; gap: 2px; }
.hp-byline strong { color: var(--hp-color-text); }
.hp-byline a { font-weight: 650; text-decoration: none; }
.hp-byline a:hover { text-decoration: underline; }
.hp-byline__avatars { display: flex; }
.hp-byline__avatars img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--hp-color-surface);
}
.hp-byline__avatars img + img { margin-left: -12px; }
.hp-byline__dates { font-variant-numeric: tabular-nums; }

.hp-article__figure { margin-block: var(--hp-space-md); }
.hp-article__figure img { width: 100%; border-radius: var(--hp-radius-md); }
.hp-article__figure figcaption { margin-top: var(--hp-space-2xs); font-size: var(--hp-text-xs); color: var(--hp-color-text-muted); }

/* Key takeaways */
.hp-takeaways {
	margin-block: var(--hp-space-lg);
	padding: var(--hp-space-md);
	background-color: var(--hp-color-primary-soft);
	border-radius: var(--hp-radius-md);
}
.hp-takeaways h2 { font-size: var(--hp-text-md); margin-bottom: var(--hp-space-2xs); }
.hp-takeaways ul { margin: 0; padding-left: 1.15rem; display: grid; gap: var(--hp-space-2xs); }
.hp-takeaways li { font-size: var(--hp-text-sm); }

/* Table of contents */
.hp-toc { border: var(--hp-rule); border-radius: var(--hp-radius-md); padding: var(--hp-space-sm) var(--hp-space-md); margin-block: var(--hp-space-md); }
.hp-toc__title { font-size: var(--hp-text-sm); font-family: var(--hp-font-body); font-weight: 700; margin-bottom: var(--hp-space-2xs); }
.hp-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.hp-toc ol ol { padding-left: var(--hp-space-sm); margin-top: 0.3rem; }
.hp-toc a { font-size: var(--hp-text-sm); text-decoration: none; color: var(--hp-color-text-muted); border-left: 2px solid transparent; padding-left: var(--hp-space-2xs); display: block; }
.hp-toc a:hover { color: var(--hp-color-primary-dark); }
.hp-toc a.is-current { color: var(--hp-color-text); border-left-color: var(--hp-color-accent); font-weight: 650; }
.hp-toc[data-hp-toc]:empty { display: none; }

/* Body typography */
.hp-content { max-width: 68ch; font-size: var(--hp-text-md); line-height: var(--hp-leading-relaxed); }
.hp-content > * + * { margin-top: var(--hp-space-md); }
.hp-content h2 { font-size: var(--hp-text-2xl); margin-top: var(--hp-space-xl); scroll-margin-top: calc(var(--hp-header-height) + 24px); }
.hp-content h3 { font-size: var(--hp-text-lg); margin-top: var(--hp-space-lg); scroll-margin-top: calc(var(--hp-header-height) + 24px); }
.hp-content h4 { font-size: var(--hp-text-md); margin-top: var(--hp-space-md); }
.hp-content ul,
.hp-content ol { padding-left: 1.35rem; display: grid; gap: var(--hp-space-2xs); }
.hp-content li::marker { color: var(--hp-color-primary); }
.hp-content a { font-weight: 550; }
.hp-content img { border-radius: var(--hp-radius-md); }
.hp-content blockquote {
	margin-inline: 0;
	padding-left: var(--hp-space-md);
	border-left: 3px solid var(--hp-color-accent);
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-lg);
	line-height: var(--hp-leading-snug);
}
.hp-content blockquote cite { display: block; margin-top: var(--hp-space-2xs); font-family: var(--hp-font-body); font-size: var(--hp-text-xs); font-style: normal; color: var(--hp-color-text-muted); }
.hp-content table { display: block; overflow-x: auto; white-space: nowrap; }
.hp-content figure.alignwide,
.hp-content .alignwide { max-width: min(100%, 1000px); }
.hp-content .alignfull { max-width: none; }
.hp-content code { font-family: var(--hp-font-mono); font-size: 0.9em; background-color: var(--hp-color-canvas); padding: 0.1em 0.3em; border-radius: var(--hp-radius-sm); }

/* Expert quote callout */
.hp-pullquote {
	margin-block: var(--hp-space-lg);
	padding: var(--hp-space-md);
	border-top: 2px solid var(--hp-color-text);
	border-bottom: var(--hp-rule);
}
.hp-pullquote p { font-family: var(--hp-font-display); font-size: var(--hp-text-lg); line-height: var(--hp-leading-snug); }
.hp-pullquote footer { margin-top: var(--hp-space-2xs); font-size: var(--hp-text-xs); color: var(--hp-color-text-muted); }

/* FAQ */
.hp-faq { margin-block: var(--hp-space-lg); }
.hp-faq__item { border-bottom: var(--hp-rule); }
.hp-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: var(--hp-space-sm) var(--hp-space-lg) var(--hp-space-sm) 0;
	position: relative;
	font-family: var(--hp-font-display);
	font-size: var(--hp-text-md);
	font-weight: 600;
}
.hp-faq__item summary::-webkit-details-marker { display: none; }
.hp-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--hp-text-lg);
	color: var(--hp-color-primary);
}
.hp-faq__item[open] summary::after { content: "\2013"; }
.hp-faq__answer { padding-bottom: var(--hp-space-sm); font-size: var(--hp-text-sm); color: var(--hp-color-text-muted); }

/* References / how we reviewed */
.hp-references { margin-top: var(--hp-space-xl); }
.hp-references ol { padding-left: 1.25rem; display: grid; gap: var(--hp-space-2xs); font-size: var(--hp-text-sm); color: var(--hp-color-text-muted); }
.hp-references a { word-break: break-word; }
.hp-review-process { margin-top: var(--hp-space-lg); padding: var(--hp-space-md); background-color: var(--hp-color-canvas); border-radius: var(--hp-radius-md); font-size: var(--hp-text-sm); }

/* Author / reviewer cards */
.hp-person {
	display: flex;
	gap: var(--hp-space-md);
	padding-block: var(--hp-space-md);
	border-top: var(--hp-rule);
}
.hp-person__photo { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background-color: var(--hp-color-surface-alt); }
.hp-person__role { font-size: var(--hp-text-2xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--hp-color-text-muted); }
.hp-person__name { font-size: var(--hp-text-md); margin-block: 2px; }
.hp-person__name a { text-decoration: none; }
.hp-person__credentials { font-size: var(--hp-text-xs); color: var(--hp-color-primary-dark); font-weight: 650; }
.hp-person__bio { font-size: var(--hp-text-sm); color: var(--hp-color-text-muted); margin-top: var(--hp-space-3xs); }

/* Sidebar */
.hp-sidebar { display: grid; gap: var(--hp-space-lg); align-content: start; }
@media (min-width: 1024px) {
	.hp-sidebar { position: sticky; top: calc(var(--hp-header-height) + 16px); max-height: calc(100vh - var(--hp-header-height) - 32px); overflow-y: auto; scrollbar-width: thin; }
}
.hp-widget { border-top: 2px solid var(--hp-color-text); padding-top: var(--hp-space-2xs); }
.hp-widget__title { font-size: var(--hp-text-sm); font-family: var(--hp-font-body); font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--hp-space-sm); }
.hp-widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--hp-space-2xs); }
.hp-widget a { text-decoration: none; font-size: var(--hp-text-sm); }
.hp-widget a:hover { text-decoration: underline; }

.hp-article-footer { max-width: 72ch; }
.hp-related { padding-top: var(--hp-space-xl); border-top: var(--hp-rule); }