/*
 * Hirova guides: reading pages on top of home.css, same paper, ink and type.
 * One column at a reading measure; Newsreader for headings and for what
 * people said, Familjen Grotesk for everything else. No scripts, no motion.
 */
.guide {
	padding-top: clamp(1.5rem, 1rem + 3vw, 4rem);
	padding-bottom: var(--section);
}
.guide > * {
	max-width: 44rem;
}
.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--ink2);
}
.crumbs a {
	color: var(--ink);
	text-decoration: underline;
}
.guide h1 {
	margin-top: 1.5rem;
	font-size: clamp(2.75rem, 1.9rem + 4vw, 5rem);
	line-height: 0.98;
}
.guide .lede {
	max-width: 38rem;
}
.updated {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--ink2);
}

.prose {
	margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.prose section + section {
	margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.prose h2 {
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	line-height: 1.02;
	scroll-margin-top: 1.5rem;
}
.prose h3 {
	margin-top: 2.5rem;
	font: 600 1.125rem / 1.3 var(--ui);
	scroll-margin-top: 1.5rem;
}
.prose p {
	margin-top: 1rem;
	line-height: 1.6;
	text-wrap: pretty;
}
.prose strong {
	font-weight: 600;
}

.list {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding-left: 1.25rem;
	line-height: 1.55;
}
ul.list {
	list-style: disc;
}
ol.list,
.steps {
	list-style: decimal;
}
.list li::marker,
.steps li::marker {
	color: var(--ink2);
}
.steps {
	display: grid;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding-left: 1.25rem;
	line-height: 1.55;
}
.formula {
	padding: 1rem 1.25rem;
	border: 1px solid var(--ink);
	border-radius: 0.75rem;
}
.posting {
	font-family: var(--voice);
	font-size: 1.1875rem;
}
/* A prompt to copy: plain monospace on mist, wrapped so it never scrolls sideways. */
.prompt {
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	background: var(--mist);
	font:
		400 0.875rem / 1.6 ui-monospace,
		SFMono-Regular,
		Menlo,
		monospace;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 1.25rem;
	font-size: 0.9375rem;
}

/* A spoken answer and the bullet set from it, like the hero's Set. */
.examples {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}
.example {
	display: grid;
	gap: 0.375rem;
	padding: 1.25rem;
	border: 1px solid var(--hair);
	border-radius: 0.75rem;
}
.ex-who {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--ink2);
}
.prose .ex-who {
	margin-top: 0;
}
.ex-who + .ex-set,
.ex-said + .ex-who {
	margin-top: 0.5rem;
}
.ex-said p {
	margin: 0;
	font: 400 1.1875rem / 1.4 var(--voice);
	color: var(--ink2);
}
.prose .ex-set {
	margin-top: 0;
	font-weight: 600;
	line-height: 1.45;
}

.map {
	width: 100%;
	margin-top: 1.5rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.45;
}
.map caption {
	padding-bottom: 0.75rem;
	text-align: left;
	color: var(--ink2);
}
.map th,
.map td {
	padding: 0.75rem 0.75rem 0.75rem 0;
	border-bottom: 1px solid var(--hair);
	text-align: left;
	vertical-align: top;
}
.map thead th {
	border-bottom-color: var(--ink);
	font-weight: 600;
}
.map tbody th {
	font-weight: 600;
}
.map .list {
	margin-top: 0;
}

.qa dl {
	margin: 1.25rem 0 0;
	border-top: 1px solid var(--ink);
}
.qa dt {
	padding-top: 1.25rem;
	font-weight: 600;
}
.qa dd {
	margin: 0.375rem 0 0;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--hair);
	color: var(--ink2);
	line-height: 1.55;
}

.related {
	margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.related h2 {
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	line-height: 1.02;
}
.related ul {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}
@media (min-width: 40rem) {
	.related ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.related a {
	display: grid;
	gap: 0.375rem;
	height: 100%;
	padding: 1.25rem;
	border: 1px solid var(--ink);
	border-radius: 0.75rem;
	text-decoration: none;
}
.related a:hover {
	box-shadow: var(--lift);
}
.related span {
	font-size: 0.9375rem;
	color: var(--ink2);
}

/* Last: home.css sizes the paragraph after an h2 as a lede; in prose it is body text. */
.prose h2 + p {
	max-width: none;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
}