/*
 * The Protein Index: the lists at /best/ and the hub (guides-cpt spec D14, §4).
 * Enqueued by mu-plugin/proteinindex/guides.php on guide views, after
 * Foundry's foundry-guides sheet.
 *
 * Rule for this file (check 5 reads it, tests/manual/guides-offline-selftest.php):
 * nothing here may add, hide or shrink text. No `content:` holding text, and
 * no display:none, visibility:hidden, font-size:0, opacity:0, text-indent or
 * clip under .foundry-guide-content, .is-style-tpi-brand or a .tpi- class.
 */

/*
 * G1, "The Label Shelf" (desk ruling mahi-comms#238 6565970717; boards in
 * docs/design/guides-1101 on design/guides-1101). Sizes, weights and rules are
 * the boards'; colours are the theme's tokens (brand.css :root), which carry
 * the boards' literals: ink #1C2733, paper #FBFAF7, blue #2A5DA8, muted
 * #5A6873, verified green #2E7D4F. Fonts are the three the theme already
 * loads (theme.json fontFace): Inter, IBM Plex Mono and Source Serif 4.
 */

/* --- The page: one wide column; prose keeps its reading width ---------- */

/*
 * Why the strip and the glance table sat left of the text: the content box
 * had no layout of its own here, so each child took whatever width and
 * margins the parent sheet gave its type (prose centred at a reading width,
 * a <figure> or a <div> not). This sets one wide column, 1160px with 20px
 * gutters, and every child starts at its left edge: prose stops at 46em,
 * the strip, the tables and the cards run the full width.
 */
/* The page colour on both views: Foundry paints main white from this variable. */
.foundry-guide-single,
.foundry-guides-hub {
	--foundry-guides-bg: var(--tpi-paper);
}
.foundry-guide-single .foundry-guide-article {
	width: 100%;
	max-width: none;
}
/* Long unbroken text (a maker URL, a registry link) breaks on phones, on `new` and fallback lists alike. */
.foundry-guide-single .foundry-guide-content p,
.foundry-guide-single .foundry-guide-content li {
	overflow-wrap: anywhere;
}
.foundry-guide-single .foundry-guide-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 24px;
	width: min(1160px, 100% - 40px);
	max-width: none;
	margin-inline: auto;
	color: var(--tpi-ink);
	font-family: var(--tpi-font-body);
	font-size: 16px;
	line-height: 1.6;
}
.foundry-guide-single .foundry-guide-content > * {
	grid-column: 1 / -1;
	width: auto;
	max-width: 46em;
	margin-inline: 0;
	box-sizing: border-box;
}
.foundry-guide-single .foundry-guide-content > .foundry-guide-masthead,
.foundry-guide-single .foundry-guide-content > .tpi-pack-strip,
.foundry-guide-single .foundry-guide-content > .wp-block-table,
.foundry-guide-single .foundry-guide-content > .is-style-tpi-brand,
.foundry-guide-single .foundry-guide-content > .foundry-faq {
	max-width: none;
}

/* Section heads: the boards' h2 with a 6px ink rule above. */
.foundry-guide-single .foundry-guide-content > h2 {
	margin: 56px 0 14px;
	padding-top: 16px;
	border-top: 6px solid var(--tpi-ink);
	font-family: var(--tpi-font-body);
	font-size: 44px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
	max-width: none;
}

/* D14: the first signed paragraph takes the deck's look (the hero deck is empty). */
.foundry-guide-content > p:first-of-type,
.foundry-guide-content .foundry-guide-masthead + p,
.foundry-guide-content .tpi-pack-strip + p {
	font-family: var(--tpi-font-heading);
	font-size: 21px;
	line-height: 1.5;
	color: var(--tpi-ink);
}

/* --- Masthead: no band; the big sans h1, its heavy rule, the panel ------ */

/*
 * Foundry's guides.css sets the hero's inner, title and byline at (0,3,0)
 * (`.foundry-guide-masthead > .foundry-guide-hero .foundry-guide-hero__title`,
 * white on its band), so these restate them at (0,4,0) (desk ruling
 * mahi-comms#238 6566748007 cause 2). Foundry keeps the eyebrow hidden;
 * the board has none.
 */
.foundry-guide-single .foundry-guide-masthead {
	background: none;
	color: var(--tpi-ink);
}
.foundry-guide-single .foundry-guide-breadcrumb {
	padding: 18px 0;
	font-family: var(--tpi-font-data);
	font-size: 12.5px;
	color: var(--tpi-muted);
}
.foundry-guide-single .foundry-guide-breadcrumb .foundry-guide-breadcrumb__inner {
	max-width: none;
	margin: 0;
}
.foundry-guide-single .foundry-guide-breadcrumb a {
	color: var(--tpi-blue);
	text-decoration: none;
}
.foundry-guide-single .foundry-guide-breadcrumb a:hover {
	color: var(--tpi-blue-deep);
	text-decoration: underline;
}
.foundry-guide-single .foundry-guide-breadcrumb span {
	color: var(--tpi-muted);
}
.foundry-guide-single .foundry-guide-masthead > .foundry-guide-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 64px;
	align-items: start;
	margin: 0;
	padding: 8px 0 36px;
	background: none;
	color: var(--tpi-ink);
	min-height: 0;
}
.foundry-guide-single .foundry-guide-masthead > .foundry-guide-hero:not(:has(.tpi-facts)) {
	grid-template-columns: minmax(0, 1fr);
}
.foundry-guide-single .foundry-guide-masthead > .foundry-guide-hero .foundry-guide-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 6px 0 0;
	text-align: left;
}
.foundry-guide-single .foundry-guide-masthead > .foundry-guide-hero .foundry-guide-hero__title {
	margin: 0;
	padding-bottom: 22px;
	border-bottom: 6px solid var(--tpi-ink);
	font-family: var(--tpi-font-body);
	font-size: 76px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.035em;
	text-wrap: balance;
	color: var(--tpi-ink);
}
.foundry-guide-single .foundry-guide-masthead > .foundry-guide-hero .foundry-guide-hero__deck:empty {
	margin: 0;
}
.foundry-guide-single .foundry-guide-masthead > .foundry-guide-hero .foundry-guide-hero__byline {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--tpi-ink);
}

/* The List Facts panel: 3px frame, the boards' rows and rules. */
.tpi-facts {
	background: var(--tpi-white);
	border: 3px solid var(--tpi-ink);
	padding: 10px 16px 14px;
	color: var(--tpi-ink);
	font-family: var(--tpi-font-body);
}
.tpi-facts__title {
	margin: 0;
	padding: 4px 0 8px;
	border-bottom: 12px solid var(--tpi-ink);
	font-family: var(--tpi-font-body);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--tpi-ink);
}
.tpi-facts__rows {
	margin: 0;
	border-bottom: 12px solid var(--tpi-ink);
}
.tpi-facts__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 16px;
	padding: 5px 0;
	border-bottom: 1px solid var(--tpi-ink);
	font-size: 15px;
}
.tpi-facts__row:last-child {
	border-bottom: 0;
}
.tpi-facts__label {
	margin: 0;
	font-weight: 700;
}
.tpi-facts__value {
	margin: 0;
	font-family: var(--tpi-font-data);
}
.tpi-facts__value[data-tpi-fact="pages"],
.tpi-facts__value[data-tpi-fact="labels"] {
	font-size: 13px;
}
/* Qualify: the big row, with a 6px rule under it. */
.tpi-facts__row:has(> [data-tpi-fact="qualify"]) {
	padding: 4px 0;
	border-bottom: 6px solid var(--tpi-ink);
}
.tpi-facts__row:has(> [data-tpi-fact="qualify"]) .tpi-facts__label {
	font-size: 30px;
}
.tpi-facts__value[data-tpi-fact="qualify"] {
	font-family: var(--tpi-font-body);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.05;
}

/* --- 1a: the pack strip, framed, one cell per bar ----------------------- */

.foundry-guide-content .tpi-pack-strip {
	display: flex;
	margin: 0 0 32px;
	background: var(--tpi-white);
	border: 3px solid var(--tpi-ink);
	border-bottom-width: 12px;
}
.tpi-pack-strip__cell {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	border-right: 1px solid var(--tpi-ink);
	background: var(--tpi-white);
}
.tpi-pack-strip__cell:last-child {
	border-right: 0;
}
.foundry-guide-content .tpi-pack-strip__img {
	display: block;
	width: 100%;
	height: 148px;
	padding: 4px;
	box-sizing: border-box;
	object-fit: contain;
	border-radius: 0;
	background: var(--tpi-white);
}
.tpi-pack-strip__caption {
	flex: 1;
	padding: 6px 8px;
	border-top: 1px solid var(--tpi-ink);
	font-family: var(--tpi-font-data);
	font-size: 11px;
	line-height: 1.3;
	color: var(--tpi-ink);
}
/* No pack shot: the title alone fills the cell. */
.tpi-pack-strip__cell--noshot .tpi-pack-strip__caption {
	display: flex;
	align-items: center;
	min-height: 148px;
	border-top: 0;
}

/* --- 3 and 5a: the framed tables ---------------------------------------- */

.foundry-guide-content .wp-block-table.tpi-glance,
.foundry-guide-content .wp-block-table.tpi-notlisted {
	margin: 0 0 24px;
	padding: 0 16px;
	overflow-x: auto;
	background: var(--tpi-white);
	border: 3px solid var(--tpi-ink);
}
.foundry-guide-content .tpi-glance table,
.foundry-guide-content .tpi-notlisted table,
.foundry-guide-content table.tpi-glance,
.foundry-guide-content table.tpi-notlisted {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}
.foundry-guide-content .tpi-glance th,
.foundry-guide-content .tpi-notlisted th {
	padding: 8px 10px 8px 0;
	border: 0;
	border-bottom: 6px solid var(--tpi-ink);
	font-size: 12.5px;
	font-weight: 700;
	text-align: left;
	vertical-align: bottom;
}
.foundry-guide-content .tpi-glance td,
.foundry-guide-content .tpi-notlisted td {
	padding: 10px 10px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--tpi-ink);
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	vertical-align: top;
}
.foundry-guide-content .tpi-glance td:first-child,
.foundry-guide-content .tpi-notlisted td:first-child {
	font-weight: 700;
}
.foundry-guide-content .tpi-glance td:nth-child(3) {
	font-family: var(--tpi-font-data);
	font-size: 12.5px;
	white-space: nowrap;
}
.foundry-guide-content .tpi-glance td:nth-child(4) a {
	font-family: var(--tpi-font-data);
	font-size: 12.5px;
	overflow-wrap: anywhere;
}
.foundry-guide-content .tpi-glance tbody tr:last-child td,
.foundry-guide-content .tpi-notlisted tbody tr:last-child td {
	border-bottom: 0;
}
.foundry-guide-content .tpi-notlisted blockquote {
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	font-family: var(--tpi-font-data);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
}
.foundry-guide-content .tpi-notlisted blockquote p {
	margin: 0;
}
.foundry-guide-content .tpi-notlisted cite {
	display: block;
	margin-top: 3px;
	font-family: var(--tpi-font-data);
	font-size: 11.5px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	color: var(--tpi-muted);
	overflow-wrap: anywhere;
}

/* --- 4: one label card per bar ------------------------------------------ */

.foundry-guide-content .is-style-tpi-brand {
	display: flex;
	flex-direction: column;
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--tpi-white);
	border: 3px solid var(--tpi-ink);
	border-radius: 0;
	color: var(--tpi-ink);
	min-width: 0;
}
.foundry-guide-content .is-style-tpi-brand > * {
	margin: 0;
}
.foundry-guide-content .is-style-tpi-brand > h3 {
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--tpi-ink);
	font-family: var(--tpi-font-body);
	font-size: 34px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.025em;
}
/* Field rows with hairlines; the flavor block closes on a 12px rule. */
.foundry-guide-content .tpi-card__field {
	padding: 5px 0;
	border-bottom: 1px solid var(--tpi-ink);
	font-size: 15px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.foundry-guide-content .tpi-card__field strong {
	font-weight: 700;
}
.foundry-guide-content .tpi-card__field--flavor {
	padding: 6px 0 8px;
	border-bottom: 12px solid var(--tpi-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}
.foundry-guide-content .tpi-card__field--listing a,
.foundry-guide-content .tpi-card__field--page {
	font-family: var(--tpi-font-data);
	font-size: 12.5px;
}
.foundry-guide-content .tpi-card__field--page strong {
	font-family: var(--tpi-font-body);
	font-size: 15px;
}
/* The verified date as the boards' green stamp. */
.foundry-guide-content .tpi-card__field--verified {
	align-self: flex-start;
	margin: 8px 0;
	padding: 6px 9px;
	border: 1px solid var(--tpi-verified);
	border-radius: 4px;
	background: var(--tpi-white);
	color: var(--tpi-verified);
	font-family: var(--tpi-font-data);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.2;
}
.foundry-guide-content .tpi-card__field--verified strong {
	font-weight: 500;
}
/*
 * The low-sugar and diabetes cards (unit g1-lists, ruling 6570060185): the
 * number sentence takes the flavor row's place under the heading, the NSF line
 * and the listing are field rows, the Source row is set like the product-page
 * row, and its "numbers verified" date is the green stamp, inline.
 */
.foundry-guide-content .tpi-card__field--numbers {
	padding: 6px 0 8px;
	border-bottom: 12px solid var(--tpi-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}
.foundry-guide-content .tpi-card__field--source {
	font-family: var(--tpi-font-data);
	font-size: 12.5px;
}
.foundry-guide-content .tpi-card__field--source strong {
	font-family: var(--tpi-font-body);
	font-size: 15px;
}
.foundry-guide-content .tpi-card__stamp {
	display: inline-block;
	margin: 2px 0;
	padding: 3px 7px;
	border: 1px solid var(--tpi-verified);
	border-radius: 4px;
	background: var(--tpi-white);
	color: var(--tpi-verified);
	font-weight: 500;
	line-height: 1.2;
}
/* The number glance: the values in the data face, kept on one line. */
.foundry-guide-content .tpi-glance--numbers td:not(:first-child),
.foundry-guide-content .tpi-glance--numbers th:not(:first-child) {
	font-family: var(--tpi-font-data);
	font-size: 12.5px;
	white-space: nowrap;
	text-align: right;
}
/* Below 1000px the bar's name keeps a readable width and stays in view while the
   numbers scroll, and the heads wrap. The shadow covers the figure's left padding,
   where scrolled cells would otherwise show beside the name. */
@media (max-width: 999px) {
	.foundry-guide-content .tpi-glance--numbers table {
		border-collapse: separate;
		border-spacing: 0;
	}
	.foundry-guide-content .tpi-glance--numbers th:not(:first-child) {
		white-space: normal;
	}
	.foundry-guide-content .tpi-glance--numbers th:first-child,
	.foundry-guide-content .tpi-glance--numbers td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		min-width: 148px;
		background: var(--tpi-white);
		box-shadow: -16px 0 0 var(--tpi-white);
	}
}
/* The note under a number glance with an Allulose column (guides.php tpi_guides_glance_note). */
.foundry-guide-content .tpi-glance-note {
	margin: -12px 0 24px;
	color: var(--tpi-muted);
	font-size: 13px;
	line-height: 1.45;
}
/* "What X says:" and "Cross-contact, as the brand states it:" heads. */
/* (tpi-card__head, from guides.php, classed by their own text.) */
.foundry-guide-content .is-style-tpi-brand > .tpi-card__head {
	margin-top: 5px;
	padding: 7px 0 5px;
	border-top: 6px solid var(--tpi-ink);
	border-bottom: 1px solid var(--tpi-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}
.foundry-guide-content .is-style-tpi-brand > .tpi-card__head:has(+ .tpi-card__none) {
	border-bottom: 0;
}
/* "We found no cross-contact statement": the boards' dashed box. */
.foundry-guide-content .is-style-tpi-brand > .tpi-card__none {
	margin: 8px 0 10px;
	padding: 12px 14px;
	background: var(--tpi-grid);
	border: 2px dashed var(--tpi-muted);
	font-size: 14px;
	line-height: 1.5;
}
/* The pack image: after the <h3> in the markup (the section opens with its
   signed <h3>), drawn on top of the card here. */
.foundry-guide-content .is-style-tpi-brand > .tpi-card__img {
	order: -1;
	display: block;
	width: calc(100% + 36px);
	max-width: none;
	height: 190px;
	margin: -14px -18px 14px;
	padding: 4px;
	box-sizing: border-box;
	object-fit: contain;
	background: var(--tpi-white);
	border-bottom: 6px solid var(--tpi-ink);
}
/* Quotes in the mono face, each source directly under its own quote. */
.foundry-guide-content .is-style-tpi-brand blockquote {
	margin: 0;
	padding: 7px 0;
	border: 0;
	border-bottom: 1px solid var(--tpi-ink);
	font-family: var(--tpi-font-data);
	font-size: 15.5px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.foundry-guide-content .is-style-tpi-brand blockquote p {
	margin: 0;
}
.foundry-guide-content .is-style-tpi-brand cite {
	display: block;
	margin: 5px 0 0;
	font-family: var(--tpi-font-data);
	font-size: 11.5px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	color: var(--tpi-muted);
	overflow-wrap: anywhere;
}
/* A one-word maker statement ("VEGAN") set large, as the boards draw it. */
.foundry-guide-content .tpi-card__word > p {
	font-family: var(--tpi-font-body);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* --- "Why a Contains line is not enough": the full-width dark band ------- */

/*
 * The heading (class tpi-why, from guides.php) and the one paragraph after
 * it, on ink. The band runs the page's full width by a border-image outset,
 * which paints past the column without widening the page.
 */
.foundry-guide-single .foundry-guide-content > h2.tpi-why,
.foundry-guide-single .foundry-guide-content > h2.tpi-why + p {
	margin: 72px 0 0;
	padding: 56px 0;
	border: 0;
	border-image: linear-gradient(var(--tpi-ink), var(--tpi-ink)) fill 0 / 0 / 0 100vmax;
	color: var(--tpi-white);
	max-width: none;
}
.foundry-guide-single .foundry-guide-content > h2.tpi-why + p {
	font-family: var(--tpi-font-heading);
	font-size: 20px;
	line-height: 1.6;
}
.foundry-guide-single .foundry-guide-content > h2.tpi-why + p + h2 {
	margin-top: 72px;
	border-top: 0;
	padding-top: 0;
}

/* --- How we chose: the rule in a framed box, its three parts as ruled rows - */

/* tpi-rule and its spans come from guides.php; the paragraphs after it sit beside it at desktop. */
.foundry-guide-single .foundry-guide-content > .tpi-rule {
	margin: 0 0 24px;
	padding: 12px 16px 6px;
	background: var(--tpi-white);
	border: 3px solid var(--tpi-ink);
	font-size: 15px;
	line-height: 1.55;
	max-width: none;
}
.foundry-guide-content .tpi-rule__lead {
	display: block;
	padding: 0 0 8px;
	font-family: var(--tpi-font-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}
.foundry-guide-content .tpi-rule__row {
	display: block;
	padding: 8px 0;
	border-top: 1px solid var(--tpi-ink);
}

/* --- The FAQ: hairlines and the boards' type ----------------------------- */

.foundry-guide-content .foundry-faq__heading {
	margin: 56px 0 14px;
	padding-top: 16px;
	border-top: 6px solid var(--tpi-ink);
	font-family: var(--tpi-font-body);
	font-size: 44px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.foundry-guide-content .foundry-faq {
	border-bottom: 1px solid var(--tpi-ink);
}
.foundry-guide-content .foundry-faq details {
	border-top: 1px solid var(--tpi-ink);
	padding: 10px 0;
}
/* The boards' triangle markers in place of Foundry's "+". */
.foundry-guide-content .foundry-faq summary {
	display: list-item;
	list-style: disclosure-closed outside;
	margin-left: 1.1em;
}
.foundry-guide-content .foundry-faq details[open] > summary {
	list-style-type: disclosure-open;
}
/* Foundry's faq style prints after this sheet, its marker at (0,3,2) open;
   these are (0,4,2) closed and (0,5,2) open. */
.foundry-guide-single .foundry-guide-content .foundry-faq .wp-block-details > summary::before,
.foundry-guide-single .foundry-guide-content .foundry-faq .wp-block-details > summary::after,
.foundry-guide-single .foundry-guide-content .foundry-faq .wp-block-details[open] > summary::before,
.foundry-guide-single .foundry-guide-content .foundry-faq .wp-block-details[open] > summary::after {
	content: none;
}
.foundry-guide-content .foundry-faq summary,
.foundry-guide-content .foundry-faq summary h3 {
	font-family: var(--tpi-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}
.foundry-guide-content .foundry-faq summary h3 {
	display: inline;
	margin: 0;
}
.foundry-guide-content .foundry-faq details p {
	margin: 6px 0 0;
	font-family: var(--tpi-font-heading);
	font-size: 17px;
	line-height: 1.55;
}

/* --- More lists: text rows with a hairline, as the boards' foot --------- */

/* Foundry's related aside, outside the content; its placeholder media and
   "List" eyebrow go (desk ruling 6566748007 item 7). Foundry's "More lists"
   stays the label. */
.foundry-guide-single .foundry-guide-related {
	width: min(1160px, 100% - 40px);
	max-width: none;
	margin: 56px auto 0;
	padding: 0;
	background: none;
}
.foundry-guide-single .foundry-guide-related__eyebrow {
	margin: 0 0 14px;
	font-family: var(--tpi-font-body);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--tpi-ink);
}
.foundry-guide-single .foundry-guide-related .foundry-guides-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
}
.foundry-guide-single .foundry-guide-related .foundry-guide-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 48px;
	padding: 6px 0;
	border: 0;
	border-top: 1px solid var(--tpi-ink);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--tpi-ink);
	text-decoration: none;
}
.foundry-guide-single .foundry-guide-related .foundry-guide-card:hover {
	color: var(--tpi-blue);
}
.foundry-guide-single .foundry-guide-related .foundry-guide-card__media,
.foundry-guide-single .foundry-guide-related .foundry-guide-card__eyebrow {
	display: none;
}
.foundry-guide-single .foundry-guide-related .foundry-guide-card__body {
	padding: 0;
}
.foundry-guide-single .foundry-guide-related .foundry-guide-card__title {
	margin: 0;
	font-family: var(--tpi-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

/* --- Desktop: the cards two to a row ------------------------------------- */

@media (min-width: 1000px) {
	.foundry-guide-single .foundry-guide-content > .is-style-tpi-brand:nth-of-type(odd) {
		grid-column: 1;
	}
	.foundry-guide-single .foundry-guide-content > .is-style-tpi-brand:nth-of-type(even) {
		grid-column: 2;
	}
	/* How we chose: the framed rule left, the paragraphs after it right. */
	.foundry-guide-single .foundry-guide-content > .tpi-rule {
		grid-column: 1;
		grid-row: span 3;
		align-self: start;
	}
	.foundry-guide-single .foundry-guide-content > .tpi-rule ~ p {
		grid-column: 2;
		max-width: none;
	}
	/* The band: heading left, text right. */
	/* Side by side, each paints its own side so neither covers the other. */
	.foundry-guide-single .foundry-guide-content > h2.tpi-why {
		grid-column: 1;
		border-image-outset: 0 24px 0 100vmax;
	}
	.foundry-guide-single .foundry-guide-content > h2.tpi-why + p {
		grid-column: 2;
		border-image-outset: 0 100vmax 0 0;
	}
}
@media (max-width: 999px) {
	.foundry-guide-single .foundry-guide-content > h2.tpi-why {
		padding-bottom: 12px;
	}
	.foundry-guide-single .foundry-guide-content > h2.tpi-why + p {
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 28px;
	}
}

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 999px) {
	.foundry-guide-single .foundry-guide-masthead > .foundry-guide-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}
@media (max-width: 600px) {
	.foundry-guide-single .foundry-guide-related .foundry-guides-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.foundry-guide-content .is-style-tpi-brand > .tpi-card__img {
		width: calc(100% + 28px);
		height: 180px;
		margin: -12px -14px 12px;
	}
	.foundry-guide-single .foundry-guide-masthead > .foundry-guide-hero .foundry-guide-hero__title {
		font-size: 42px;
		letter-spacing: -0.03em;
	}
	.foundry-guide-single .foundry-guide-content > h2 {
		font-size: 30px;
	}
	.tpi-facts__title {
		font-size: 38px;
	}
	.tpi-facts__row:has(> [data-tpi-fact="qualify"]) .tpi-facts__label {
		font-size: 26px;
	}
	.tpi-facts__value[data-tpi-fact="qualify"] {
		font-size: 38px;
	}
	.foundry-guide-content > p:first-of-type,
	.foundry-guide-content .foundry-guide-masthead + p,
	.foundry-guide-content .tpi-pack-strip + p {
		font-size: 18px;
	}
	.foundry-guide-content .tpi-pack-strip {
		overflow-x: auto;
	}
	.tpi-pack-strip__cell {
		flex: none;
		width: 96px;
		min-width: 96px;
	}
	.foundry-guide-content .tpi-pack-strip__img {
		height: 96px;
	}
	.tpi-pack-strip__cell--noshot .tpi-pack-strip__caption {
		min-height: 96px;
	}
	.foundry-guide-content .wp-block-table.tpi-glance,
	.foundry-guide-content .wp-block-table.tpi-notlisted {
		padding: 0 0 0 10px;
	}
	.foundry-guide-content .tpi-glance table {
		min-width: 640px;
	}
	.foundry-guide-content .is-style-tpi-brand {
		padding: 12px 14px;
	}
	.foundry-guide-content .is-style-tpi-brand > h3 {
		font-size: 28px;
	}
	.foundry-guide-content .tpi-card__field--flavor,
	.foundry-guide-content .tpi-card__field--numbers {
		font-size: 17px;
	}
	.foundry-guide-content .is-style-tpi-brand blockquote {
		font-size: 14.5px;
	}
	.foundry-guide-content .tpi-card__word > p {
		font-size: 38px;
	}
}

/* --- The hub: one framed giant label ------------------------------------- */

.foundry-guides-hub.tpi-guides-hub {
	width: min(1160px, 100% - 40px);
	margin-inline: auto;
	padding: 0 0 56px;
	color: var(--tpi-ink);
	font-family: var(--tpi-font-body);
}
.tpi-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 0;
	font-family: var(--tpi-font-data);
	font-size: 12.5px;
	color: var(--tpi-muted);
}
.tpi-crumbs a {
	text-decoration: none;
}
.tpi-crumbs [aria-current] {
	color: var(--tpi-ink);
}
.tpi-hub-label {
	margin: 10px 0 32px;
	padding: 14px 24px 8px;
	background: var(--tpi-white);
	border: 3px solid var(--tpi-ink);
	border-bottom-width: 15px;
}
.tpi-hub-label__title {
	margin: 0;
	padding: 2px 0 12px;
	border-bottom: 1px solid var(--tpi-ink);
	font-family: var(--tpi-font-body);
	font-size: 104px;
	line-height: 0.98;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--tpi-ink);
}
.tpi-hub-label__intro {
	margin: 0;
	padding: 10px 0 12px;
	max-width: 44em;
	font-family: var(--tpi-font-heading);
	font-size: 21px;
	line-height: 1.5;
}
.tpi-hub-label__head {
	display: flex;
	justify-content: space-between;
	padding: 5px 0 4px;
	border-top: 12px solid var(--tpi-ink);
	border-bottom: 6px solid var(--tpi-ink);
	font-size: 13px;
	font-weight: 700;
}
.tpi-hub-row {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) minmax(90px, auto);
	gap: 24px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--tpi-ink);
}
.tpi-hub-row:last-child {
	border-bottom: 0;
}
.tpi-hub-row__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	grid-column: 1;
}
.tpi-hub-row__title {
	margin: 0;
	font-family: var(--tpi-font-body);
	font-size: 25px;
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.tpi-rowlink {
	color: var(--tpi-ink);
	text-decoration: none;
}
.tpi-rowlink:hover {
	color: var(--tpi-blue);
}
.tpi-hub-row__sentence {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
}
.tpi-hub-row__review {
	margin: 0;
	font-family: var(--tpi-font-data);
	font-size: 12px;
	line-height: 1.5;
	color: var(--tpi-muted);
}
.tpi-hub-row__packs {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 6px solid var(--tpi-ink);
}
.tpi-hub-row__packs li {
	margin: 0;
}
.tpi-tile {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	background: var(--tpi-white);
	color: var(--tpi-ink);
	text-decoration: none;
}
.tpi-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 4px;
	box-sizing: border-box;
	object-fit: contain;
}
.tpi-tile--noshot {
	display: flex;
	align-items: center;
	padding: 4px;
	box-sizing: border-box;
	font-family: var(--tpi-font-data);
	font-size: 9px;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.tpi-hub-row__count {
	grid-column: 3;
	margin: 0;
	text-align: right;
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* The NSF list: a full-width dark band. */
.tpi-hub-band {
	margin: 0 calc(50% - 50vw) 32px;
	padding: 48px calc(50vw - 50%);
	background: var(--tpi-ink);
	color: var(--tpi-white);
}
.tpi-hub-band__inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tpi-hub-band__title {
	margin: 0;
	font-family: var(--tpi-font-body);
	font-size: 34px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.tpi-hub-band__title a {
	color: var(--tpi-white);
	text-decoration: none;
}
.tpi-hub-band__count {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.tpi-hub-band__review {
	margin: 0;
	font-family: var(--tpi-font-data);
	font-size: 12px;
	color: color-mix(in srgb, var(--tpi-white) 72%, transparent);
}

/* The bars-by-lists table, in the same framed table style. */
.tpi-guides-hub .tpi-bars-by-lists h2 {
	margin: 0 0 14px;
	padding-top: 16px;
	border-top: 6px solid var(--tpi-ink);
	font-family: var(--tpi-font-body);
	font-size: 44px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.tpi-guides-hub .tpi-bars-by-lists__scroll {
	overflow-x: auto;
	padding: 0 16px;
	background: var(--tpi-white);
	border: 3px solid var(--tpi-ink);
}
.tpi-guides-hub .tpi-bars-by-lists__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.tpi-guides-hub .tpi-bars-by-lists__table thead th {
	padding: 8px 10px 8px 0;
	border-bottom: 6px solid var(--tpi-ink);
	font-size: 12.5px;
	font-weight: 700;
	text-align: left;
	vertical-align: bottom;
}
.tpi-guides-hub .tpi-bars-by-lists__table tbody th,
.tpi-guides-hub .tpi-bars-by-lists__table td {
	padding: 10px 10px 10px 0;
	border-bottom: 1px solid var(--tpi-ink);
	text-align: left;
	vertical-align: top;
	line-height: 1.45;
}

@media (max-width: 800px) {
	.tpi-hub-label {
		margin: 6px 0 24px;
		padding: 12px 14px 6px;
	}
	.tpi-hub-label__title {
		font-size: 46px;
	}
	.tpi-hub-label__intro {
		font-size: 17px;
	}
	.tpi-hub-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 12px;
		padding: 12px 0 14px;
	}
	.tpi-hub-row__title {
		font-size: 22px;
	}
	.tpi-hub-row__count {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		font-size: 34px;
	}
	.tpi-hub-row__packs {
		gap: 4px;
		grid-column: 1 / -1;
	}
	.tpi-hub-band {
		padding-block: 28px;
	}
	.tpi-hub-band__title {
		font-size: 26px;
	}
	.tpi-hub-band__count {
		font-size: 24px;
	}
	.tpi-guides-hub .tpi-bars-by-lists h2 {
		font-size: 30px;
	}
}
@media (max-width: 599px) {
	/* Hub pack rows: the five-across grid at phone widths only (desk ruling 6567259658 item 5); from 600 up, packed left. */
	.tpi-hub-row__packs {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.tpi-hub-row__packs .tpi-tile {
		width: 100%;
		height: 62px;
	}
}