/*
 * Editorial surfaces: guide articles, the guide index, category archives,
 * search results and the 404 page.
 *
 * These views used to fall back to bare block-theme defaults while every
 * plugin-rendered page carried the brand styling, so the site visibly broke
 * character the moment a reader opened an article. The tokens below are the
 * theme's own (theme.json presets) with plugin-side fallbacks, so the sheet
 * also renders correctly if the theme is swapped.
 */

:root {
	/* Reading measure. Guide articles were running to 109 characters per
	   line before this; 34rem measured 55, which is tight, so 40rem was
	   chosen on the estimate that it lands around 65.
	   Measured on 7.9.2026 rather than estimated, on the longest prose
	   paragraph of one article in three languages at 1440px, with the average
	   character advance of that paragraph's own text (text length over line
	   count quantises to +-15% at six lines and reported "unchanged" for a
	   column that had narrowed): 40rem carried 85 characters in German, 86 in
	   French, 82 in Luxembourgish. The estimate was low by a third, and the
	   two languages that wrap widest were never in it. Measured across the
	   candidates - 36rem: 76/77/74, 34rem: 72/73/70, 33rem: 70/71/68,
	   32rem: 68/69/66 - 33rem is the one that puts all three languages inside
	   65-72. Colour tokens come from site.css, loaded on every page. */
	--vb-measure: 33rem;
}

/* --------------------------------------------------------------------------
   Article header
   -------------------------------------------------------------------------- */

.vb-article__head {
	max-width: var(--vb-measure);
	margin: 0 auto;
	padding: clamp(24px, 5vw, 56px) 0 0;
}

.vb-article__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 5px 12px 5px 10px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-cream, #f2e7df);
	color: var(--vb-accent-text, #68192e);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

/* post-terms renders links inside the badge, so the container's
   text-decoration never reached them. */
.vb-article__kicker a {
	color: inherit;
	text-decoration: none;
}

.vb-article__kicker a:hover,
.vb-article__kicker a:focus-visible { text-decoration: underline; }

/* The way back to the index, first in the kicker line. The chevron makes the
   pill read as a path - "Guides > Health" - rather than as two words that
   happen to sit next to each other. Not when the crumb is alone: for a guide
   whose only category repeats the word, the crumb replaces the term instead
   of standing in front of it, and a chevron would then point at nothing. */
.vb-article__crumb:not(:last-child)::after {
	content: "\203A";
	margin-left: 8px;
	opacity: 0.6;
}

.vb-article__kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vb-primary, #b66a80);
}

/* The front page wants a 56px headline; inside a reading column that
   breaks over five lines. The cap is 44px since 7.9.: measured, the article
   headline was 46.4px while the brand hero on the front page is 44px - the
   editorial exception outranked the strongest brand moment. Level with it,
   not above it. */
.vb-article .vb-page-head__title {
	font-family: var(--vb-display);
	font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin-bottom: 0;
}

.vb-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 18px 0 0;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-label, 0.9rem);
}

.vb-article__meta > * + *::before {
	content: "·";
	margin-right: 14px;
	opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Reading column
   -------------------------------------------------------------------------- */

.vb-article__body {
	max-width: var(--vb-measure);
	margin: 0 auto;
	padding-bottom: clamp(32px, 6vw, 72px);
	font-size: var(--vb-text-lead, 1.0625rem);
	line-height: 1.72;
	color: var(--vb-ink, #30272b);
}

.vb-article__body > * + * { margin-top: 1.15em; }

.vb-article__body h2 {
	margin: 2.2em 0 0.55em;
	font-family: var(--vb-display);
	font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.95rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
}

.vb-article__body h3 {
	margin: 1.9em 0 0.4em;
	font-size: clamp(1.12rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.25;
}

/* A hairline above every h2 gives the long read a rhythm without adding
   decoration that would compete with the headline typeface. */
.vb-article__body h2::before {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-bottom: 0.7em;
	border-radius: 2px;
	background: var(--vb-primary, #b66a80);
	opacity: 0.55;
}

.vb-article__body ul,
.vb-article__body ol { padding-left: 1.25em; }
.vb-article__body li + li { margin-top: 0.45em; }
.vb-article__body li::marker { color: var(--vb-accent-text, #68192e); }

.vb-article__body a {
	color: var(--vb-accent-text, #68192e);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Guide disclaimer + booking call to action
   (previously unstyled on posts because profile.css was never enqueued there)
   -------------------------------------------------------------------------- */

.vb-guide__disclaimer {
	max-width: var(--vb-measure);
	margin: 2.6em auto 1.2em;
	padding: 18px 20px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-left: 4px solid var(--vb-primary, #b66a80);
	border-radius: 0 var(--vb-radius-sm, 11px) var(--vb-radius-sm, 11px) 0;
	background: var(--vb-surface, #f2e7df);
	font-size: var(--vb-text-body, 1rem);
	line-height: 1.6;
}

.vb-guide__disclaimer p { margin: 0; }

/* The notice on a language version no native speaker has read. Quieter than
   the disclaimer on purpose: it qualifies the wording, not the advice, and it
   sits ABOVE the article, where a reader deciding whether to trust what
   follows can see it before they read. */
.vb-guide__mt {
	max-width: var(--vb-measure);
	margin: 0 auto 1.6em;
	padding: 12px 16px;
	border: 1px dashed var(--vb-line-strong, #c7b1aa);
	border-radius: var(--vb-radius-sm, 11px);
	background: var(--vb-surface, #f2e7df);
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-small, 0.9375rem);
	line-height: 1.55;
}

.vb-guide__mt p { margin: 0; }

.vb-guide__cta {
	max-width: var(--vb-measure);
	margin: 1.2em auto 0;
	padding: clamp(22px, 4vw, 30px);
	border-radius: var(--vb-radius, 16px);
	/* NOT --vb-ink: that token flips to #e6f4ec in the dark scheme, and the
	   white below does not flip with it - the call to action of every guide
	   page measured 1.13:1 in dark mode, the button on it 2.28:1. This is
	   the same failure the button comment below already describes; the box
	   itself was missed. --vb-primary-darker is a fill, and fills stay put
	   (site.css: "Fills stay put: their white text keeps its contrast either
	   way"), so white on it is 16.6:1 in both schemes, the button on it 6.4:1. */
	background: var(--vb-primary-darker, #300b17);
	color: #fff;
	text-align: center;
}

.vb-guide__cta p {
	margin: 0 0 14px;
	font-size: 1.12rem;
	font-weight: 600;
}

/* The button already declared the right colour - --vb-ink on mint is 5.95:1 -
   and never got to use it: `.vb-article__body a` (0-1-1) outranks
   `.vb-guide__ctabtn` (0-1-0), and the CTA is injected into exactly that
   wrapper, so the generic link colour won and the button measured 2.08:1.
   This is a specificity fix; the value below was correct all along. */
.vb-guide__ctabtn,
.vb-article__body a.vb-guide__ctabtn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: var(--vb-radius-sm, 11px);
	background: var(--vb-primary, #b66a80);
	/* The button system draws a 1px edge in --vb-primary-dark, which on this
	   brighter fill measured 2.86:1 - 18 findings, one per guide page and
	   width. The boundary of this control is its fill against the ink band
	   it sits on, so the edge is the fill. */
	border: 1px solid var(--vb-primary, #b66a80);
	/* The fill is bright green in BOTH schemes, so its text must be the
	   colour that stays dark - --vb-ink flips light and vanished on it. */
	color: var(--vb-primary-darker, #300b17);
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.vb-guide__ctabtn:hover,
.vb-guide__ctabtn:focus-visible {
	/* A literal white, not --vb-base: the text above is a FIXED dark colour,
	   so its ground has to be fixed light too. --vb-base flips to #122b22 in
	   the dark scheme and the hover state measured 1.1:1 there - the same
	   token-flip as the box, one state further in. */
	background: #fff;
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   The article's own questions

   Imported into vb_guide_faq from the start and emitted as FAQPage schema
   ever since, but never rendered - so four questions per article in four
   languages were invisible to the reader and visible only to a crawler.
   -------------------------------------------------------------------------- */

.vb-guide__faq {
	max-width: var(--vb-measure);
	margin: 2.6em auto 0;
}

.vb-guide__faq h2 { margin-top: 0; }

.vb-guide__faqitem {
	border-bottom: 1px solid var(--vb-line, #d9c7c1);
}

.vb-guide__faqitem:first-of-type {
	border-top: 1px solid var(--vb-line, #d9c7c1);
}

.vb-guide__faqq {
	padding: 14px 2px;
	/* A summary is a control: it has to clear the 40px target the rest of the
	   site was measured to (M-070), and 14px above and below a 1.5-line
	   question does that at every width. */
	min-height: 40px;
	box-sizing: border-box;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.45;
	list-style-position: outside;
}

.vb-guide__faqq::marker { color: var(--vb-accent-text, #68192e); }

.vb-guide__faqq:focus-visible {
	outline: 2px solid var(--vb-primary, #b66a80);
	outline-offset: 2px;
}

.vb-guide__faqa {
	margin: 0 0 16px;
	padding-left: 1.1em;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-body, 1rem);
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Card grids: guide index, archives, search results
   -------------------------------------------------------------------------- */

.vb-guides,
.vb-cardlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.vb-guides__item,
.vb-cardlist__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-base, #fbf7f2);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* The archive cards mirror the guide index: motif on top, text below, and
   the headline in ink - a page of green headlines reads as a link list, not
   as a magazine. */
.vb-cardlist__item { gap: 0; padding: 0; }

/* Padding on the elements themselves: margins here lose to the block
   editor's own rules, and the cover has to stay edge to edge. */
.vb-cardlist__link { padding: 20px 22px 0; margin: 0; }
.vb-cardlist__excerpt { padding: 8px 22px 24px; margin: 0; }

/* The figure itself came out zero-wide inside the flex card, so the 100%
   rules below had nothing to be a percentage of and the whole cover
   collapsed. Stretch it explicitly, and make the block's inner link a block
   too - it is inline by default. Verified in the browser before shipping.  */
.vb-cardlist__cover { margin: 0; width: 100%; align-self: stretch; }
.vb-cardlist__cover > a { display: block; width: 100%; }
.vb-cardlist__cover img,
.vb-cardlist__cover .vb-guideart { display: block; width: 100%; }
.vb-cardlist__link,
.vb-cardlist__link a { color: var(--vb-ink, #30272b); text-decoration: none; }
.vb-cardlist__item:hover .vb-cardlist__link a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   The guide index as a hub (7.9.)

   Before: one <ul> of fourteen identical cards, ordered by import timestamp -
   and twelve of fifteen articles carry the same timestamp to the minute, so
   neither the order nor the lead slot meant anything. Now four situations,
   three densities, and one slot that follows the calendar. The densities are
   the point: a list you scan must not look like a shelf you browse.
   -------------------------------------------------------------------------- */

.vb-guides__lead {
	max-width: 62ch;
	margin: 0 0 1.8rem;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-lead, 1.0625rem);
	line-height: 1.6;
}

/* Four chips, one per situation, above the fold on every width. Without them
   a phone reader sees the lead and one article and has to scroll to find out
   that the page has an order. 44px is the comfort target the product keeps
   for primary actions. */
.vb-guides__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.8rem;
}

.vb-guides__jumplink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	/* --vb-field-line, not --vb-line: a chip is a control, and a control's
	   own border owes 3:1 against what surrounds it (WCAG 1.4.11). Measured
	   after the first deploy, --vb-line came out at 1.28:1 against white and
	   the audit reported all fifteen of them. */
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-base, #fbf7f2);
	color: var(--vb-ink, #30272b);
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	text-decoration: none;
}

.vb-guides__jumplink:hover,
.vb-guides__jumplink:focus-visible {
	border-color: var(--vb-primary, #b66a80);
	background: var(--vb-tint, #f3e2e7);
}

/* The timely slot: one article, chosen by the month, with the rule printed
   under it. An unexplained rotating slot is a promise; a stated rule is not. */
.vb-guides__now {
	margin: 0 0 2.4rem;
	padding: 18px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-tint, #f3e2e7);
}

.vb-guides__nowlabel {
	margin: 0 0 12px;
	color: var(--vb-accent-text, #68192e);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vb-guides__nowcard {
	display: grid;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}

.vb-guides__nowbody { display: block; }

.vb-guides__nowtitle {
	display: block;
	font-size: 1.25rem;
	font-weight: 650;
	line-height: 1.25;
}

.vb-guides__nowcard:hover .vb-guides__nowtitle,
.vb-guides__nowcard:focus-visible .vb-guides__nowtitle { text-decoration: underline; }

.vb-guides__nowexcerpt {
	display: block;
	margin-top: 6px;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-body, 1rem);
	line-height: 1.55;
}

.vb-guides__nowhint {
	margin: 12px 0 0;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-small, 0.85rem);
}

@media (min-width: 46rem) {
	.vb-guides__nowcard { grid-template-columns: 38% 1fr; align-items: center; gap: 20px; }
}

.vb-guides__cluster { margin: 0 0 2.6rem; }

.vb-guides__clustertitle {
	margin: 0 0 0.9rem;
	font-size: 1.2rem;
	line-height: 1.25;
}

/* The dense form. 44px is the comfort target the product already keeps for
   primary actions; a list of links is exactly where it earns its keep. */
.vb-guides__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vb-guides__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 6px 0;
	border-bottom: 1px solid var(--vb-line, #d9c7c1);
}

.vb-guides__row:last-child { border-bottom: 0; }

.vb-guides__rowlink {
	flex: 1 1 auto;
	color: var(--vb-ink, #30272b);
	font-size: var(--vb-text-lead, 1.0625rem);
	font-weight: 550;
	line-height: 1.35;
	text-decoration: none;
}

.vb-guides__rowlink:hover,
.vb-guides__rowlink:focus-visible { text-decoration: underline; }

.vb-guides__rowmeta {
	flex: 0 0 auto;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-small, 0.85rem);
	font-variant-numeric: tabular-nums;
}

/* Situation one: what cannot wait. A left rule, not a red panel - the page
   must not look alarmed to a reader who is only browsing. */
.vb-guides__cluster--now .vb-guides__row {
	padding-left: 12px;
	border-left: 3px solid var(--vb-danger-text, #b52216);
	border-bottom-color: transparent;
}

/* Situation two: what Luxembourg requires. This is the section nobody else
   localises, so it is the one that gets its own surface. */
.vb-guides__cluster--duty .vb-guides__rows {
	padding: 4px 18px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-cream, #f2e7df);
}

.vb-guides__cluster--duty .vb-guides__row:last-child { border-bottom: 0; }

/* The note under a thin exit, on the article. */
.vb-guide__ctanote {
	margin: 10px 0 0;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-small, 0.85rem);
}

.vb-guides__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }

/* The motif is generated artwork, not a photograph: on a phone it was 192px
   of a 417px card, and fourteen cards made 5 838px of list. A wider strip
   keeps the motif recognisable and gives the list back about 770px. */
@media (max-width: 40rem) {
	.vb-guides__item .vb-guideart,
	.vb-cardlist__item .vb-guideart {
		aspect-ratio: 40 / 15;
	}
}

.vb-guides__cover { display: block; text-decoration: none; }

/* The lead article spans the full width on roomy screens and puts its motif
   beside the text rather than above it. */
@media (min-width: 52rem) {
	.vb-guides__item--lead { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
	/* min-width: 0 here too, and it is the bigger half of the bug: with the
	   default min-width: auto the cover's own artwork set its minimum, so it
	   rendered 594px wide instead of the 42% (341px) it asks for and squeezed
	   the text into 216px. The basis is honoured now. */
	.vb-guides__item--lead .vb-guides__cover { flex: 0 0 42%; min-width: 0; }
	.vb-guides__item--lead .vb-guideart { height: 100%; min-height: 15rem; }
	/* min-width: 0 - a flex item defaults to min-width: auto, so the body's
	   longest word set a floor the 58% left over could not meet. The item is
	   overflow: hidden, so the excess simply vanished: on a tablet 51px of the
	   lead article's own text was cut off with nothing to show it. */
	.vb-guides__item--lead .vb-guides__body { justify-content: center; padding: 30px 34px; min-width: 0; }
	.vb-guides__item--lead .vb-guides__link { font-size: 1.5rem; overflow-wrap: anywhere; }
	.vb-guides__item--lead .vb-guides__excerpt { font-size: var(--vb-text-body, 1rem); }
}

/* The generated cover motifs moved to guide-art.css: their rules were
   written for the home page teaser ("small square variant for the homepage
   teaser") and lived in a sheet the home page never loads. Measured: the
   tile rendered 332px tall instead of 152 and the teaser filled 1 606px of
   a 390px phone - two screens for three links. */

.vb-guides__item:hover,
.vb-cardlist__item:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--vb-primary, #b66a80) 45%, transparent);
	box-shadow: 0 12px 28px -18px rgba(48, 39, 43, 0.45);
}

.vb-guides__link,
.vb-cardlist__link {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vb-ink, #30272b);
	text-decoration: none;
}

.vb-guides__item:hover .vb-guides__link,
.vb-cardlist__item:hover .vb-cardlist__link { text-decoration: underline; }

.vb-guides__excerpt,
.vb-cardlist__excerpt {
	margin: 0;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-label, 0.9rem);
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.vb-notfound {
	max-width: 42rem;
	margin: clamp(32px, 8vw, 88px) auto;
	padding: 0 20px;
	text-align: center;
}

.vb-notfound__code {
	margin: 0;
	font-family: var(--vb-display, inherit);
	font-size: clamp(4rem, 3rem + 8vw, 8rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--vb-accent-text, #68192e);
	opacity: 1;
}

.vb-notfound__title { margin: 0.3em 0 0.35em; }
.vb-notfound__lead { margin: 0 auto 1.6em; max-width: 30rem; color: var(--vb-muted, #6b5b60); }

.vb-notfound__search {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 1.4em;
}

.vb-notfound__search input {
	/* Control boundary, not a decorative hairline: --vb-line is 1.28:1.
	   --vb-field-line exists for exactly this and measures 3.76:1. */
	flex: 1 1 260px;
	max-width: 360px;
	padding: 12px 14px;
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-base, #fbf7f2);
	font: inherit;
}

/* The button is a .vb-btn (M-109): it used to be the one black pill on the site. */
@media ( max-width: 40rem ) {

	/* Same rule the search form follows: on a phone the button ends the
	   row instead of sitting in it. .vb-btn, not `button` - the button
	   system's test forbids that selector in this file. */
	.vb-notfound__search .vb-btn {
		width: 100%;
	}
}


.vb-notfound__links { color: var(--vb-muted, #6b5b60); }
.vb-notfound__links a { color: var(--vb-accent-text, #68192e); }

@media (prefers-reduced-motion: reduce) {
	.vb-guides__item,
	.vb-cardlist__item,
	.vb-guide__ctabtn { transition: none; }
}

/* --------------------------------------------------------------------------
   Archive / search heads
   -------------------------------------------------------------------------- */

.vb-page-head__lead {
	max-width: var(--vb-measure);
	margin: 0.6em 0 0;
	color: var(--vb-muted, #6b5b60);
}

.vb-page-head__search {
	max-width: 30rem;
	margin-top: 18px;
}

.vb-page-head__search .wp-block-search__input {
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-pill, 999px) 0 0 var(--vb-radius-pill, 999px);
	padding: 11px 16px;
	background: var(--vb-base, #fbf7f2);
}

.vb-page-head__search .wp-block-search__button {
	border: 0;
	border-radius: 0 var(--vb-radius-pill, 999px) var(--vb-radius-pill, 999px) 0;
	padding: 11px 20px;
	background: var(--vb-ink, #30272b);
	color: #fff;
	font-weight: 700;
}

.vb-cardquery { margin-top: clamp(20px, 4vw, 36px); }

.vb-pagination {
	margin-top: clamp(24px, 5vw, 44px);
	gap: 10px;
	font-weight: 600;
}

.vb-pagination a { color: var(--vb-accent-text, #68192e); text-decoration: none; }
.vb-pagination a:hover { text-decoration: underline; }
.vb-pagination .current { color: var(--vb-ink, #30272b); }

/* Reading time and the article's own contents. Twelve guides listed with
   nothing to tell a five-minute read from a twenty-minute one meant opening
   each of them to find out. */
.vb-guides__meta {
	margin: 0.15rem 0 0;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
	/* The reading column caps direct children of .entry-content at 70ch, and
	   `ch` scales with the element's own font size: at 13.6px this line got a
	   554px cap inside a 640px column and sat 43px in from the text above it.
	   A one-line label needs no measure. */
	max-width: none;
}

.vb-guides__toc {
	margin: 0 0 1.4rem;
	padding: 0.9rem 1.1rem;
	background: var(--vb-neutral-soft, #efe9e6);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-guides__toc-title {
	margin: 0 0 0.4rem;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vb-muted, #6b5b60);
}

.vb-guides__toc ol {
	margin: 0;
	padding-left: 1.2rem;
}

.vb-guides__toc li + li {
	margin-top: 0.25rem;
}

/* On the phone the head of an article was pure furniture: measured at 375px,
   the cover motif sat at y=347, the reading line at 510, the contents list at
   533 and 246px tall, and the first sentence of the article did not start
   until y=801 - below the fold on an iPhone SE. On the emergency article that
   is a usability defect with consequences, not a matter of taste.

   The contents list goes to two columns (its entries are short headings, and
   there are four of them), which halves its height. The motif keeps its place
   but becomes a band: it is generated decoration, it carries no information,
   and it should not cost a third of the first screen. Together this lifts the
   first sentence above the fold. */
@media (max-width: 39.99rem) {
	.vb-guides__toc ol {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 1rem;
	}

	.vb-guides__toc li + li { margin-top: 0; }

	.vb-guideart--banner { aspect-ratio: 40 / 9; }
}

.vb-guides__toc a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vb-tap-min, 24px);
	color: var(--vb-ink, #30272b);
}