/* ===========================================================================
 * The Walnut Grower's Handbook -- walnut-growers-handbook.php ONLY
 *
 * Loaded through $styles_to_load, so it is emitted immediately after
 * css/site.css and only on this page. It is not another numbered section of
 * site.css because its palette is deliberately NOT the site palette (see
 * below), and a set of olive tokens sitting in the global stylesheet is an
 * invitation for the next page to pick them up by accident.
 *
 * IT USED TO SHIP A SECOND TYPEFACE, AND THAT WAS THE FIRST REASON LISTED
 * HERE. It is not any more: on 2026-08-28 the owner asked for the handbook's
 * fonts across the whole site, so Source Serif 4 became the heading face in
 * css/site.css section 2 and its @font-face blocks moved to css/fonts.css.
 * The type on this page is therefore no longer what distinguishes it -- the
 * palette, the title-case headings and the article furniture are.
 *
 * PALETTE -- READ THIS BEFORE CHANGING A COLOUR.
 * The rest of the site is gold (#b39964) on white with square corners and
 * uppercase Source Serif 4 headings; see section 1 of css/site.css. This page follows
 * the "Arboreal Heritage" guidance instead: olive (#555d37), warm paper
 * (#FCFAF7), a sand tint for alternating bands, and title-case serif
 * headings. Every one of those tokens is scoped to .wt-handbook so it cannot
 * reach the shared header, the footer, or any other page. The site header and
 * footer above and below this page keep their own gold. That contrast is a
 * decision, not an oversight -- if it is ever reversed, the change is the
 * --hb-* block below and nothing else.
 *
 * Radius follows the WRITTEN guidance (4px on cards and buttons, 8px on
 * photography) rather than the pill-and-3xl shapes in the mock-up: the site
 * is square-cornered throughout, and a pill button here would be the only one
 * on the domain.
 * ========================================================================= */


/* ---------------------------------------------------------------------------
 * Source Serif 4 IS NO LONGER DECLARED HERE.
 *
 * Its @font-face blocks moved to css/fonts.css on 2026-08-28, when h1-h4
 * became serif site-wide (css/site.css section 2). fonts.css is render-
 * blocking on every page, so the face is available here exactly as before --
 * and the five subsets it now ships (latin, latin-ext, cyrillic,
 * cyrillic-ext, greek) mean a translated chapter no longer needs subsets
 * added by hand, which the old comment in this slot asked for.
 *
 * --hb-serif below is kept rather than folded into --wt-serif: this page's
 * type is a deliberate design decision recorded in the file header, and a
 * token of its own is what lets the handbook be reverted or re-pointed
 * without touching the rest of the site.
 * ------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
 * Scoped tokens
 * ------------------------------------------------------------------------- */
.wt-handbook {
	--hb-olive: #555d37;          /* section headings, trust band, buttons */
	--hb-olive-deep: #3e4522;     /* labels, links, button hover */
	--hb-olive-darkest: #3a4224;
	--hb-sapling: #8ba870;        /* rules, accents, hover state */
	--hb-bark: #4a3f35;           /* card and display headings */

	--hb-paper: #fcfaf7;          /* the page ground */
	--hb-band: #f3f0e9;           /* alternating section band, warm sand */
	--hb-border: #ded5c4;         /* the 1px card and section border */

	--hb-body: #46483d;           /* body copy */
	--hb-body-soft: #6a6c5f;

	--hb-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	--hb-radius: 4px;             /* cards, buttons, chips */
	--hb-radius-img: 8px;         /* photography only */

	background: var(--hb-paper);
	color: var(--hb-body);
}

/* h1-h4 are uppercase site-wide (css/site.css section 2). A serif set in caps
 * reads as a monument rather than a reference book, and every heading on this
 * page is written in title case, so the transform is undone here. Specificity
 * (0,1,1) beats the (0,0,1) element selector; this file also loads after.
 *
 * SINCE 2026-08-28 THE FONT-FAMILY LINE IS A NO-OP AND IS KEPT ON PURPOSE.
 * site.css now sets the same serif on h1-h4 everywhere, so this declaration
 * changes nothing today -- but --hb-serif is this page's own token (see the
 * note where the @font-face blocks used to be), and dropping the line would
 * silently hand the handbook's typography to whatever the site does next. */
.wt-handbook h1,
.wt-handbook h2,
.wt-handbook h3,
.wt-handbook h4 {
	font-family: var(--hb-serif);
	text-transform: none;
	color: var(--hb-bark);
	letter-spacing: normal;
}

/* The eyebrow: a short rule followed by a spaced-out label. */
.hb-eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.hb-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 3rem;
	height: 1px;
	background: var(--hb-sapling);
}
.hb-eyebrow span {
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hb-olive-deep);
}


/* ---------------------------------------------------------------------------
 * 1. Hero
 *
 * A split panel, not the site's .page-header banner: that partial renders a
 * full-bleed photo with the headline ON it, and this design needs the
 * headline on paper BESIDE it. includes/partials/page-hero.php is therefore
 * deliberately not used here -- it renders a different thing, and bending it
 * into this shape would change it for the ten pages that do use it.
 *
 * Full-bleed rather than inside .container, so the photo runs to the edge of
 * the viewport on the right the way the design does.
 * ------------------------------------------------------------------------- */
.hb-hero {
	display: flex;
	flex-direction: column;
	background: var(--hb-paper);
}

.hb-hero-text {
	display: flex;
	align-items: center;
	padding: 3rem var(--wt-space-sm);
}
.hb-hero-text > div { max-width: 36rem; }

.hb-hero h1 {
	font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 1.5rem;
}

.hb-hero-lede {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--hb-body);
	border-left: 4px solid var(--hb-sapling);
	padding-left: 1.25rem;
	margin-bottom: 0;
}

.hb-hero-media {
	position: relative;
	min-height: 300px;
}
.hb-hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim. Fades the photo into the paper on whichever edge meets the text --
 * bottom while stacked, left once the two sit side by side. */
.hb-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, var(--hb-paper), rgba(252, 250, 247, 0) 32%);
}

/* Hidden below 768px, as the design has it. Stacked, the caption would land in
 * the palest part of the scrim -- a near-paper chip on near-paper ground --
 * and it is a credit line, not information the page depends on. */
.hb-hero-caption {
	display: none;
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 2;
	max-width: 17rem;
	padding: .625rem .875rem;
	background: rgba(252, 250, 247, .92);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.35;
	color: var(--hb-olive-deep);
}

@media (min-width: 768px) {
	.hb-hero-caption { display: block; }
}

@media (min-width: 992px) {
	.hb-hero {
		flex-direction: row;
		align-items: stretch;
		min-height: 30rem;
	}
	.hb-hero-text {
		width: 50%;
		justify-content: flex-end;
		padding: 4.5rem 4rem 4.5rem var(--wt-space-sm);
	}
	.hb-hero-media { width: 50%; min-height: 0; }
	.hb-hero-media::after {
		background: linear-gradient(to right, var(--hb-paper), rgba(252, 250, 247, 0) 22%);
	}
}

@media (min-width: 1400px) {
	.hb-hero-text { padding-right: 5rem; }
	.hb-hero-text > div { max-width: 40rem; }
}


/* ---------------------------------------------------------------------------
 * 2. "Start your journey here"
 * ------------------------------------------------------------------------- */
.hb-intro {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
	padding: var(--wt-space-lg) 0;
}
.hb-intro-icon {
	display: block;
	margin: 0 auto 1.25rem;
	color: var(--hb-olive);
	opacity: .55;
}
.hb-intro h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 1rem;
}
.hb-intro p {
	font-size: 1.125rem;
	line-height: 1.65;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.hb-intro { padding: var(--wt-space-md-up) 0; }
}


/* ---------------------------------------------------------------------------
 * 3. Section bands
 *
 * Sections alternate ground -- paper, sand, paper, sand -- and the chapter
 * cards take the OPPOSITE ground from the band they sit on, which is what
 * makes them read as objects placed on a surface rather than panels cut out
 * of it. Both rules are driven by the two modifier classes, so a fifth
 * section only has to alternate the modifier.
 * ------------------------------------------------------------------------- */
.hb-section { padding: var(--wt-space-lg) 0; }
.hb-section--paper { background: var(--hb-paper); }
.hb-section--band  { background: var(--hb-band); }

@media (min-width: 768px) {
	.hb-section { padding: var(--wt-space-md-up) 0; }
}

.hb-section-head { margin-bottom: var(--wt-space); }

.hb-section-thumb {
	width: 6rem;
	height: 6rem;
	margin-bottom: 1.5rem;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid var(--hb-paper);
	box-shadow: 0 4px 12px rgba(62, 69, 34, .14);
}
.hb-section--paper .hb-section-thumb { border-color: var(--hb-band); }
.hb-section-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hb-section-head h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--hb-olive);
	margin-bottom: .75rem;
}
/* "Section 1" sits on its own line above the section's name. */
.hb-section-head h2 .hb-section-num {
	display: block;
	font-family: var(--bs-body-font-family);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hb-olive-deep);
	opacity: .75;
	margin-bottom: .4em;
}
.hb-section-head p { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
 * 4. Chapter cards
 *
 * CSS grid rather than nested Bootstrap columns: the sections hold three,
 * four and five chapters, and a grid keeps a trailing odd card the full width
 * of its own track instead of leaving a hole beside it. Same reasoning as
 * .wt-fields on prices.php (css/site.css section 16).
 * ------------------------------------------------------------------------- */
.hb-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wt-space);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 576px) {
	.hb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hb-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem;
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
	/* The one place the guidance allows elevation: a soft ambient shadow, so
	 * the chapters read as the interactable objects on the page. */
	box-shadow: 0 4px 12px rgba(62, 69, 34, .05);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hb-section--band  .hb-card { background: var(--hb-paper); }
.hb-section--paper .hb-card { background: var(--hb-band); }

.hb-card:hover,
.hb-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(62, 69, 34, .13);
	border-color: var(--hb-sapling);
	text-decoration: none;
}

.hb-card h3 {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: .625rem;
}

.hb-card p {
	flex: 1 1 auto;
	color: var(--hb-body-soft);
	margin-bottom: 1.5rem;
}

.hb-card-more {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hb-olive-deep);
}
.hb-card-more svg { transition: transform .25s ease; }
.hb-card:hover .hb-card-more { color: var(--hb-olive); }
.hb-card:hover .hb-card-more svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.hb-card,
	.hb-card-more svg { transition: none; }
	.hb-card:hover { transform: none; }
	.hb-card:hover .hb-card-more svg { transform: none; }
}


/* ---------------------------------------------------------------------------
 * 5. Trust band and closing call to action
 * ------------------------------------------------------------------------- */
.hb-close { padding: var(--wt-space-lg) 0; background: var(--hb-paper); }

@media (min-width: 768px) {
	.hb-close { padding: var(--wt-space-md-up) 0; }
}

.hb-trust {
	position: relative;
	overflow: hidden;
	padding: 2.5rem;
	border-radius: var(--hb-radius-img);
	background: var(--hb-olive);
	color: var(--hb-paper);
}

@media (min-width: 768px) {
	.hb-trust { padding: 4rem; }
}

.hb-trust h2,
.hb-trust p { color: var(--hb-paper); }

.hb-trust h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 1.25rem;
}

.hb-trust-lede {
	font-size: 1.125rem;
	line-height: 1.65;
	max-width: 48rem;
	margin-bottom: 2.5rem;
	color: rgba(252, 250, 247, .88);
}

/* The decorative mark. aria-hidden in the markup; it must never be the only
 * thing carrying a meaning. */
.hb-trust-mark {
	position: absolute;
	right: -3rem;
	bottom: -4rem;
	width: 22rem;
	height: 22rem;
	opacity: .09;
	pointer-events: none;
	color: var(--hb-paper);
}

.hb-facts {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	padding-top: 2.25rem;
	border-top: 1px solid rgba(252, 250, 247, .22);
}

@media (min-width: 768px) {
	.hb-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hb-fact-num {
	display: block;
	font-family: var(--hb-serif);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: .35rem;
}
.hb-fact-label {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #dee7b6;
}

.hb-cta {
	max-width: 42rem;
	margin: 0 auto;
	padding-top: var(--wt-space-lg);
	text-align: center;
}
.hb-cta h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 1rem;
}
.hb-cta p {
	font-size: 1.125rem;
	line-height: 1.65;
	margin-bottom: 2rem;
}

/* Scoped rather than .btn-primary: that one is black (css/site.css section 5)
 * and this page's action colour is the olive everything else here is built
 * on. Square-ish at 4px, per the guidance -- not the mock-up's pill. */
.hb-btn {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	padding: 1rem 2rem;
	border: 1px solid var(--hb-olive);
	border-radius: var(--hb-radius);
	background: var(--hb-olive);
	color: var(--hb-paper);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.hb-btn:hover,
.hb-btn:focus-visible {
	background: var(--hb-olive-darkest);
	border-color: var(--hb-olive-darkest);
	color: var(--hb-paper);
	text-decoration: none;
}
.hb-btn svg { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
	.hb-btn { transition: none; }
}


/* ---------------------------------------------------------------------------
 * 6. Chapter pages (handbook/*.php)
 *
 * The ARTICLE template, shared by all seventeen chapters. The hub above and the
 * chapters below share one stylesheet and one set of --hb-* tokens: they are one
 * publication, and a reader moving from the hub into a chapter should not feel
 * the ground change.
 *
 * REBUILT 2026-08-24 against the second design pass. The first cut set the
 * measure at 68ch (~610px) and rendered every aside as the same sand box, which
 * on a desktop screen gave one narrow column of grey blocks running to twenty
 * thousand pixels. Two things fixed it and both matter more than any single
 * rule here:
 *
 *   1. THE MEASURE IS 56rem (~896px), not 68ch. Long enough that a four-column
 *      table fits without scrolling and a two-column list block is possible at
 *      all; short enough to read. The line length is held down instead by the
 *      body font size, and prose still sits inside a narrower inner measure --
 *      see .hb-prose > p below.
 *   2. THERE ARE SIX CALLOUT VARIANTS, not one. A long reference chapter with a
 *      single aside treatment reads as a wall and the reader stops seeing the
 *      boxes. What each variant is for is documented at
 *      wt_handbook_callout_variants() in includes/handbook.php; the colours
 *      here are the other half of that decision, so change them together.
 * ------------------------------------------------------------------------- */
.wt-handbook-chapter { background: var(--hb-paper); }

/* Accent tokens used only by chapter pages. Scoped like every other --hb-*. */
.wt-handbook-chapter {
	--hb-warn: #ba1a1a;           /* the one warning callout */
	--hb-warn-bg: #fdeceb;
	--hb-amber: #8c7355;          /* "go and do this in the field" */
	--hb-amber-bg: #faf1e4;
	--hb-quote: #4e4125;          /* a principle, not an instruction */
	--hb-quote-bg: #f6f2ea;
	--hb-good: #4d6b39;           /* table value tones */
	--hb-watch: #8a6d3b;
	--hb-bad: #a33232;
}

/* The article column. Wider than prose alone wants, because the tables and the
 * two-column blocks live in it too. */
/* Used by the closing panel only. The article itself is .hb-layout below. */
.hb-measure {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
}

/* --- The article grid ----------------------------------------------------
 *
 * WHY THIS IS A GRID AND NOT A CENTRED COLUMN. A reference chapter capped at a
 * comfortable reading measure leaves a third of a desktop screen empty, and
 * the honest fix is not to stretch the text -- a 120-character line is worse,
 * not better. It is to put something useful in the space. From 1200px up the
 * contents list becomes a sticky sidebar and the article takes the rest, so
 * the width is spent on navigation rather than on white.
 *
 * Below 1200px they stack, contents first, which is the DOM order.
 * ----------------------------------------------------------------------- */
.hb-layout { display: block; }

@media (min-width: 1200px) {
	.hb-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 17rem;
		gap: 3.5rem;
		align-items: start;
	}
	/* Explicit placement, so the contents can stay FIRST in the DOM -- where
	 * it belongs for a screen reader and for the stacked layout -- while
	 * sitting on the right here. */
	.hb-layout > .hb-prose { grid-column: 1; grid-row: 1; }
	.hb-layout > .hb-toc   { grid-column: 2; grid-row: 1; }
}


/* --- Hero plate ----------------------------------------------------------
 *
 * A photograph with the headline on it, rounded, sitting inside .container --
 * a plate on the page rather than a full-bleed banner. That is what keeps it
 * distinct from the hub's split hero and from the site's own .page-header.
 * ----------------------------------------------------------------------- */
.hb-chapter-head { padding: var(--wt-space) 0 0 0; }

@media (min-width: 768px) {
	.hb-chapter-head { padding-top: var(--wt-space-md); }
}

.hb-hero-plate {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 20rem;
	overflow: hidden;
	border-radius: var(--hb-radius-img);
	background: var(--hb-olive-darkest);
}

@media (min-width: 768px) {
	.hb-hero-plate { min-height: 25rem; }
}

.hb-hero-plate picture,
.hb-hero-plate img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* THE SCRIM. The headline is white and this photograph has bright sky in it;
 * without the gradient the top of the text sits on near-white. Any replacement
 * image must keep this. Two stops rather than one so the headline sits on a
 * genuinely dark ground while the top of the picture stays open. */
.hb-hero-plate::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(24, 30, 2, .88) 0%,
		rgba(24, 30, 2, .70) 32%,
		rgba(24, 30, 2, .15) 68%,
		rgba(24, 30, 2, .05) 100%
	);
}

.hb-hero-plate-text {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
	.hb-hero-plate-text { width: 80%; padding: 3rem; }
}

@media (min-width: 1200px) {
	.hb-hero-plate-text { width: 66%; }
}

.wt-handbook-chapter .hb-hero-plate-text h1 {
	font-size: clamp(1.875rem, 1.1rem + 3vw, 3rem);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--hb-paper);
	margin-bottom: .75rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.hb-hero-plate-lede {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgba(252, 250, 247, .88);
	margin-bottom: 0;
	max-width: 34rem;
}

/* The eyebrow sits on the photo here, so it inverts. */
.hb-hero-plate .hb-eyebrow { margin-bottom: 1rem; }
.hb-hero-plate .hb-eyebrow::before { background: var(--hb-sapling); }
.hb-hero-plate .hb-eyebrow span { color: #dee7b6; }
.hb-hero-plate .hb-eyebrow a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(222, 231, 182, .45);
}
.hb-hero-plate .hb-eyebrow a:hover {
	color: var(--hb-paper);
	border-bottom-color: currentColor;
	text-decoration: none;
}


/* --- Contents ------------------------------------------------------------ */
.hb-chapter-body { padding: var(--wt-space-lg) 0; }

@media (min-width: 768px) {
	.hb-chapter-body { padding: var(--wt-space-md-up) 0 var(--wt-space-md-up) 0; }
}

/* In flow, not sticky. A sticky sidebar needs a column this layout does not
 * have -- and STICKY FROM 1200px UP, where .hb-layout gives it one.
 *
 * The reason sticky was avoided at first still stands and is handled here
 * rather than dodged: a sticky block taller than the viewport pins its own top
 * off-screen and the bottom of it becomes unreachable, which is the trap
 * recorded against the prices page quote card. Twenty-six entries is taller
 * than a laptop viewport, so the sidebar carries its own max-height and
 * scrolls internally. Take that off and the last few chapters of the contents
 * cannot be clicked.
 *
 * Below 1200px it is a plain box above the article, two columns from 768px --
 * twenty-six entries in one column is a screenful of links before the article
 * starts; in two it is a glanceable map. */
.hb-toc {
	margin-bottom: var(--wt-space-md);
	padding: 1.5rem 1.75rem;
	background: var(--hb-band);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
}

@media (min-width: 1200px) {
	.hb-toc {
		position: sticky;
		/* Clears the fixed site header, which is measured -- see
		 * --wt-header-h in css/site.css and the inline seed in header.php. */
		top: calc(var(--wt-header-h, 81px) + 1.5rem);
		max-height: calc(100vh - var(--wt-header-h, 81px) - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		margin-bottom: 0;
		padding: 1.25rem 1.375rem;
	}
}

/* The one heading on either page that is NOT the serif: it labels a navigation
 * box, it is not part of the document outline the reader is reading. */
.wt-handbook .hb-toc-title {
	font-family: var(--bs-body-font-family);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hb-olive-deep);
	margin-bottom: 1.125rem;
}

.hb-toc ol,
.hb-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Two columns only in the stacked layout. In the sidebar it is one narrow
 * column, so the column-count has to be turned back off above 1200px. */
@media (min-width: 768px) {
	.hb-toc > ol {
		column-count: 2;
		column-gap: 2.5rem;
	}
	/* Without this a part and its sub-list can be split across the two
	 * columns, which reads as a heading with someone else's children. */
	.hb-toc > ol > li { break-inside: avoid; }
}

@media (min-width: 1200px) {
	.hb-toc > ol { column-count: 1; }
	.hb-toc > ol > li { margin-bottom: .875rem; }
	.hb-toc > ol > li > a { font-size: 1rem; }
	.hb-toc ul a { font-size: .8125rem; }
}

.hb-toc > ol > li { margin-bottom: 1rem; }
.hb-toc > ol > li:last-child { margin-bottom: 0; }

.hb-toc > ol > li > a {
	font-family: var(--hb-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--hb-bark);
	text-decoration: none;
}
.hb-toc > ol > li > a:hover {
	color: var(--hb-olive);
	text-decoration: underline;
}

.hb-toc ul {
	margin-top: .5rem;
	padding-left: .875rem;
	border-left: 2px solid var(--hb-border);
}
.hb-toc ul li { margin-bottom: .3125rem; }
.hb-toc ul li:last-child { margin-bottom: 0; }

.hb-toc ul a {
	font-size: .875rem;
	line-height: 1.45;
	color: var(--hb-body-soft);
	text-decoration: none;
}
.hb-toc ul a:hover {
	color: var(--hb-olive-deep);
	text-decoration: underline;
}


/* --- Prose ---------------------------------------------------------------
 *
 * The measure is 56rem so tables and column blocks fit. Running PROSE at 56rem
 * would be about 95 characters a line, which is past comfortable, so plain
 * paragraphs and single lists get their own narrower inner measure. Tables,
 * callouts, panels and column blocks deliberately do not -- they use the full
 * width, and the difference between the two is what gives the page its rhythm.
 * ----------------------------------------------------------------------- */

/* scroll-margin-top clears the FIXED site header when a contents link jumps to
 * a heading. Without it the heading lands underneath the header and the reader
 * arrives mid-paragraph. It tracks the measured --wt-header-h so it stays
 * correct when the nav wraps in a longer language. */
.hb-prose h2,
.hb-prose h3 {
	scroll-margin-top: calc(var(--wt-header-h, 81px) + 1rem);
}

.hb-prose h2 {
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--hb-bark);
	margin-top: var(--wt-space-md);
	margin-bottom: 1.5rem;
	padding-bottom: .875rem;
	border-bottom: 1px solid var(--hb-border);
}
.hb-prose > h2:first-child { margin-top: 0; }

.hb-prose h3 {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hb-olive);
	margin-top: var(--wt-space-md);
	margin-bottom: .875rem;
}
/* A part heading is immediately followed by its first sub-heading; the full
 * section gap between them would open a hole. */
.hb-prose h2 + h3 { margin-top: 0; }

/* The small uppercase label above a list or a column. */
.hb-prose .hb-label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hb-bark);
	margin-top: 1.75rem;
	margin-bottom: .75rem;
}

/* Running prose is capped NARROWER than the article column, while tables,
 * callouts, panels and column blocks use the full width. That contrast is the
 * layout, not an accident -- it is what stops four thousand words reading as
 * one undifferentiated slab.
 *
 * 42rem at the 18px body size is about 85 characters a line. MEASURE THIS, DO
 * NOT GUESS IT: the body face is a narrow one, so a rem value that looks
 * generous is not. The design guidance asks for 75, which measured out at
 * 36rem -- and read as a thin ribbon once there was a sidebar beside it rather
 * than empty space. 85 is the deliberate compromise.
 *
 * RE-MEASURED ON 2026-08-29, WHEN IBM PLEX SANS REPLACED UBUNTU, AND 42rem
 * SURVIVED UNCHANGED. Measured on the real rendered chapter paragraphs rather
 * than a synthetic string: Plex runs 7.83px per character at the 18px body
 * size, giving 86 characters in the 672px box, against the ~7.9 and ~85 this
 * note recorded for Ubuntu. A 1% difference, so the number was left alone.
 *
 * NOTE WHICH PARAGRAPHS TO MEASURE. `.hb-prose > p` also matches `.hb-lede`,
 * the chapter's opening paragraph, and that one is deliberately SERIF -- so a
 * measurement that grabs the first `<p>` measures the wrong face and comes out
 * ~7% wide. Filter `.hb-lede` out, as the 55 ordinary paragraphs in chapter 1
 * were here.
 *
 * If the body size or the face changes again, measure the average glyph
 * advance again rather than scaling this number. */
.hb-prose > p,
.hb-prose > .hb-list {
	max-width: 42rem;
}

.hb-prose p {
	font-size: 1.125rem;
	line-height: 1.7;
	margin-bottom: 1.25rem;
}

.hb-prose .hb-lede {
	font-family: var(--hb-serif);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	line-height: 1.4;
	font-weight: 600;
	color: var(--hb-bark);
	margin-bottom: 1.5rem;
}

.hb-prose strong { font-weight: 700; color: var(--hb-bark); }

.hb-list {
	margin: 0 0 1.5rem 0;
	padding-left: 1.25rem;
}
.hb-list li {
	font-size: 1.125rem;
	line-height: 1.65;
	margin-bottom: .625rem;
	padding-left: .25rem;
}
.hb-list li::marker { color: var(--hb-sapling); font-weight: 700; }
.hb-list li:last-child { margin-bottom: 0; }


/* --- Two-column blocks ---------------------------------------------------
 *
 * The source document is full of paired lists -- how to spot it, then what to
 * do about it. Stacked they are forty bullets in a row; side by side they are
 * a comparison, and the pairing is the point.
 * ----------------------------------------------------------------------- */
.hb-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	margin: 2rem 0;
	padding: 1.75rem;
	background: var(--hb-band);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
}

@media (min-width: 768px) {
	.hb-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
		padding: 2rem 2.25rem;
	}
}

.hb-columns .hb-label { margin-top: 0; }
.hb-columns .hb-list { margin-bottom: 0; }
.hb-columns .hb-list li { font-size: 1.0625rem; }


/* --- Panels: icon lists and checklists ----------------------------------- */
.hb-panel {
	margin: 2rem 0;
	padding: 1.75rem;
	background: var(--hb-band);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
}

@media (min-width: 768px) {
	.hb-panel { padding: 2rem 2.25rem; }
}

.wt-handbook .hb-panel-title {
	font-family: var(--hb-serif);
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hb-olive);
	margin-bottom: 1.25rem;
}

.hb-icons,
.hb-checks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-icons li,
.hb-checks li {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	font-size: 1.125rem;
	line-height: 1.6;
	margin-bottom: .875rem;
}
.hb-icons li:last-child,
.hb-checks li:last-child { margin-bottom: 0; }

/* flex-shrink:0 matters -- without it a long line squashes the glyph into an
 * ellipse. The nudge down aligns it to the cap height of the first line. */
.hb-icon {
	flex: 0 0 auto;
	margin-top: .18em;
	color: var(--hb-sapling);
}
.hb-checks .hb-icon { color: var(--hb-olive); }

@media (min-width: 768px) {
	.hb-checks { columns: 2; column-gap: 2.5rem; }
	.hb-checks li { break-inside: avoid; }
}


/* --- Callouts ------------------------------------------------------------
 *
 * Six variants. What each is FOR is at wt_handbook_callout_variants() in
 * includes/handbook.php -- read that before adding a seventh, and before
 * reaching for the warning one, which is deliberately rare.
 * ----------------------------------------------------------------------- */
.hb-callout {
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
	border-radius: var(--hb-radius);
	border-left: 4px solid var(--hb-sapling);
	background: var(--hb-band);
	font-size: 1.125rem;
	line-height: 1.65;
}

@media (min-width: 768px) {
	.hb-callout { padding: 1.75rem 2rem; }
}

.wt-handbook .hb-callout-title {
	font-family: var(--hb-serif);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: .625rem;
	color: var(--hb-bark);
}

.hb-callout-body > *:last-child { margin-bottom: 0; }
.hb-callout p { font-size: 1.125rem; line-height: 1.65; margin-bottom: 1rem; }
.hb-callout ul,
.hb-callout ol { margin: 0 0 1rem 0; padding-left: 1.25rem; }
.hb-callout li { margin-bottom: .5rem; line-height: 1.6; }
.hb-callout li:last-child { margin-bottom: 0; }
.hb-callout > *:last-child { margin-bottom: 0; }

/* note -- the quiet default. */
.hb-callout--note { border-left-color: var(--hb-sapling); }

/* warning -- there is exactly ONE in chapter 1. A second halves the weight of
 * the first, which is the whole reason this variant exists. */
.hb-callout--warning {
	background: var(--hb-warn-bg);
	border-left-color: var(--hb-warn);
}
.hb-callout--warning .hb-callout-title { color: var(--hb-warn); }

/* quote -- a principle to hold on to. */
.hb-callout--quote {
	background: var(--hb-quote-bg);
	border-left-color: var(--hb-quote);
	font-family: var(--hb-serif);
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--hb-quote);
}
.hb-callout--quote strong { color: var(--hb-quote); }

/* test -- something to go and physically do in the field. */
.hb-callout--test {
	background: var(--hb-amber-bg);
	border-left-color: var(--hb-amber);
}
.hb-callout--test .hb-callout-title { color: #6f5a41; }

/* key -- the single most important statement in a part. Reversed out, so it
 * is the one thing on the page you cannot skim past. */
.hb-callout--key {
	background: var(--hb-olive);
	border-left-color: var(--hb-olive-darkest);
	color: var(--hb-paper);
}
.wt-handbook .hb-callout--key .hb-callout-title { color: #dee7b6; }
.hb-callout--key strong { color: #eef3d8; }

/* formula -- an equation, centred and given room. */
.hb-callout--formula {
	background: var(--hb-band);
	border: 1px solid var(--hb-border);
	border-left: 1px solid var(--hb-border);
	text-align: center;
	padding: 2rem 1.5rem;
}
.wt-handbook .hb-callout--formula .hb-callout-title {
	font-family: var(--bs-body-font-family);
	font-size: 1rem;
	font-weight: 400;
	color: var(--hb-body);
	margin-bottom: .875rem;
}
.hb-callout--formula .hb-callout-body {
	font-family: var(--hb-serif);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	font-weight: 700;
	color: var(--hb-olive);
	letter-spacing: .01em;
}

.hb-rule {
	margin: var(--wt-space-md) 0;
	border: 0;
	border-top: 1px solid var(--hb-border);
	opacity: 1;
}


/* --- Tables --------------------------------------------------------------
 *
 * Borderless, with a faint alternating tint, per the design guidance. At the
 * 56rem measure the four- and five-column tables fit without scrolling on a
 * laptop; on a phone the wrapper scrolls. It is focusable in the markup so a
 * keyboard user can reach and scroll it, which a plain overflow container
 * cannot be.
 * ----------------------------------------------------------------------- */
.hb-tablewrap {
	margin: 2rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
	background: #fff;
}
.hb-tablewrap:focus-visible {
	outline: 2px solid var(--hb-sapling);
	outline-offset: 2px;
}

/* A two-column table stretched across 56rem is a label, a lake of white and a
 * number. These sit at their natural width instead. */
.hb-tablewrap--narrow {
	max-width: 34rem;
	margin-left: 0;
}

.hb-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.5;
	background: transparent;
}

.hb-table th,
.hb-table td {
	padding: .8125rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--hb-border);
}

.hb-table thead th {
	font-family: var(--bs-body-font-family);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hb-bark);
	background: var(--hb-band);
	border-bottom: 2px solid var(--hb-border);
	white-space: nowrap;
}

.hb-table tbody th {
	font-weight: 600;
	color: var(--hb-bark);
	background: transparent;
}

/* The faint alternating tint the guidance asks for. */
.hb-table tbody tr:nth-child(even) { background: rgba(139, 168, 112, .07); }

.hb-table tbody tr:last-child th,
.hb-table tbody tr:last-child td { border-bottom: 0; }

/* An emphasised row -- July in the Kc table. */
.hb-table tbody tr.hb-row-hi { background: rgba(85, 93, 55, .1); }
.hb-table tbody tr.hb-row-hi th,
.hb-table tbody tr.hb-row-hi td {
	font-weight: 700;
	color: var(--hb-olive-deep);
}

/* Column alignment, set per table from the copy file. */
.hb-table .hb-l { text-align: left; }
.hb-table .hb-c { text-align: center; }
.hb-table .hb-r { text-align: right; }

/* Column TONES. These colour the value cells of a threshold table so it can be
 * scanned rather than read. Colour is never the only signal -- the column
 * header always says "Fine" / "Watch it" / "Get advice" in words. */
.hb-table .hb-t-good  { color: var(--hb-good); }
.hb-table .hb-t-watch { color: var(--hb-watch); }
.hb-table .hb-t-bad   { color: var(--hb-bad); }
.hb-table .hb-h-good  { color: var(--hb-good); }
.hb-table .hb-h-watch { color: var(--hb-watch); }
.hb-table .hb-h-bad   { color: var(--hb-bad); }

.hb-prose .hb-tablenote {
	margin: -1.25rem 0 2rem 0;
	max-width: 42rem;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--hb-body-soft);
}


/* --- Closing panel and pager --------------------------------------------- */
.hb-close {
	padding: 0 0 var(--wt-space-lg) 0;
	background: var(--hb-paper);
}

@media (min-width: 768px) {
	.hb-close { padding-bottom: var(--wt-space-md-up); }
}

.hb-ask {
	padding: 2rem;
	background: var(--hb-band);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius-img);
	text-align: center;
}

@media (min-width: 768px) {
	.hb-ask { padding: 3rem; }
}

.hb-ask h2 {
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: .875rem;
}
.hb-ask p {
	font-size: 1.125rem;
	line-height: 1.65;
	margin-bottom: 1.75rem;
}

.hb-pager {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wt-space-sm);
	margin-top: var(--wt-space-md);
}

@media (min-width: 768px) {
	.hb-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hb-pager-link {
	display: block;
	padding: 1.25rem 1.5rem;
	background: var(--hb-paper);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.hb-pager-link:hover,
.hb-pager-link:focus-visible {
	border-color: var(--hb-sapling);
	box-shadow: 0 6px 18px rgba(62, 69, 34, .09);
	text-decoration: none;
}

/* An empty cell, so "next" stays on the right when there is no "previous".
 * Invisible, and it must not collapse -- the grid needs both tracks. */
.hb-pager-gap { display: block; }

.hb-pager-next { text-align: right; }

.hb-pager-kicker {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .375rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hb-olive-deep);
}
.hb-pager-next .hb-pager-kicker { justify-content: flex-end; }

.hb-pager-title {
	display: block;
	font-family: var(--hb-serif);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hb-bark);
}

.hb-backlink {
	margin: var(--wt-space) 0 0 0;
	text-align: center;
}
.hb-backlink a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hb-olive-deep);
	text-decoration: none;
}
.hb-backlink a:hover {
	color: var(--hb-olive);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.hb-pager-link { transition: none; }
}


/* --- Deferred video figure ------------------------------------------------
 *
 * The player box itself -- black plate, 16:9 padding-top, thumbnail and play
 * button -- is .youtube in css/site.css, and is NOT duplicated here. All this
 * adds is the figure that wraps it and the caption below, so the block sits in
 * the article at the same width as a table or a callout rather than at the
 * narrow prose measure.
 *
 * .youtube carries margin-bottom: 30px of its own, so the figcaption is pulled
 * back up onto it the same way .hb-tablenote is pulled onto its table.
 * ---------------------------------------------------------------------- */
.hb-prose .hb-video {
	margin: 2rem 0 2.5rem 0;
	max-width: 100%;
}

.hb-prose .hb-video figcaption {
	margin: -1.25rem 0 0 0;
	max-width: 42rem;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--hb-body-soft);
}