/*
 * Guides and the guides index (single-post.php, home.php, parts/guide/*), in the Home B
 * shell with the collection and product page look: the light grey ground, square white
 * sheets with hairlines and no shadows, Archivo condensed headings, uppercase spec labels,
 * solid icons, product cut-outs in light frames (multiply drops their white onto the frame),
 * yellow only for Call.
 *
 * A guide: the head sheet (topic, h1, the author and reading time plate, the summary, the
 * photo), then the body sheet beside a sticky rail (On this page, Call and the quote), then
 * Machines in this guide, Related collections and More guides. Photos come in two shapes
 * (hdc_guide_image_shape()): a scene photo (--wide) is a cover crop with no frame, across
 * the head sheet under the title (the summary beside the title from 64rem, in the rail's
 * column) and filling a card's top or the featured card's half; a cut-out on white (--cut,
 * the head's --media) stays whole in a light frame, in the head's right column.
 *
 * The index: the h1 and its line, the topic chips, the first guide as a wide card, then a
 * grid of cards.
 *
 * Breakpoints 40rem, 48rem, 64rem, 80rem. Every rule under body.hdc-guide.
 */

@layer tokens {
	body.hdc-guide {
		--gd-ground: #eef1f5;
		--gd-tint: #f3f4f6;
		--gd-line: #dfe3e8;
		--gd-control: #c9cfd6;
		/* 5.2:1 on the ground, 5.8:1 on white. */
		--gd-mute: #5b6571;
		--gd-pad: 1.25rem;
		--gd-gap: 1rem;
		--gd-space: 2.75rem;
		--gd-side: 20rem;
		--gd-col: 46rem;
	}

	@media (min-width: 48rem) {
		body.hdc-guide {
			--gd-pad: 2rem;
			--gd-space: 3.5rem;
		}
	}

	@media (min-width: 64rem) {
		body.hdc-guide {
			--gd-pad: 2.5rem;
			--gd-gap: 1.25rem;
			--gd-space: 4.5rem;
		}
	}

	@media (min-width: 80rem) {
		body.hdc-guide {
			--gd-side: 22rem;
		}
	}
}

@layer components {
	.hdc-guide .hdc-gd-main {
		overflow-x: clip;
	}

	.hdc-guide .hdc-gd-ground {
		padding-bottom: var(--gd-space);
		background: var(--gd-ground);
	}

	/* ---------------------------------------------------------------- Icons */
	.hdc-guide :is(.hdc-gd-ico, .hdc-v1-ico) {
		flex: none;
		width: 1.125rem;
		height: 1.125rem;
		fill: currentColor;
	}

	.hdc-guide :is(.hdc-gd-ico, .hdc-v1-ico) .d {
		fill: none;
		stroke: var(--white);
		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.hdc-guide :is(.hdc-gd-ico, .hdc-v1-ico) .f {
		fill: var(--white);
	}

	.hdc-guide .hdc-gd-ico--arrow .d {
		stroke: currentColor;
		stroke-width: 2;
	}

	/* ---------------------------------------------------------------- Crumbs, labels */
	.hdc-guide .hdc-gd-crumbs__list {
		margin: 0;
		padding: 1rem 0 0;
		list-style: none;
		color: var(--steel);
		font-size: 0.875rem;
		line-height: 1.5;
		--link: var(--steel);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	/* Inline, so a long guide title wraps as text after the crumbs before it. */
	.hdc-guide .hdc-gd-crumbs__item {
		display: inline;
	}

	.hdc-guide .hdc-gd-crumbs__item + .hdc-gd-crumbs__item::before {
		content: "/";
		margin-inline: 0.5rem;
		color: var(--control);
	}

	.hdc-guide .hdc-gd-crumbs__item [aria-current] {
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-guide .hdc-gd-eyebrow {
		margin: 0;
		color: var(--gd-mute);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.3;
		text-transform: uppercase;
		--link: var(--gd-mute);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-guide .hdc-gd-label {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
		color: var(--ink);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.hdc-guide .hdc-gd-h1 {
		max-width: 22ch;
		margin: 0;
		color: var(--ink);
		font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.02;
		text-wrap: balance;
	}

	.hdc-guide .hdc-gd-h2 {
		margin: 0 0 1.25rem;
		color: var(--ink);
		font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.05;
	}

	.hdc-guide .hdc-gd-sec {
		margin-top: var(--gd-space);
	}

	.hdc-guide .hdc-gd-more__all {
		margin: 1.25rem 0 0;
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-more__all a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--ink);
	}

	.hdc-guide .hdc-gd-more__all .hdc-gd-ico {
		width: 1.25rem;
		height: 1.25rem;
	}

	/* ---------------------------------------------------------------- Head sheet */
	.hdc-guide .hdc-gd-hero {
		display: grid;
		gap: 1.25rem;
		margin-top: 1rem;
		padding: var(--gd-pad);
		background: var(--white);
	}

	.hdc-guide .hdc-gd-hero__head {
		display: grid;
		gap: 0.875rem;
		min-width: 0;
	}

	/* The author and reading time, a spec plate with hairlines like the product page's: label
	   beside value in rows on phones, cells with dividers in one row from 48rem. */
	.hdc-guide .hdc-gd-plate {
		display: grid;
		margin: 0.5rem 0 0;
		border-block: 1px solid var(--gd-line);
	}

	.hdc-guide .hdc-gd-plate__cell {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		align-items: center;
		gap: 0.75rem;
		padding: 0.625rem 0;
	}

	.hdc-guide .hdc-gd-plate__cell + .hdc-gd-plate__cell {
		border-top: 1px solid var(--gd-line);
	}

	.hdc-guide .hdc-gd-plate dt {
		color: var(--gd-mute);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.hdc-guide .hdc-gd-plate dd {
		display: flex;
		align-items: center;
		gap: 0.4375rem;
		margin: 0;
		color: var(--ink);
		font-size: 0.9375rem;
		font-weight: 700;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	/* Every photo frame: the cut-out sits inside the frame's padding, whole (contain). */
	.hdc-guide :is(.hdc-gd-hero__media, .hdc-gd-machine__media, .hdc-gd-col__media, .hdc-gd-card__media) {
		position: relative;
		--gd-inset: 1rem;
	}

	.hdc-guide :is(.hdc-gd-hero__img, .hdc-gd-machine__img, .hdc-gd-col__img, .hdc-gd-card__img) {
		position: absolute;
		inset: var(--gd-inset);
		width: calc(100% - 2 * var(--gd-inset));
		max-width: none;
		height: calc(100% - 2 * var(--gd-inset));
		object-fit: contain;
		mix-blend-mode: multiply;
	}

	.hdc-guide .hdc-gd-hero__media {
		height: 13rem;
		background: var(--gd-tint);
	}

	/* A scene photo: a cover crop edge to edge across the head sheet, no frame. */
	.hdc-guide .hdc-gd-hero--wide .hdc-gd-hero__media {
		height: auto;
		aspect-ratio: 16 / 9;
		margin-inline: calc(-1 * var(--gd-pad));
		--gd-inset: 0px;
	}

	.hdc-guide .hdc-gd-hero--wide .hdc-gd-hero__img,
	.hdc-guide .hdc-gd-card--wide .hdc-gd-card__img {
		object-fit: cover;
		mix-blend-mode: normal;
	}

	.hdc-guide .hdc-gd-hero__summary {
		display: grid;
		gap: 0.5rem;
		padding: 1rem 1.125rem;
		background: var(--gd-tint);
	}

	.hdc-guide .hdc-gd-hero__text {
		max-width: 44rem;
		margin: 0;
		color: var(--ink);
		font-size: 1.0625rem;
		line-height: 1.55;
	}

	/* ---------------------------------------------------------------- Body and rail */
	.hdc-guide .hdc-gd-layout {
		display: grid;
		gap: var(--gd-gap);
		margin-top: var(--gd-gap);
	}

	.hdc-guide .hdc-gd-sheet {
		min-width: 0;
		padding: var(--gd-pad);
		background: var(--white);
	}

	.hdc-guide .hdc-gd-rail {
		display: none;
	}

	/* On this page: folded on phones, a list in the rail from 64rem. */
	.hdc-guide .hdc-gd-toc--fold {
		background: var(--white);
	}

	.hdc-guide .hdc-gd-toc__toggle {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		min-height: 3.25rem;
		padding: 0.75rem var(--gd-pad);
		color: var(--ink);
		font-size: 1rem;
		font-weight: 700;
		cursor: pointer;
		list-style: none;
	}

	.hdc-guide .hdc-gd-toc__toggle::-webkit-details-marker {
		display: none;
	}

	.hdc-guide .hdc-gd-toc__toggle::after {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		margin-left: auto;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-0.125rem) rotate(45deg);
	}

	.hdc-guide .hdc-gd-toc--fold[open] .hdc-gd-toc__toggle::after {
		transform: translateY(0.125rem) rotate(-135deg);
	}

	.hdc-guide .hdc-gd-toc--fold .hdc-gd-toc__list {
		padding: 0 var(--gd-pad) 1rem;
	}

	.hdc-guide .hdc-gd-toc__list {
		display: grid;
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: hdc-gd-toc;
		--link: var(--body);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-guide .hdc-gd-toc__list li {
		counter-increment: hdc-gd-toc;
	}

	.hdc-guide .hdc-gd-toc__list a {
		display: grid;
		grid-template-columns: 1.75rem minmax(0, 1fr);
		padding: 0.5rem 0;
		border-top: 1px solid var(--gd-line);
		color: var(--body);
		font-size: 0.9375rem;
		line-height: 1.35;
		text-decoration: none;
	}

	.hdc-guide .hdc-gd-toc__list a::before {
		content: counter(hdc-gd-toc, decimal-leading-zero);
		color: var(--gd-mute);
		font-size: 0.8125rem;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		line-height: 1.6;
	}

	.hdc-guide .hdc-gd-toc__list a:hover {
		color: var(--ink);
		text-decoration: underline;
	}

	.hdc-guide .hdc-gd-toc__list a[aria-current] {
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-toc__list a[aria-current]::before {
		color: var(--ink);
	}

	/* Call and the written quote. */
	.hdc-guide .hdc-gd-ask {
		display: grid;
		gap: 0.625rem;
		padding: 1.5rem;
		background: var(--white);
	}

	.hdc-guide .hdc-gd-call {
		display: flex;
		position: relative;
		align-items: center;
		gap: 0.875rem;
		padding: 0.75rem 1rem;
		background: var(--accent);
		color: var(--ink);
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-guide .hdc-gd-call:hover {
		background: var(--accent-strong);
	}

	.hdc-guide .hdc-gd-call:has(.hdc-gd-call__number:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-guide .hdc-gd-call .hdc-gd-call__icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.hdc-guide .hdc-gd-call__words {
		display: grid;
		min-width: 0;
	}

	.hdc-guide .hdc-gd-call__label {
		font-size: 0.875rem;
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-call__number {
		font-size: 1.5rem;
		font-weight: 800;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
		text-decoration: none;
	}

	.hdc-guide .hdc-gd-call__number::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-guide .hdc-gd-call__number:focus-visible {
		outline: none;
	}

	.hdc-guide .hdc-gd-quote {
		width: 100%;
	}

	.hdc-guide .hdc-gd-quote .hdc-v1-ico {
		color: var(--white);
	}

	.hdc-guide .hdc-gd-quote .hdc-v1-ico .d {
		stroke: var(--ink);
	}

	.hdc-guide .hdc-gd-ask__name {
		margin: 0;
		color: var(--gd-mute);
		font-size: 0.875rem;
	}

	/* ---------------------------------------------------------------- Content */
	.hdc-guide .hdc-gd-prose {
		color: var(--body);
		font-size: 1.0625rem;
		line-height: 1.7;
		overflow-wrap: break-word;
	}

	.hdc-guide .hdc-gd-prose > :not(.hdc-gd-table) {
		max-width: var(--gd-col);
	}

	.hdc-guide .hdc-gd-prose > * + * {
		margin-top: 1.25rem;
	}

	.hdc-guide .hdc-gd-prose > :first-child {
		margin-top: 0;
	}

	.hdc-guide .hdc-gd-prose h2 {
		margin-top: 3rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--gd-line);
		color: var(--ink);
		font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.08;
		text-wrap: balance;
		scroll-margin-top: calc(var(--sticky) + 1rem);
	}

	.hdc-guide .hdc-gd-prose h3 {
		margin-top: 2rem;
		color: var(--ink);
		font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.15;
		text-wrap: balance;
	}

	.hdc-guide .hdc-gd-prose :is(h2, h3) + * {
		margin-top: 0.75rem;
	}

	.hdc-guide .hdc-gd-prose :is(h4, h5, h6) {
		margin-top: 1.75rem;
		color: var(--ink);
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-prose :is(ul, ol) {
		padding-inline-start: 1.375rem;
	}

	.hdc-guide .hdc-gd-prose li + li {
		margin-top: 0.5rem;
	}

	.hdc-guide .hdc-gd-prose li::marker {
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-prose :is(strong, b) {
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-prose a {
		color: var(--ink);
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}

	.hdc-guide .hdc-gd-prose a:hover {
		text-decoration-thickness: 2px;
	}

	.hdc-guide .hdc-gd-prose hr {
		margin-block: 2.5rem;
		border: 0;
		border-top: 1px solid var(--gd-line);
	}

	.hdc-guide .hdc-gd-prose blockquote {
		padding-inline-start: 1.25rem;
		border-inline-start: 3px solid var(--gd-line);
		color: var(--ink);
	}

	.hdc-guide .hdc-gd-prose img {
		height: auto;
	}

	/* Tables: the whole sheet's width, a spec-sheet head; the box scrolls sideways only when a table is wider. */
	.hdc-guide .hdc-gd-prose .hdc-gd-table {
		margin-top: 1.75rem;
		overflow-x: auto;
		border: 1px solid var(--gd-line);
	}

	.hdc-guide .hdc-gd-prose .hdc-gd-table + * {
		margin-top: 1.75rem;
	}

	.hdc-guide .hdc-gd-table table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.875rem;
		line-height: 1.4;
		font-variant-numeric: tabular-nums;
	}

	.hdc-guide .hdc-gd-table :is(th, td) {
		padding: 0.625rem 0.5rem;
		border-top: 1px solid var(--gd-line);
		text-align: left;
		vertical-align: top;
		overflow-wrap: normal;
	}

	.hdc-guide .hdc-gd-table thead th {
		border-top: 0;
		background: var(--ink);
		color: var(--white);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.hdc-guide .hdc-gd-table tbody tr:nth-child(even) {
		background: var(--gd-tint);
	}

	.hdc-guide .hdc-gd-table tbody tr > :first-child {
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-table a {
		text-underline-offset: 0.15em;
	}

	/* ---------------------------------------------------------------- Machines in this guide */
	.hdc-guide .hdc-gd-machines {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gd-gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-guide .hdc-gd-machine {
		display: flex;
		position: relative;
		flex-direction: column;
		min-width: 0;
		background: var(--white);
	}

	.hdc-guide .hdc-gd-machine__media {
		aspect-ratio: 4 / 3;
		border-bottom: 1px solid var(--gd-line);
		--gd-inset: 0.75rem;
	}

	.hdc-guide .hdc-gd-machine__body {
		display: grid;
		align-content: start;
		gap: 0.5rem;
		padding: 0.875rem;
	}

	.hdc-guide .hdc-gd-machine__name {
		margin: 0;
		color: var(--ink);
		font-size: 0.9375rem;
		font-weight: 700;
		line-height: 1.3;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-guide .hdc-gd-machine__name a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-guide .hdc-gd-machine:has(a:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-guide .hdc-gd-machine__name a:focus-visible {
		outline: none;
	}

	.hdc-guide .hdc-gd-machine__lead {
		display: grid;
		margin: 0;
	}

	.hdc-guide .hdc-gd-machine__figure {
		color: var(--ink);
		font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.05;
	}

	.hdc-guide .hdc-gd-machine__what {
		color: var(--gd-mute);
		font-size: 0.8125rem;
	}

	.hdc-guide .hdc-gd-machine__specs {
		display: grid;
		gap: 0.375rem;
		margin: 0.25rem 0 0;
		padding-top: 0.625rem;
		border-top: 1px solid var(--gd-line);
		font-size: 0.8125rem;
	}

	.hdc-guide .hdc-gd-machine__specs div {
		display: grid;
	}

	.hdc-guide .hdc-gd-machine__specs dt {
		color: var(--gd-mute);
	}

	.hdc-guide .hdc-gd-machine__specs dd {
		margin: 0;
		color: var(--ink);
		font-weight: 600;
	}

	/* ---------------------------------------------------------------- Related collections */
	.hdc-guide .hdc-gd-cols {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
		gap: var(--gd-gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-guide .hdc-gd-col {
		display: flex;
		position: relative;
		align-items: center;
		gap: 1rem;
		min-width: 0;
		padding: 0.75rem 1.25rem 0.75rem 0.75rem;
		background: var(--white);
	}

	.hdc-guide .hdc-gd-col__media {
		flex: none;
		width: 4.5rem;
		height: 4.5rem;
		background: var(--gd-tint);
		--gd-inset: 0.25rem;
	}

	.hdc-guide .hdc-gd-col__words {
		display: grid;
		flex: 1;
		gap: 0.25rem;
		min-width: 0;
	}

	.hdc-guide .hdc-gd-col__name {
		margin: 0;
		color: var(--ink);
		font-size: 1.25rem;
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.1;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-guide .hdc-gd-col__name a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-guide .hdc-gd-col:has(a:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-guide .hdc-gd-col__name a:focus-visible {
		outline: none;
	}

	.hdc-guide .hdc-gd-col__go {
		width: 1.25rem;
		height: 1.25rem;
		color: var(--ink);
	}

	/* ---------------------------------------------------------------- Guide cards */
	.hdc-guide .hdc-gd-list {
		display: grid;
		gap: var(--gd-gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-guide .hdc-gd-list__item {
		display: grid;
		min-width: 0;
	}

	.hdc-guide .hdc-gd-card {
		display: flex;
		position: relative;
		flex-direction: column;
		min-width: 0;
		background: var(--white);
	}

	.hdc-guide .hdc-gd-card__media {
		flex: none;
		height: 13rem;
		background: var(--gd-tint);
	}

	.hdc-guide .hdc-gd-card__body {
		display: grid;
		flex: 1;
		grid-template-rows: auto auto 1fr auto;
		gap: 0.625rem;
		padding: 1.25rem var(--gd-pad) 1.25rem;
	}

	.hdc-guide .hdc-gd-card--grid .hdc-gd-card__body {
		padding-inline: 1.25rem;
	}

	.hdc-guide .hdc-gd-card__title {
		margin: 0;
		color: var(--ink);
		font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.08;
		text-wrap: balance;
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-guide .hdc-gd-card__title a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-guide .hdc-gd-card:has(a:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-guide .hdc-gd-card__title a:focus-visible {
		outline: none;
	}

	.hdc-guide .hdc-gd-card:hover .hdc-gd-card__title a {
		text-decoration: underline;
	}

	.hdc-guide .hdc-gd-card__excerpt {
		margin: 0;
		color: var(--body);
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	.hdc-guide .hdc-gd-card--grid .hdc-gd-card__excerpt {
		display: -webkit-box;
		align-self: start;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.hdc-guide .hdc-gd-card__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.375rem 1.25rem;
		margin: 0.25rem 0 0;
		padding-top: 0.75rem;
		border-top: 1px solid var(--gd-line);
		color: var(--ink);
		font-size: 0.8125rem;
		font-weight: 600;
	}

	.hdc-guide .hdc-gd-card__meta > span {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
	}

	.hdc-guide .hdc-gd-card__meta .hdc-gd-ico {
		width: 1rem;
		height: 1rem;
	}

	.hdc-guide .hdc-gd-card__go {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0.25rem 0 0;
		color: var(--ink);
		font-size: 1rem;
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-card__go .hdc-gd-ico {
		width: 1.25rem;
		height: 1.25rem;
	}

	.hdc-guide .hdc-gd-card--feature .hdc-gd-card__media {
		height: 15rem;
	}

	.hdc-guide .hdc-gd-card--feature .hdc-gd-card__title {
		font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.625rem);
		line-height: 1.02;
	}

	.hdc-guide .hdc-gd-card--feature .hdc-gd-card__excerpt {
		max-width: 40rem;
		font-size: 1.0625rem;
	}

	/* A scene photo fills the card's top, 16:9, no frame. */
	.hdc-guide .hdc-gd-card--wide .hdc-gd-card__media {
		height: auto;
		aspect-ratio: 16 / 9;
		--gd-inset: 0px;
	}

	/* ---------------------------------------------------------------- Index head and chips */
	.hdc-guide .hdc-gd-head {
		display: grid;
		gap: 0.75rem;
		padding: 1.25rem 0 1.5rem;
	}

	.hdc-guide .hdc-gd-lead {
		max-width: 44rem;
		margin: 0;
		color: var(--body);
		font-size: 1.125rem;
		line-height: 1.5;
	}

	.hdc-guide .hdc-gd-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-bottom: var(--gd-gap);
	}

	.hdc-guide .hdc-gd-chips[hidden] {
		display: none;
	}

	.hdc-guide .hdc-gd-chip {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		padding: 0.5rem 0.875rem;
		border: 1px solid var(--gd-control);
		background: var(--white);
		color: var(--ink);
		font-size: 0.9375rem;
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-chip:hover {
		border-color: var(--ink);
	}

	.hdc-guide .hdc-gd-chip[aria-pressed="true"] {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--white);
	}

	.hdc-guide .hdc-gd-chip__count {
		min-width: 1.5rem;
		padding: 0.0625rem 0.375rem;
		background: var(--gd-ground);
		color: var(--ink);
		font-size: 0.75rem;
		font-variant-numeric: tabular-nums;
		text-align: center;
	}

	.hdc-guide .hdc-gd-chip[aria-pressed="true"] .hdc-gd-chip__count {
		background: rgb(255 255 255 / 0.18);
		color: var(--white);
	}

	.hdc-guide .hdc-gd-list__item[hidden] {
		display: none;
	}

	.hdc-guide .hdc-gd-none {
		margin: 0;
		color: var(--body);
	}

	/* Page links (the_posts_pagination). */
	.hdc-guide .hdc-gd-pages .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: var(--gd-gap);
	}

	.hdc-guide .hdc-gd-pages .page-numbers {
		display: inline-grid;
		place-items: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding: 0 0.75rem;
		border: 1px solid var(--gd-control);
		background: var(--white);
		color: var(--ink);
		font-weight: 700;
		text-decoration: none;
	}

	.hdc-guide .hdc-gd-pages .page-numbers.current {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--white);
	}

	/* Phones: a grid card is one tight row, the photo beside the words. */
	@media (max-width: 39.99rem) {
		.hdc-guide .hdc-gd-card--grid {
			display: grid;
			grid-template-columns: 6.5rem minmax(0, 1fr);
		}

		.hdc-guide .hdc-gd-card--grid .hdc-gd-card__media {
			height: auto;
			min-height: 7.5rem;
			--gd-inset: 0.5rem;
		}

		.hdc-guide .hdc-gd-card--grid.hdc-gd-card--wide .hdc-gd-card__media {
			aspect-ratio: auto;
			--gd-inset: 0px;
		}

		.hdc-guide .hdc-gd-card--grid .hdc-gd-card__body {
			gap: 0.5rem;
			padding: 0.875rem 1rem;
		}

		.hdc-guide .hdc-gd-card--grid .hdc-gd-card__title {
			font-size: 1.25rem;
		}

		.hdc-guide .hdc-gd-card--grid .hdc-gd-card__meta {
			gap: 0.25rem 0.875rem;
			padding-top: 0.5rem;
		}

		/* A table takes the sheet's full width on a phone, edge to edge. */
		.hdc-guide .hdc-gd-prose .hdc-gd-table {
			margin-inline: calc(-1 * var(--gd-pad));
			border-inline: 0;
		}

		.hdc-guide .hdc-gd-table table {
			font-size: 0.8125rem;
		}

		.hdc-guide .hdc-gd-table :is(th, td) {
			padding: 0.5rem 0.375rem;
		}

		.hdc-guide .hdc-gd-table thead th {
			font-size: 0.6875rem;
			letter-spacing: 0.02em;
		}

		.hdc-guide .hdc-gd-table :is(th, td):first-child {
			padding-left: var(--gd-pad);
		}

		.hdc-guide .hdc-gd-table :is(th, td):last-child {
			padding-right: var(--gd-pad);
		}
	}

	/* ---------------------------------------------------------------- Wider screens */
	@media (min-width: 40rem) {
		.hdc-guide .hdc-gd-machines {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.hdc-guide .hdc-gd-list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.hdc-guide .hdc-gd-list__item--feature {
			grid-column: 1 / -1;
		}

		.hdc-guide .hdc-gd-table :is(th, td) {
			padding: 0.75rem 1rem;
		}

		.hdc-guide .hdc-gd-table table {
			font-size: 0.9375rem;
		}

		.hdc-guide .hdc-gd-hero__media {
			height: 18rem;
		}
	}

	@media (min-width: 48rem) {
		.hdc-guide .hdc-gd-plate {
			display: flex;
			flex-wrap: wrap;
		}

		.hdc-guide .hdc-gd-plate__cell {
			grid-template-columns: none;
			gap: 0.25rem;
			padding: 0.75rem 1.5rem;
		}

		.hdc-guide .hdc-gd-plate__cell:first-child {
			padding-left: 0;
		}

		.hdc-guide .hdc-gd-plate__cell + .hdc-gd-plate__cell {
			border-top: 0;
			border-left: 1px solid var(--gd-line);
		}

		.hdc-guide .hdc-gd-card--feature {
			display: grid;
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		}

		.hdc-guide .hdc-gd-card--feature .hdc-gd-card__media {
			height: auto;
			min-height: 20rem;
			--gd-inset: 2rem;
		}

		/* The featured scene photo fills its half. */
		.hdc-guide .hdc-gd-card--feature.hdc-gd-card--wide .hdc-gd-card__media {
			aspect-ratio: auto;
			--gd-inset: 0px;
		}

		.hdc-guide .hdc-gd-card--feature .hdc-gd-card__body {
			align-content: center;
			grid-template-rows: none;
			gap: 0.875rem;
			padding: var(--gd-pad);
		}
	}

	@media (min-width: 64rem) {
		/* A scene photo: the summary beside the title, its left edge on the rail's, and the
		   photo across the sheet under both, a 21:9 cover crop to the sheet's edges. */
		.hdc-guide .hdc-gd-hero--wide {
			grid-template-columns: minmax(0, 1fr) calc(var(--gd-side) - var(--gd-pad));
			grid-template-areas:
				"head summary"
				"media media";
			column-gap: calc(var(--gd-gap) + var(--gd-pad));
			row-gap: 2rem;
		}

		.hdc-guide .hdc-gd-hero--wide .hdc-gd-hero__head {
			grid-area: head;
		}

		.hdc-guide .hdc-gd-hero--wide .hdc-gd-hero__summary {
			grid-area: summary;
			align-self: end;
		}

		.hdc-guide .hdc-gd-hero--wide .hdc-gd-hero__media {
			grid-area: media;
			/* A height, not aspect-ratio plus max-height: the cap would narrow the box too. */
			aspect-ratio: auto;
			height: clamp(22rem, 33vw, 30rem);
			margin: 0 calc(-1 * var(--gd-pad)) calc(-1 * var(--gd-pad));
		}

		/* A cut-out fills the sheet's right column, the rail's width, edge to edge. */
		.hdc-guide .hdc-gd-hero--media {
			grid-template-columns: minmax(0, 1fr) var(--gd-side);
			grid-template-areas:
				"head media"
				"summary media";
			grid-template-rows: auto 1fr;
			column-gap: calc(var(--gd-gap) + var(--gd-pad));
			row-gap: 1.5rem;
			padding: 0 0 0 var(--gd-pad);
		}

		.hdc-guide .hdc-gd-hero--media .hdc-gd-hero__head {
			grid-area: head;
			padding-top: var(--gd-pad);
		}

		.hdc-guide .hdc-gd-hero--media .hdc-gd-hero__summary {
			grid-area: summary;
			align-self: end;
			margin-bottom: var(--gd-pad);
		}

		.hdc-guide .hdc-gd-hero--media .hdc-gd-hero__media {
			grid-area: media;
			height: auto;
			min-height: var(--gd-side);
			--gd-inset: 2rem;
		}

		.hdc-guide .hdc-gd-layout {
			grid-template-columns: minmax(0, 1fr) var(--gd-side);
			align-items: start;
		}

		.hdc-guide .hdc-gd-toc--fold {
			display: none;
		}

		.hdc-guide .hdc-gd-rail {
			display: block;
			align-self: stretch;
		}

		.hdc-guide .hdc-gd-rail__stick {
			display: grid;
			position: sticky;
			top: calc(var(--sticky) + var(--gd-gap));
			gap: var(--gd-gap);
		}

		.hdc-guide .hdc-gd-toc--rail {
			display: grid;
			gap: 0.75rem;
			padding: 1.5rem;
			background: var(--white);
		}

		.hdc-guide .hdc-gd-sheet {
			padding: 2.5rem 3rem 3rem;
		}

		.hdc-guide .hdc-gd-list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.hdc-guide .hdc-gd-card--feature .hdc-gd-card__media {
			min-height: 24rem;
		}
	}

	@media (min-width: 80rem) {
		.hdc-guide .hdc-gd-machines,
		.hdc-guide .hdc-gd-list:not(.hdc-gd-list--more) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}