/* hth-hero-plates */
/* -----------------------------------------------------------------------------
 * Hero plates — generic section artwork for pages with no photograph.
 *
 * Painted on .hth-route-hero--article only when inc/hero-plates.php has added
 * body.hth-has-plate, which it does only when the post has no featured image.
 * Set a Featured Image, or replace the plate in Appearance -> Site Images, and
 * that wins — this is the floor, not a ceiling.
 *
 * Every plate is built from the theme palette: deep navy #071827, lake blue
 * #2E6F95, teal #176F78, champagne gold #C7A257, burnt coral #D55C3E,
 * pearl #E3E1D9, forest green #355133. The left of each plate stays dark so the
 * overlaid display headline keeps its contrast.
 * -------------------------------------------------------------------------- */

/* The shared brand motif that sits on top of every plate.
 *
 * Drawn rather than generated: three depth contours running off to the right,
 * a horizon rule, and a single gold mark on it. It is the same drawing on every
 * plate, so a post with no photograph still arrives looking authored — the
 * section gradient underneath is the only thing that changes.
 *
 * Inline SVG as a data URI, so there is no HTTP request, nothing to lazy-load
 * and nothing to go missing from the media library. Replacing any plate with a
 * real photograph in Appearance -> Site Images still wins over all of it. */
body.hth-has-plate {
	--hth-motif: none;
}

body.hth-has-plate .hth-route-hero--article {
	background-color: var(--hth-navy-bg, #071827);
	background-image: var(--hth-motif), var(--hth-plate);
	background-size: auto, cover;
	background-position: center, 70% center;
	background-repeat: no-repeat, no-repeat;
}

/* The motif only appears where there is room for it beside the headline.
   Below this width the hero is a full-width text block and any drawing behind
   it lands on the words, so it is simply not drawn. A quiet hero beats a
   decorated illegible one. */
@media (min-width: 1000px) {
	body.hth-has-plate {
		--hth-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid meet'%3E%3Cg fill='none' stroke='rgb(var(--hth-pearl-panel-rgb, 227 225 217))' stroke-opacity='0.15' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M742 486 C806 402 892 358 1008 348'/%3E%3Cpath d='M716 528 C800 422 918 370 1064 360'/%3E%3Cpath d='M690 570 C792 442 946 382 1124 372'/%3E%3C/g%3E%3Cline x1='596' y1='300' x2='1180' y2='300' stroke='rgb(var(--hth-pearl-panel-rgb, 227 225 217))' stroke-opacity='0.2' stroke-width='2.5'/%3E%3Ccircle cx='962' cy='300' r='10' fill='rgb(var(--hth-gold-panel-rgb, 199 162 87))' fill-opacity='0.7'/%3E%3Ccircle cx='962' cy='300' r='26' fill='none' stroke='rgb(var(--hth-gold-panel-rgb, 199 162 87))' stroke-opacity='0.28' stroke-width='2'/%3E%3C/svg%3E");
	}

	body.hth-has-plate .hth-route-hero--article {
		background-size: min(44%, 540px) auto, cover;
		background-position: 97% 62%, 70% center;
	}
}

/* The quiet left column that keeps the headline legible over any plate. */
body.hth-has-plate .hth-route-hero--article::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .93) 0%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .58) 38%, rgb(var(--hth-navy-bg-rgb, 7 24 39) / .06) 100%);
	pointer-events: none;
	z-index: 0;
}

body.hth-has-plate .hth-route-hero--article > * {
	position: relative;
	z-index: 1;
}

/* Narrow screens need a different scrim.
 *
 * The left-to-right gradient above assumes the headline sits in the left third
 * with artwork breathing on the right. On a phone the headline spans the whole
 * band, and `background-size: cover` magnifies whatever circular element that
 * plate happens to carry — the coastal sun, the knot crossing — until it lands
 * squarely on the words. So below this width the plate stops being artwork and
 * becomes texture: dimmed evenly, still on-palette, never competing.
 */
@media (max-width: 999px) {
	body.hth-has-plate .hth-route-hero--article::before {
		background: linear-gradient(180deg, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .90) 0%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .82) 55%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .88) 100%);
	}

	body.hth-has-plate .hth-route-hero--article {
		background-size: auto, 260% auto;
		background-position: center, 62% 38%;
	}
}

/* --- moving water: current lanes with a seam running through them --------- */
body.hth-plate--river {
	--hth-plate:
		linear-gradient(-4deg, rgba(0, 0, 0, 0) 49.2%, rgb(var(--hth-gold-panel-rgb, 199 162 87) / .55) 49.2% 50.1%, rgba(0, 0, 0, 0) 50.1%),
		repeating-linear-gradient(-6deg, rgb(var(--hth-lake-bg-rgb, 46 111 149) / .34) 0 3px, rgb(var(--hth-lake-bg-rgb, 46 111 149) / 0) 3px 38px),
		radial-gradient(120% 95% at 84% 22%, rgb(var(--hth-lake-panel-rgb, 46 111 149) / .58), rgb(var(--hth-navy-bg-rgb, 7 24 39) / 0) 72%),
		linear-gradient(140deg, var(--hth-navy-bg, #071827) 0%, var(--hth-navy2-bg, #0b2740) 58%, #17506e 100%);
}

/* --- stillwater: depth contours off a shoreline --------------------------- */
body.hth-plate--stillwater {
	--hth-plate:
		linear-gradient(0deg, rgb(var(--hth-forest-panel-rgb, 53 81 51) / .55) 0 2.5%, rgba(0, 0, 0, 0) 2.5%),
		repeating-radial-gradient(ellipse 58% 32% at 74% 54%, rgb(var(--hth-lake-bg-rgb, 46 111 149) / .38) 0 2px, rgb(var(--hth-lake-bg-rgb, 46 111 149) / 0) 2px 52px),
		radial-gradient(70% 60% at 74% 54%, rgb(var(--hth-teal-bg-rgb, 23 111 120) / .40), rgb(var(--hth-navy-bg-rgb, 7 24 39) / 0) 72%),
		linear-gradient(140deg, var(--hth-navy-bg, #071827) 0%, var(--hth-navy2-bg, #0b2740) 58%, var(--hth-navy2-bg, #16506f) 100%);
}

/* --- coastal and saltwater: horizon, low sun, swell ----------------------- */
body.hth-plate--coastal {
	--hth-plate:
		radial-gradient(circle at 79% 27%, rgb(var(--hth-gold-panel-rgb, 199 162 87) / .92) 0 4.4%, rgb(var(--hth-gold-bg-rgb, 199 162 87) / .22) 4.4% 7.6%, rgb(var(--hth-gold-bg-rgb, 199 162 87) / 0) 11%),
		linear-gradient(0deg, rgba(0, 0, 0, 0) 62%, rgb(var(--hth-pearl-bg-rgb, 227 225 217) / .30) 62% 62.6%, rgba(0, 0, 0, 0) 62.6%),
		repeating-linear-gradient(-2deg, rgb(var(--hth-lake-bg-rgb, 46 111 149) / .30) 0 3px, rgb(var(--hth-lake-bg-rgb, 46 111 149) / 0) 3px 46px),
		linear-gradient(150deg, var(--hth-navy-bg, #071827) 0%, #0a2a3c 54%, #14555c 100%);
}

/* --- knots and rigging: interlacing line ---------------------------------- */
body.hth-plate--knots {
	--hth-plate:
		radial-gradient(circle at 62% 52%, rgb(var(--hth-coral-panel-rgb, 213 92 62) / .95) 0 1.5%, rgb(var(--hth-coral-bg-rgb, 213 92 62) / 0) 1.9%),
		linear-gradient(22deg, rgba(0, 0, 0, 0) 46.8%, rgb(var(--hth-gold-bg-rgb, 199 162 87) / .42) 46.8% 47.9%, rgba(0, 0, 0, 0) 47.9%),
		linear-gradient(-18deg, rgba(0, 0, 0, 0) 54.2%, rgb(var(--hth-lake-bg-rgb, 46 111 149) / .34) 54.2% 55.2%, rgba(0, 0, 0, 0) 55.2%),
		linear-gradient(-40deg, rgba(0, 0, 0, 0) 61.2%, rgb(var(--hth-teal-bg-rgb, 23 111 120) / .28) 61.2% 62.1%, rgba(0, 0, 0, 0) 62.1%),
		linear-gradient(140deg, var(--hth-navy-bg, #071827) 0%, var(--hth-navy2-bg, #0b2740) 60%, #17506e 100%);
}

/* --- species: lateral-line arcs ------------------------------------------- */
body.hth-plate--species {
	--hth-plate:
		repeating-radial-gradient(circle at 72% 48%, rgb(var(--hth-lake-bg-rgb, 46 111 149) / .30) 0 2px, rgb(var(--hth-lake-bg-rgb, 46 111 149) / 0) 2px 58px),
		linear-gradient(-3deg, rgba(0, 0, 0, 0) 77%, rgb(var(--hth-teal-bg-rgb, 23 111 120) / .42) 77% 78%, rgba(0, 0, 0, 0) 78%),
		radial-gradient(85% 70% at 76% 44%, rgb(var(--hth-teal-bg-rgb, 23 111 120) / .38), rgb(var(--hth-navy-bg-rgb, 7 24 39) / 0) 74%),
		linear-gradient(140deg, var(--hth-navy-bg, #071827) 0%, var(--hth-navy2-bg, #0b2740) 58%, var(--hth-navy2-bg, #16506f) 100%);
}

/* --- situations and method: the diagnostic ring --------------------------- */
body.hth-plate--method {
	--hth-plate:
		radial-gradient(circle at 74% 22%, rgb(var(--hth-teal-panel-rgb, 23 111 120) / .95) 0 2.4%, rgb(var(--hth-teal-bg-rgb, 23 111 120) / 0) 2.8%),
		radial-gradient(circle at 88% 55%, rgb(var(--hth-gold-panel-rgb, 199 162 87) / .95) 0 2.4%, rgb(var(--hth-gold-bg-rgb, 199 162 87) / 0) 2.8%),
		radial-gradient(circle at 79% 84%, rgb(var(--hth-coral-panel-rgb, 213 92 62) / .95) 0 2.4%, rgb(var(--hth-coral-bg-rgb, 213 92 62) / 0) 2.8%),
		radial-gradient(circle at 63% 78%, rgb(var(--hth-teal-panel-rgb, 23 111 120) / .95) 0 2.4%, rgb(var(--hth-teal-bg-rgb, 23 111 120) / 0) 2.8%),
		radial-gradient(circle at 60% 40%, rgb(var(--hth-gold-panel-rgb, 199 162 87) / .95) 0 2.4%, rgb(var(--hth-gold-bg-rgb, 199 162 87) / 0) 2.8%),
		radial-gradient(circle at 74% 53%, rgba(0, 0, 0, 0) 30.4%, rgb(var(--hth-pearl-bg-rgb, 227 225 217) / .34) 30.4% 31.2%, rgba(0, 0, 0, 0) 31.2%),
		linear-gradient(140deg, var(--hth-navy-bg, #071827) 0%, var(--hth-navy2-bg, #0b2740) 58%, var(--hth-navy2-bg, #16506f) 100%);
}

/* --- gear and tackle: a measured grid ------------------------------------- */
body.hth-plate--gear {
	--hth-plate:
		linear-gradient(0deg, rgba(0, 0, 0, 0) 33%, rgb(var(--hth-gold-panel-rgb, 199 162 87) / .78) 33% 33.7%, rgba(0, 0, 0, 0) 33.7%),
		radial-gradient(circle at 70% 40%, rgb(var(--hth-teal-bg-rgb, 23 111 120) / .46) 0 9%, rgb(var(--hth-coral-panel-rgb, 213 92 62) / .85) 9% 9.7%, rgba(0, 0, 0, 0) 9.7%),
		repeating-linear-gradient(90deg, rgb(var(--hth-pearl-bg-rgb, 227 225 217) / .12) 0 2px, rgb(var(--hth-pearl-bg-rgb, 227 225 217) / 0) 2px 84px),
		repeating-linear-gradient(0deg, rgb(var(--hth-pearl-bg-rgb, 227 225 217) / .12) 0 2px, rgb(var(--hth-pearl-bg-rgb, 227 225 217) / 0) 2px 84px),
		linear-gradient(140deg, var(--hth-navy-bg, #071827) 0%, #0a2334 60%, #123f56 100%);
}

/* --- start here: first light --------------------------------------------- */
body.hth-plate--start {
	--hth-plate:
		radial-gradient(circle at 73% 46%, rgb(var(--hth-gold-panel-rgb, 199 162 87) / .90) 0 6.4%, rgb(var(--hth-gold-bg-rgb, 199 162 87) / .30) 6.4% 10.5%, rgb(var(--hth-gold-bg-rgb, 199 162 87) / 0) 15%),
		linear-gradient(0deg, rgba(0, 0, 0, 0) 54%, rgb(var(--hth-pearl-bg-rgb, 227 225 217) / .26) 54% 54.6%, rgba(0, 0, 0, 0) 54.6%),
		repeating-linear-gradient(-2deg, rgb(var(--hth-lake-bg-rgb, 46 111 149) / .26) 0 3px, rgb(var(--hth-lake-bg-rgb, 46 111 149) / 0) 3px 52px),
		linear-gradient(150deg, var(--hth-navy-bg, #071827) 0%, #0a2a3c 54%, #15586a 100%);
}

/* --- standards and trust: quiet strata ------------------------------------ */
body.hth-plate--standards {
	--hth-plate:
		linear-gradient(90deg, rgba(0, 0, 0, 0) 43.6%, rgb(var(--hth-pearl-bg-rgb, 227 225 217) / .34) 43.6% 44.1%, rgba(0, 0, 0, 0) 44.1%),
		linear-gradient(0deg,
			rgba(0, 0, 0, 0) 22%, rgb(var(--hth-lake-bg-rgb, 46 111 149) / .26) 22% 30%,
			rgb(var(--hth-teal-bg-rgb, 23 111 120) / .30) 30% 36%, rgba(0, 0, 0, 0) 36%,
			rgb(var(--hth-gold-bg-rgb, 199 162 87) / .34) 46% 50%, rgba(0, 0, 0, 0) 50%,
			rgb(var(--hth-lake-bg-rgb, 46 111 149) / .22) 58% 68%, rgba(0, 0, 0, 0) 68%,
			rgb(var(--hth-teal-bg-rgb, 23 111 120) / .24) 74% 79%, rgba(0, 0, 0, 0) 79%),
		linear-gradient(140deg, var(--hth-navy-bg, #071827) 0%, var(--hth-navy2-bg, #0b2740) 58%, var(--hth-navy2-bg, #16506f) 100%);
}

/* -----------------------------------------------------------------------------
 * Article heroes: the featured photograph was being buried.
 *
 * The route hero stacks a photograph (.hth-route-hero__media, z-index 0) under
 * two legibility washes on ::before and ::after (both z-index 1) and the type
 * on .hth-route-hero__inner (z-index 2). On paper the photograph sits at the
 * bottom of that stack and shows through washes that start at 16% alpha. In
 * practice it did not render at all: every article opened on a flat navy slab,
 * and the picture chosen for the piece was simply never seen. Disabling either
 * wash on its own did not bring it back, so the fix is the stacking order
 * rather than the opacities.
 *
 * So the photograph is lifted to its own layer, one wash carries all of the
 * legibility work above it, and the type sits above that. The gradient pair is
 * the one the old ::before carried — darkest bottom-left, where the kicker,
 * headline, deck and byline strip actually live, and clearing to the right so
 * the picture keeps some open sky.
 *
 * Scoped with :has() so it touches only heroes that HAVE a photograph. Heroes
 * with no featured image are painted by the plate rules further down this file
 * and keep their own scrim untouched.
 * -------------------------------------------------------------------------- */
body.hth-article-template .hth-route-hero--article:has(.hth-route-hero__media) > .hth-route-hero__media {
	z-index: 1;
}

body.hth-article-template .hth-route-hero--article:has(.hth-route-hero__media)::after {
	z-index: 2;
	opacity: 1;
	background-image:
		linear-gradient(180deg, rgb(var(--hth-navy-bg-rgb, 7 24 39) / .30) 0%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .52) 45%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .93) 100%),
		linear-gradient(90deg, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .72) 0%, rgb(var(--hth-navy-bg-rgb, 7 24 39) / .30) 62%, rgb(var(--hth-navy-bg-rgb, 7 24 39) / .10) 100%);
}

body.hth-article-template .hth-route-hero--article:has(.hth-route-hero__media) .hth-route-hero__inner {
	z-index: 3;
}

body.hth-article-template .hth-route-hero--article:has(.hth-route-hero__media) .hth-featured-credit {
	z-index: 4;
}

/* -----------------------------------------------------------------------------
 * Landing and pillar pages get the same plate as an article.
 *
 * functions.php adds body.hth-landing-surface whenever a page's content carries
 * the .hth-landing-page wrapper, and component-layout-system.css then hides the
 * route hero on the reasoning that such a page brings its own designed one. It
 * brings a kicker, a display headline and a deck — good typography, but no
 * wide-format visual. So every article opened on a plate and every pillar page
 * opened on bare pearl, and the two halves of the site did not look related.
 *
 * Worse, a Featured Image set on a pillar page was rendered nowhere at all —
 * the route hero that would have shown it is the thing being hidden.
 *
 * So the first band becomes the hero and gets the artwork: the page's own
 * photograph when it has one, otherwise the section plate. Only the first band,
 * so nothing below the fold changes. inc/hero-plates.php sets the body flags
 * and supplies the photograph.
 * -------------------------------------------------------------------------- */
body.hth-band-hero {
	/* The plate when the page has no photograph. inc/hero-plates.php overrides
	   this with the Featured Image when it does. */
	--hth-band-art: var(--hth-plate, linear-gradient(140deg, var(--hth-navy-bg, #071827) 0%, var(--hth-navy2-bg, #0b2740) 58%, var(--hth-navy2-bg, #16506f) 100%));
}

/* Every selector below carries both body flags. They are always set together —
   inc/hero-plates.php adds hth-band-hero under the same condition functions.php
   uses for hth-landing-surface — and the pair is what lifts these rules past
   assets/css/frame-lock.css, which loads later and pins the same band with four
   classes of its own. One class short and the plate silently loses the tie. */
body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child {
	position: relative;
	isolation: isolate;
	/* !important is here to beat assets/css/frame-lock.css, which pins every
	   .is-canvas band to flat pearl so a Pearl field never drifts on the Navy
	   canvas. That contract still holds for every band below this one; the
	   first band is the hero, and a hero is the one place the plate wins. */
	background-color: var(--hth-navy-bg, #071827) !important;
	background-image: var(--hth-band-art) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
}

/* An even scrim, at every width — not the route hero's left-to-right gradient.
   That one assumes a short headline in the left third with artwork breathing on
   the right. A landing band is a full-width column of prose, so the right half
   of every paragraph would land on the bright side of the artwork. Here the
   artwork is ground rather than picture: dimmed evenly, on palette, and never
   competing with a line of type. */
body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .84) 0%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .72) 52%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .88) 100%);
	pointer-events: none;
	z-index: 0;
}

/* A photograph carries more detail than a plate does and needs a touch more
   cover behind small type, but it also deserves to be seen. */
body.hth-band-hero--photo.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child::before {
	background: linear-gradient(180deg, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .86) 0%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .76) 52%, rgb(var(--hth-navy-panel-rgb, 7 24 39) / .90) 100%);
}

body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child > * {
	position: relative;
	z-index: 1;
}

/* Type contract on the band, matching the route hero: pearl body, gold kicker
   and links.

   Both colour and -webkit-text-fill-color are set on every rule. The fill is
   what actually paints the glyphs on this theme — the canvas-band contract in
   frame-lock.css pins it to navy — and it beats `color` outright, so setting
   colour alone left an invisible headline sitting on the artwork. */
body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child,
body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child :is(p, li, h1, h2, h3, h4, h5, h6, strong, em, b, i, dt, dd, figcaption, span) {
	color: var(--hth-pearl-fg, #E3E1D9) !important;
	-webkit-text-fill-color: var(--hth-pearl-fg, #E3E1D9) !important;
}

body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child .hth-landing-kicker,
body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child a {
	color: var(--hth-gold-fg, #C7A257) !important;
	-webkit-text-fill-color: var(--hth-gold-fg, #C7A257) !important;
}

body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child .hth-landing-deck,
body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child .hth-landing-deck :is(p, span, strong, em) {
	color: rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .93) !important;
	-webkit-text-fill-color: rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .93) !important;
}

/* Section rules are drawn in navy for a pearl field and vanish on this one. */
body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child :is(h1, h2, h3, h4) {
	border-color: rgb(var(--hth-gold-line-rgb, 199 162 87) / .55);
}

/* On a phone `cover` magnifies whatever circular element a plate carries — the
   coastal sun, the knot crossing — until it lands squarely on the headline.
   Zooming out keeps the whole drawing inside the band, where it stays ground.
   A photograph is exempt: `cover` is what a photograph wants at every width. */
@media (max-width: 999px) {
	body.hth-band-hero.hth-landing-surface:not(.hth-band-hero--photo) .hth-landing-page > .hth-landing-band:first-child {
		background-size: 260% auto !important;
		background-position: 62% 38% !important;
	}
}

/* -----------------------------------------------------------------------------
 * Landing-page button rows.
 * .wp-element-button carries colour but no padding or margin on this theme, so
 * a band with more than one button renders as tight chips butted together.
 * -------------------------------------------------------------------------- */
.hth-landing-page a.wp-element-button,
.hth-landing-band a.wp-element-button,
.hth-final-route a.wp-element-button {
	padding: .72rem 1.1rem;
	margin: .4rem .6rem .4rem 0;
	display: inline-flex;
	align-items: center;
}

/* -----------------------------------------------------------------------------
 * Cover block — the dim ladder core never delivered.
 *
 * wp-block-library.css is not loaded on this theme, so a Cover block arrives
 * without the rules that make its overlay translucent. has-background-dim-60
 * means "sixty percent" and rendered at one hundred: the Start Here hero was a
 * flat navy slab with a 2304px photograph sitting behind it, fully hidden.
 * These are core's own declarations, nothing invented.
 * -------------------------------------------------------------------------- */
.wp-block-cover {
	position: relative;
}

.wp-block-cover > .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__video-background {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	margin: 0 !important;
	object-fit: cover !important;
	z-index: 0;
}

.wp-block-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.wp-block-cover .wp-block-cover__background.has-background-dim:not([class*="has-background-dim-"]) { opacity: .5; }
.wp-block-cover .has-background-dim-0   { opacity: 0;  }
.wp-block-cover .has-background-dim-10  { opacity: .1; }
.wp-block-cover .has-background-dim-20  { opacity: .2; }
.wp-block-cover .has-background-dim-30  { opacity: .3; }
.wp-block-cover .has-background-dim-40  { opacity: .4; }
.wp-block-cover .has-background-dim-50  { opacity: .5; }
.wp-block-cover .has-background-dim-60  { opacity: .6; }
.wp-block-cover .has-background-dim-70  { opacity: .7; }
.wp-block-cover .has-background-dim-80  { opacity: .8; }
.wp-block-cover .has-background-dim-90  { opacity: .9; }
.wp-block-cover .has-background-dim-100 { opacity: 1;  }
/* hth-figures */
/* HOOK FIELD DIAGRAMS — the figure chrome.
 * Palette-locked, self-contained, mobile-first. Printed inline by
 * inc/figures.php on any page that renders a [hth_fig] shortcode. */
.hth-fig{--ink:var(--hth-navy-fg, #071827);--lake:var(--hth-lake-bg, #2E6F95);--teal:var(--hth-teal-bg, #176F78);--coral:var(--hth-coral-bg, #D55C3E);--gold:var(--hth-gold-bg, #C7A257);--pearl:var(--hth-pearl-bg, #E3E1D9);--moss:var(--hth-forest-bg, #355133);--char:var(--hth-charcoal-bg, #424546);
 margin:2.6rem 0;border:1px solid rgb(var(--hth-navy-line-rgb, 7 24 39) / .16);border-radius:2px;background:var(--hth-cream-bg, #F5F4EF);overflow:hidden;
 font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.hth-fig.is-night{background:var(--hth-navy-bg, #071827);border-color:rgb(var(--hth-pearl-line-rgb, 227 225 217) / .22)}
.hth-fig__hd{padding:1.05rem 1.25rem .55rem}
.hth-fig__kick{margin:0 0 .3rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hth-teal-fg, #176F78);font-weight:700}
.hth-fig.is-night .hth-fig__kick{color:var(--hth-gold-fg, #C7A257)}
.hth-fig__ttl{margin:0;font-family:"Instrument Serif","Arial Narrow",Arial,sans-serif;font-size:clamp(1.35rem,3.4vw,1.9rem);
 line-height:1.05;letter-spacing:.012em;color:var(--hth-navy-fg, #071827);text-transform:none;letter-spacing:normal;font-weight:400}
.hth-fig.is-night .hth-fig__ttl{color:var(--hth-pearl-fg, #E3E1D9)}
.hth-fig__plate{padding:.35rem 1rem .9rem}

/* Every plate is drawn on an 880-unit viewBox with labels at 20 to 21 units.
 * width:100% takes that to about 362 CSS px on a 375px phone — a scale of 0.41,
 * which renders a 20-unit label at roughly 8px. That is true of every figure on
 * the site, the sparse ones as much as the dense ones, because they all share
 * the viewBox and the type scale: label count is not what makes them illegible,
 * available width is.
 *
 * So the plate stops shrinking at a floor that keeps the smallest label near
 * 13px and scrolls sideways instead. On any container wider than the floor —
 * every desktop and tablet layout — nothing changes at all, because min-width
 * only bites once there is genuinely not enough room.
 */
.hth-fig__plate{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.hth-fig__plate svg{display:block;width:100%;height:auto;min-width:580px}

/* Only say so where it can actually happen. Under 700px the plate runs
   edge-to-edge less about 13px of padding, so it stops fitting the 580px floor
   at roughly a 593px viewport; 580 is the safe side of that line. */
@media (max-width:580px){
  .hth-fig__hd::after{
    content:"Wider than the screen — drag the plate sideways";
    display:block;margin-top:.4rem;
    font-family:var(--hth-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
    font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
    color:#6b7176;
  }
  .hth-fig.is-night .hth-fig__hd::after{color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .66)}
}
.hth-fig__cap{margin:0;padding:.85rem 1.25rem 1.15rem;font-size:.93rem;line-height:1.62;color:#33383c;
 border-top:1px solid rgb(var(--hth-navy-line-rgb, 7 24 39) / .1)}
.hth-fig.is-night .hth-fig__cap{color:#c9cfd4;border-top-color:rgb(var(--hth-pearl-line-rgb, 227 225 217) / .16)}
.hth-fig__cap b{color:var(--hth-navy-fg, #071827)}
.hth-fig.is-night .hth-fig__cap b{color:var(--hth-pearl-fg, #E3E1D9)}
.hth-fig__key{display:flex;flex-wrap:wrap;gap:.4rem .55rem;padding:0 1.25rem 1.1rem;margin:0;list-style:none}
.hth-fig__key li{display:flex;align-items:center;gap:.4rem;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
 font-weight:600;color:var(--hth-charcoal-fg, #424546)}
.hth-fig.is-night .hth-fig__key li{color:#a9b4bc}
.hth-fig__key i{width:.72rem;height:.72rem;border-radius:2px;display:block;flex:0 0 auto}
/* Mobile: the plate breaks out of the text column.
 *
 * These diagrams are drawn on an 880-unit canvas with type sized so that a
 * label is still readable when the whole thing is about 370px wide. Inside a
 * padded landing band on a 375px phone the column is only ~300px, which drops
 * a 24-unit label to about seven CSS pixels — unreadable, and the diagram is
 * the point of the page. So on narrow screens the figure goes edge to edge and
 * loses its side border. That is worth roughly a third more width, which is
 * the difference between a picture you can read and one you squint at. */
@media (max-width:700px){
 .hth-fig{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;
  border-left:0;border-right:0;border-radius:0}
 .hth-fig__plate{padding:.3rem .4rem .7rem}
}
@media (max-width:640px){.hth-fig__hd{padding:.9rem 1rem .45rem}
 .hth-fig__cap{padding:.75rem 1rem 1rem;font-size:.89rem}.hth-fig__key{padding:0 1rem 1rem}}
@media print{.hth-fig{break-inside:avoid;border-color:#999}}
/* hth-bleed-contract */
/* ============================================================================
 * THE BLEED CONTRACT
 *
 * One rule for the whole publication, and the same rule at every screen size:
 *
 *   Front page  — full bleed, edge to edge.
 *   Interiors   — 90% of the viewport, centred.
 *   The reading column IS that 90%. It is not a narrow measure floating in
 *   the middle of a wide band.
 *
 * What this file fixes: the bands were already 90% wide, but the prose inside
 * them carried its own max-width (about 1042px) plus 100px of side padding,
 * so on a 1440px screen the text occupied 72% of the window and sat in a
 * column with 200px of empty band on either side. On a phone the same
 * arrangement left the text at 81% inside an 89% band. Both are the same
 * defect at different scales: a column down the middle instead of the bleed.
 *
 * Loaded last so it wins without anyone having to hunt down the original
 * declarations across fifteen stylesheets.
 * ========================================================================= */

/* ---- Interiors: the band is the column ---------------------------------- */
body:not(.home):not(.front-page) .hth-landing-page .hth-landing-band,
body:not(.home):not(.front-page) .hth-landing-page .hth-final-route {
	padding-left: clamp(16px, 2.4vw, 44px);
	padding-right: clamp(16px, 2.4vw, 44px);
}

/* Everything in the band fills the band. The figure is excluded on purpose:
 * it has its own edge-to-edge behaviour on a phone and this rule would pull
 * it back into the column. */
body:not(.home):not(.front-page) .hth-landing-page .hth-landing-band > *:not(.hth-fig),
body:not(.home):not(.front-page) .hth-landing-page .hth-final-route > *:not(.hth-fig) {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Editorial prose outside the landing bands gets the same treatment. */
body:not(.home):not(.front-page) .hth-editorial-prose > :where(p, h2, h3, h4, ul, ol, blockquote, figure, table) {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ---- Mobile: still 90%, not a narrower column --------------------------- */
@media (max-width: 782px) {
	body:not(.home):not(.front-page) .hth-field-modules,
	body:not(.home):not(.front-page) .hth-editorial-prose,
	body:not(.home):not(.front-page) .hth-route-reading {
		width: 90%;
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	/* !important is not decoration here: assets/css/mobile-responsive.css sets
	 * these paddings with !important of its own, and without matching it the
	 * text stays at 81% no matter where this file sits in the cascade. */
	body:not(.home):not(.front-page) .hth-landing-page .hth-landing-band,
	body:not(.home):not(.front-page) .hth-landing-page .hth-final-route {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	/* The outer gutter comes in too, so that once the thin edges are
	 * subtracted the text lands on the 90% the contract promises instead of
	 * the 81% it was rendering at. */
	body:not(.home):not(.front-page) .hth-route-shell {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	body:not(.home):not(.front-page) .hth-field-modules,
	body:not(.home):not(.front-page) .hth-editorial-prose,
	body:not(.home):not(.front-page) .hth-route-reading {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* A figure is artwork, not prose. Above the phone breakpoint it takes the
 * full band; below it, assets/figures.css takes it edge to edge and that rule
 * must not be clipped back to the band by anything here. */
@media (min-width: 701px) {
	body:not(.home):not(.front-page) .hth-landing-page .hth-fig {
		max-width: 100%;
	}
}
/* hook-the-horizon-knot-architecture */
/* Hook the Horizon — Fishing Knots architecture layer */
:root{
  --hth-knot-navy:var(--hth-navy-bg, #071827);
  --hth-knot-pearl:var(--hth-pearl-bg, #E3E1D9);
  --hth-knot-lake:var(--hth-lake-bg, #2E6F95);
  --hth-knot-teal:var(--hth-teal-bg, #176F78);
  --hth-knot-coral:var(--hth-coral-bg, #D55C3E);
  --hth-knot-gold:var(--hth-gold-bg, #C7A257);
  --hth-knot-mist:color-mix(in srgb,var(--hth-lake-bg, #2E6F95) 14%,var(--hth-pearl-bg, #E3E1D9));
  --hth-knot-charcoal:var(--hth-charcoal-bg, #424546);
  --hth-knot-paper:var(--hth-pearl-bg, #E3E1D9);
}

/* Canonical linked library on the Fishing Knots pillar/review surface. */
.hth-knot-linked-library{
  width:100%;
  max-width:78rem;
  margin:clamp(3rem,7vw,6rem) auto;
  padding:clamp(1.5rem,4vw,3.25rem);
  background:var(--hth-pearl-bg);
  color:var(--hth-charcoal-fg);
  box-sizing:border-box;
}
.hth-knot-linked-library__intro{
  max-width:78rem;
}
.hth-knot-library-kicker,
.hth-knot-family__head p,
.hth-knot-profile-context__eyebrow,
.hth-related-knots__eyebrow{
  margin:0 0 .65rem;
  color:var(--hth-teal-fg);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.hth-knot-linked-library h2,
.hth-knot-family h3,
.hth-knot-profile-context h2,
.hth-related-knots h2{
  color:var(--hth-navy-fg);
}
.hth-knot-family-jump{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:1.6rem 0 2.5rem;
}
.hth-knot-family-jump a{
  padding:.65rem .8rem;
  border:1px solid color-mix(in srgb,var(--hth-navy-line) 28%,transparent);
  background:var(--hth-pearl-bg, #E3E1D9);
  color:var(--hth-navy-fg)!important;
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
}
.hth-knot-family{
  scroll-margin-top:9rem;
  margin-top:2.4rem;
  padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb,var(--hth-navy-line) 22%,transparent);
}
.hth-knot-family__head{
  display:grid;
  grid-template-columns:minmax(0,.35fr) minmax(0,1.65fr);
  gap:1rem 2rem;
  align-items:end;
  margin-bottom:1rem;
}
.hth-knot-family__head h3{
  margin:0;
  font-size:clamp(1.55rem,2.8vw,2.7rem);
  line-height:1.05;
}
.hth-knot-family__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
}
.hth-knot-profile-card{
  display:flex;
  min-height:7rem;
  flex-direction:column;
  justify-content:space-between;
  gap:.55rem;
  padding:1rem 1.05rem;
  border-top:3px solid var(--hth-teal-line);
  background:var(--hth-pearl-bg, #E3E1D9);
  color:var(--hth-navy-fg)!important;
  text-decoration:none!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.hth-knot-profile-card:nth-child(3n+2){border-top-color:var(--hth-coral-line)}
.hth-knot-profile-card:nth-child(3n){border-top-color:var(--hth-gold-line)}
.hth-knot-profile-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgb(var(--hth-navy-line-rgb, 7 24 39) / .10);
}
.hth-knot-profile-card strong{
  font-size:1rem;
  line-height:1.2;
}
.hth-knot-profile-card span{
  color:var(--hth-charcoal-fg)!important;
  font-size:.78rem;
  line-height:1.35;
}

/* Standardized profile footer/navigation: family + canonical hub + aliases. */
.hth-knot-profile-context,
.hth-related-knots{
  width:min(100%,78rem);
  margin:clamp(2rem,5vw,4rem) auto;
  padding:clamp(1.4rem,3vw,2.2rem);
  border-top:4px solid var(--hth-gold-line);
  background:color-mix(in srgb,var(--hth-knot-mist) 22%,var(--hth-pearl-bg, #E3E1D9));
  color:var(--hth-charcoal-fg);
}
.hth-knot-profile-context h2,
.hth-related-knots h2{
  margin:.15rem 0 .7rem;
  font-size:clamp(1.7rem,3vw,2.8rem);
  line-height:1.03;
}
.hth-knot-profile-context__aliases{
  color:var(--hth-charcoal-fg);
}
.hth-knot-profile-context__links,
.hth-related-knots__links{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1rem;
}
.hth-knot-profile-context__links a,
.hth-related-knots__links a,
.hth-related-knots__pillar{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.65rem .8rem;
  border:1px solid var(--hth-navy-line);
  background:var(--hth-pearl-bg, #E3E1D9);
  color:var(--hth-navy-fg)!important;
  font-weight:800;
  text-decoration:none;
}
.hth-knot-profile-context__links a:first-child,
.hth-related-knots__pillar{
  background:var(--hth-navy-bg);
  color:var(--hth-pearl-fg)!important;
}

@media(max-width:980px){
  .hth-knot-family__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .hth-knot-linked-library{width:calc(100% - 1.25rem);padding:1.4rem}
  .hth-knot-family__grid,.hth-knot-family__head{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .hth-knot-profile-card{transition:none}
}
/* hook-the-horizon-component-layout-system */
/* Hook the Horizon — canonical component/layout system
 * Purpose: one predictable hierarchy for shells, prose, modules, cards, and landing pages.
 * Replaces legacy 80vw/90% nesting and forced dashboard-style component boxes.
 */
/* Widths are NOT defined here any more. These three tokens alias the layout
 * contract in assets/css/bleed-layout.css, which is the single place a width
 * changes. Keep them as aliases so the selectors below need no edit. */
:root{
  --hth-layout-shell: var(--hth-shell-max, min(1720px, 90vw));
  --hth-layout-wide: var(--hth-wide-max, min(1720px, 90vw));
  --hth-layout-prose: min(var(--hth-measure, 86ch), 100%);
  --hth-layout-gutter: clamp(0.85rem,3.2vw,2.5rem);
  --hth-layout-section: clamp(3.25rem,7vw,6.5rem);
  --hth-layout-gap: clamp(1.1rem,2.3vw,2rem);
}

/* Base interior shell: width belongs to the shell, not every nested child. */
body:not(.home):not(.front-page) .hth-route-main{
  width:100%;
  max-width:none;
  margin:0;
  overflow-x:clip;
}
body:not(.home):not(.front-page) .hth-route-shell,
body:not(.home):not(.front-page) .hth-route-hero__inner{
  width:min(var(--hth-layout-shell),calc(100% - 2 * var(--hth-layout-gutter)));
  max-width:var(--hth-layout-shell);
  margin-inline:auto;
  padding-inline:0;
}
body:not(.home):not(.front-page) .hth-route-reading{
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
}
body:not(.home):not(.front-page) .hth-route-reading > .wp-block-post-content,
body:not(.home):not(.front-page) .hth-route-reading > .entry-content{
  width:100%;
  max-width:none;
  margin:0;
}

/* Standard article layout: one centered reading canvas. */
body:not(.home):not(.front-page) .hth-route-content__inner{
  display:block;
}
body:not(.home):not(.front-page) .hth-route-aside{
  position:static;
  width:min(100%,var(--hth-layout-prose));
  max-width:var(--hth-layout-prose);
  margin:0 auto clamp(2rem,4vw,3.5rem);
  padding:1rem 1.15rem;
}

/* Landing/pillar pages: designed hero only — hide duplicate route chrome. */
body.hth-landing-surface .hth-route-main .hth-route-hero,
body.hth-landing-surface .hth-route-main .hth-route-rail,
body.hth-landing-surface .hth-route-featured,
body:not(.home):not(.front-page) .hth-route-main:has(.hth-landing-page) .hth-route-hero,
body:not(.home):not(.front-page) .hth-route-main:has(.hth-landing-page) .hth-route-rail,
body:not(.home):not(.front-page) .hth-route-main:has(.hth-landing-page) .hth-route-featured{
  display:none!important;
}
body.hth-landing-surface .hth-route-content,
body:not(.home):not(.front-page) .hth-route-main:has(.hth-landing-page) .hth-route-content{
  padding:0;
}
body.hth-landing-surface .hth-route-content__inner,
body:not(.home):not(.front-page) .hth-route-content__inner:has(.hth-landing-page){
  display:block;
  width:100%;
  max-width:none;
  margin:0;
}
body.hth-landing-surface .hth-route-content__inner > .hth-route-aside,
body:not(.home):not(.front-page) .hth-route-content__inner:has(.hth-landing-page) > .hth-route-aside{
  display:none!important;
}
body.hth-landing-surface .hth-route-content__inner > .hth-route-reading,
body:not(.home):not(.front-page) .hth-route-content__inner:has(.hth-landing-page) > .hth-route-reading{
  width:100%;
  max-width:none;
}

/* Reading hierarchy: paragraphs read like prose; visual components get wider rails. */
body:not(.home):not(.front-page) .hth-route-reading .wp-block-post-content > :is(p,ul,ol,blockquote,h2,h3,h4),
body:not(.home):not(.front-page) .hth-editorial-prose > :is(p,ul,ol,blockquote,h2,h3,h4){
  width:min(100%,var(--hth-layout-prose));
  max-width:var(--hth-layout-prose)!important;
  margin-inline:auto;
}
/* THE INTERIOR CONTENT COLUMN on landing/pillar pages.
 * .hth-field-modules is the outermost content box on those pages, so this is
 * the ONE place the 90% bleed is applied there. It is split out of the wide
 * rail below because the two want different things: this wants the viewport,
 * the rail wants its parent.
 *
 * margin-inline has to be !important. This selector pair is (0,5,1) and wins
 * max-width outright, but a plain margin-inline:auto lost to margin:0!important
 * in frame-lock.css (0,2,1), so the column came out the right WIDTH and flush
 * LEFT — a bare navy strip down the right of every landing page. Same rule,
 * same specificity, no new corrective layer. */
body:not(.home):not(.front-page) .hth-route-reading .wp-block-post-content > .hth-field-modules,
body:not(.home):not(.front-page) .hth-editorial-prose > .hth-field-modules{
  width:min(100%,var(--hth-layout-shell));
  max-width:var(--hth-layout-shell)!important;
  margin-inline:auto!important;
}

/* WIDE RAIL inside the reading column: figures, tables, grids and pull-outs
 * are allowed to be wider than the prose measure, but they fill the rail they
 * are already in. --hth-layout-wide is 100% by design; see bleed-layout.css. */
body:not(.home):not(.front-page) .hth-route-reading .wp-block-post-content > :is(figure,.wp-block-image,.wp-block-gallery,.wp-block-table,.wp-block-columns,.hth-route-grid,.hth-related-reading,.hth-article-handoff,.hth-article-notes,.hth-knot-linked-library),
body:not(.home):not(.front-page) .hth-editorial-prose > :is(figure,.wp-block-image,.wp-block-gallery,.wp-block-table,.wp-block-columns,.hth-route-grid,.hth-knot-linked-library){
  width:min(100%,var(--hth-layout-wide));
  max-width:var(--hth-layout-wide)!important;
  margin-inline:auto!important;
}

/* Full-width editorial bands */
.hth-landing-page{
  width:100%;
  max-width:none;
  margin:0;
  overflow:visible!important;
}
.hth-landing-page .hth-landing-band{
  width:100%;
  max-width:none!important;
  margin:0;
  padding:var(--hth-layout-section) var(--hth-layout-gutter);
  overflow:visible;
}
.hth-landing-page .hth-landing-band > :is(.hth-landing-kicker,h2,p,ul,ol,blockquote){
  width:min(100%,var(--hth-layout-prose));
  max-width:var(--hth-layout-prose)!important;
  margin-inline:auto;
}
.hth-landing-page .hth-landing-band > .hth-route-grid{
  width:min(100%,var(--hth-layout-wide));
  max-width:var(--hth-layout-wide)!important;
  margin:clamp(1.5rem,3.5vw,3rem) auto;
}
.hth-landing-page .hth-landing-hero .wp-block-cover__inner-container{
  width:min(var(--hth-layout-wide),calc(100% - 2 * var(--hth-layout-gutter)));
  max-width:var(--hth-layout-wide);
  margin-inline:auto;
}
.hth-landing-page .hth-landing-hero .wp-block-cover__inner-container > :is(p,h1,h2,h3){
  max-width:var(--hth-layout-prose);
}

/* Editorial card collections: open, not boxed dashboards. */
body:not(.home) .hth-landing-page .hth-route-grid,
.hth-landing-page .hth-route-grid,
.hth-route-reading .hth-route-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))!important;
  gap:var(--hth-layout-gap)!important;
  align-items:start!important;
}
body:not(.home) .hth-landing-page .hth-route-card,
body:not(.home) .hth-landing-page .hth-route-card.is-wide,
.hth-landing-page .hth-route-card,
.hth-route-reading .hth-route-card{
  grid-column:auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  box-shadow:none;
}
body:not(.home) .hth-landing-page .hth-route-card h3,
.hth-landing-page .hth-route-card h3,
.hth-route-reading .hth-route-card h3{
  margin:0 0 .55rem;
  font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.15;
}
body:not(.home) .hth-landing-page .hth-route-card p,
.hth-landing-page .hth-route-card p,
.hth-route-reading .hth-route-card p{
  width:auto;
  max-width:none!important;
  margin:0;
  font-size:clamp(.98rem,1vw,1.06rem);
  line-height:1.65;
}

/* Field modules: stop clipping long copy inside elevated cards */
.hth-fm-card,
.hth-fm-grid > *,
.hth-field-modules .hth-fm-card{
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}

/* The 76-profile directory is an index, not 76 oversized feature boxes. */
.hth-knot-linked-library{
  width:min(var(--hth-layout-wide),calc(100% - 2 * var(--hth-layout-gutter)));
  max-width:var(--hth-layout-wide);
  margin:var(--hth-layout-section) auto;
  padding:clamp(1.5rem,3.5vw,3rem);
}
.hth-knot-linked-library__intro{
  max-width:var(--hth-layout-prose);
}
.hth-knot-family__head{
  grid-template-columns:minmax(8rem,12rem) minmax(0,1fr);
  gap:1rem 2rem;
}
.hth-knot-family__grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  gap:.8rem;
}
.hth-knot-profile-card{
  min-height:0!important;
  height:auto!important;
  padding:1rem 0;
  border-top:1px solid color-mix(in srgb,var(--hth-navy-line,var(--hth-navy-line, #071827)) 24%,transparent);
  border-bottom:0;
  background:transparent;
  box-shadow:none;
  overflow:visible!important;
}
.hth-knot-profile-card:hover{
  transform:none;
  padding-left:.45rem;
  border-top-color:var(--hth-teal-line,var(--hth-teal-line, #176F78));
  box-shadow:none;
}

/* Canonical knot profiles: neutralize legacy inline 88vw/50%-translate wrappers. */
body.hth-knot-profile .hth-route-content__inner{
  display:block;
}
body.hth-knot-profile .hth-route-aside{
  display:none;
}
body.hth-knot-profile .hth-route-reading{
  width:100%;
  max-width:none;
}
body.hth-knot-profile .wp-block-post-content > div[style*="width:88vw"],
body.hth-knot-profile .wp-block-post-content > div[style*="width: 88vw"]{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
  left:auto!important;
  position:relative!important;
}
body.hth-knot-profile .wp-block-post-content > div[style*="width:88vw"] > section,
body.hth-knot-profile .wp-block-post-content > div[style*="width: 88vw"] > section{
  width:min(100%,var(--hth-layout-wide));
  max-width:var(--hth-layout-wide);
  margin-inline:auto;
}
body.hth-knot-profile .wp-block-post-content > div[style*="width:88vw"] > section > :is(p,h2,h3,ol,ul),
body.hth-knot-profile .wp-block-post-content > div[style*="width: 88vw"] > section > :is(p,h2,h3,ol,ul){
  max-width:var(--hth-layout-prose);
}
body.hth-knot-profile section[style*="repeat(auto-fit"]{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))!important;
  gap:var(--hth-layout-gap)!important;
}
body.hth-knot-profile section[style*="grid-template-columns:minmax(0,1.3fr)"]{
  grid-template-columns:minmax(0,1.45fr) minmax(17rem,.55fr)!important;
  gap:var(--hth-layout-gap)!important;
}

.hth-knot-profile-context,
.hth-related-knots{
  width:min(100%,var(--hth-layout-wide));
  max-width:var(--hth-layout-wide);
  margin:clamp(2.5rem,5vw,4.5rem) auto;
}

/* Species intelligence: never clip article/module copy */
.hth-si-layer-grid article,
.hth-si-profile-card,
.hth-si-guide-card,
.hth-si-example-grid article{
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}
.hth-si-shell{
  width:min(var(--hth-layout-shell),calc(100% - 2 * var(--hth-layout-gutter)))!important;
}

/* Tablet and phone */
@media(max-width:1050px){
  body:not(.home):not(.front-page) .hth-route-content__inner{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  body:not(.home):not(.front-page) .hth-route-aside{
    position:static;
    max-width:none;
  }
  body.hth-knot-profile section[style*="grid-template-columns:minmax(0,1.3fr)"]{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:760px){
  :root{
    --hth-layout-gutter:.85rem;
    --hth-layout-section:clamp(2.25rem,9vw,3.5rem);
  }
  body:not(.home) .hth-landing-page .hth-route-grid,
  .hth-landing-page .hth-route-grid,
  .hth-route-reading .hth-route-grid,
  .hth-knot-family__grid,
  .hth-knot-family__head,
  .hth-si-layer-grid,
  .hth-si-profile-grid,
  .hth-si-guide-grid,
  .hth-si-example-grid,
  .hth-si-hero__grid,
  .hth-si-section-head,
  .hth-si-subhead,
  .hth-si-governance,
  .hth-fm-grid,
  .hth-field-modules .hth-fm-grid,
  body.hth-knot-profile section[style*="repeat(auto-fit"],
  body.hth-knot-profile section[style*="grid-template-columns:minmax(0,1.3fr)"]{
    grid-template-columns:1fr!important;
  }
  .hth-knot-linked-library{
    width:calc(100% - .5rem);
    padding:1.1rem .85rem;
  }
  body:not(.home) .hth-landing-page .hth-route-card,
  body:not(.home) .hth-landing-page .hth-route-card.is-wide,
  .hth-landing-page .hth-route-card{
    padding-inline:0!important;
    background:transparent!important;
    min-height:0!important;
  }
  .hth-si-hero__rail{
    grid-template-columns:1fr!important;
  }
  .hth-si-guide-card > a{
    grid-template-columns:1fr!important;
  }
}
/* hook-mobile-responsive */
/**
 * Hook the Horizon — Global Mobile Responsive System
 * Auto-converts all pages, posts, archives, and templates for small viewports.
 * Loads site-wide (homepage included for shared chrome; reading rules exclude home).
 *
 * Breakpoints:
 *   1100px  tablet landscape / small laptop
 *    900px  tablet portrait
 *    767px  phone landscape / large phone
 *    480px  compact phone
 */

/* ---------------------------------------------------------------------------
 * Floating third-party widget clearance (added 2026-09-11)
 *
 * The Buy Me a Coffee widget injects a fixed bottom-right button at runtime and
 * was landing on top of body copy on phones — verified sitting across the last
 * line of a paragraph at 430px. The widget is drawn by an external script, so
 * it cannot be repositioned at the source; it is scaled back here and the
 * reading column is given clearance underneath so no sentence ends under it.
 *
 * The accessibility launcher sits bottom-LEFT and is deliberately untouched:
 * it must stay at full size and full contrast.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #bmc-wbtn,
  div[id^="bmc-wbtn"],
  .bmc-btn-container,
  #bmc-wbtn + div {
    transform: scale(0.74) !important;
    transform-origin: bottom right !important;
  }

  .hth-editorial-prose > :last-child,
  .hth-landing-page > section:last-child,
  .hth-route-reading > :last-child {
    margin-bottom: 4.25rem;
  }
}

/* --------------------------------------------------------------------------
   Base: never allow horizontal page scroll from layout
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Media embeds that still need a fixed height */
iframe,
embed,
object {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Shared width tokens — one component rail, readable prose measure
   -------------------------------------------------------------------------- */
body:not(.home):not(.front-page) {
  --hth-reading-width: 100%;
  --hth-mobile-gutter: clamp(0.85rem, 4vw, 1.25rem);
  --wp--style--global--content-size: min(72ch, 100%);
  --wp--style--global--wide-size: min(72rem, 100%);
}

/* --------------------------------------------------------------------------
   Tablet ≤ 1100px
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  body:not(.home):not(.front-page) {
    --hth-reading-width: 100%;
    --wp--style--global--content-size: min(72ch, 100%);
  }

  .hth-route-shell,
  .hth-route-hero__inner {
    width: min(100%, calc(100% - 2 * clamp(1rem, 3.5vw, 1.75rem)));
  }

  /* Multi-column editorial modules collapse toward 2-up */
  .hth-sp-grid,
  .hth-sp-season,
  .hth-sp-signal,
  .hth-sp-three,
  .hth-related-reading__grid,
  .hth-route-rail__inner,
  .hth-editorial-prose > ul.hth-editorial-tactics,
  .hth-editorial-prose > ol.hth-editorial-tactics,
  .hth-fm-grid,
  .hth-field-modules .hth-fm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hth-sp-ident,
  .hth-sp-band,
  .hth-sp-tactics,
  .hth-route-content__inner {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet portrait ≤ 900px
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body:not(.home):not(.front-page) {
    --hth-reading-width: 100%;
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
  }

  body:not(.home):not(.front-page) .hth-route-reading,
  body:not(.home):not(.front-page) .hth-article-toc,
  body:not(.home):not(.front-page) .hth-article-handoff,
  body:not(.home):not(.front-page) .hth-article-notes,
  body:not(.home):not(.front-page) .hth-related-reading,
  body:not(.home):not(.front-page) .hth-warning {
    width: var(--hth-reading-width) !important;
    max-width: var(--hth-reading-width) !important;
  }

  .hth-related-reading__grid,
  .hth-article-notes dl {
    grid-template-columns: 1fr !important;
  }

  .hth-route-content__inner {
    display: block !important;
  }

  .hth-route-aside {
    margin-top: 1.5rem;
  }

  /* Columns blocks from Gutenberg */
  .wp-block-columns {
    flex-wrap: wrap !important;
  }

  .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Phone ≤ 767px — primary mobile conversion
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body:not(.home):not(.front-page) {
    --hth-reading-width: 100%;
    --hth-mobile-gutter: 0.75rem;
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
  }

  /* Prevent sticky header + tall hero from fighting for space */
  body:not(.home):not(.front-page) .hth-route-hero,
  body:not(.home):not(.front-page) .hth-route-hero--article,
  body.hth-article-template .hth-route-hero--article,
  body.hth-editorial-page .hth-route-hero--article {
    min-height: clamp(20rem, 58vh, 32rem) !important;
  }

  body:not(.home):not(.front-page) .hth-route-hero__inner,
  body.hth-article-template .hth-route-hero--article .hth-route-hero__inner {
    width: min(100%, calc(100% - 1.5rem)) !important;
    padding-block: clamp(5.5rem, 18vw, 7.5rem) clamp(1.75rem, 6vw, 2.5rem) !important;
  }

  body:not(.home):not(.front-page) .hth-route-hero h1,
  body:not(.home):not(.front-page) .hth-route-hero h1.wp-block-post-title,
  body.hth-article-template .hth-route-hero--article h1.wp-block-post-title,
  body.hth-editorial-page .hth-route-hero--article h1.wp-block-post-title {
    max-width: 12ch !important;
    font-size: clamp(2.35rem, 11.5vw, 3.6rem) !important;
    line-height: 0.96 !important;
    letter-spacing: 0.01em !important;
  }

  body:not(.home):not(.front-page) .hth-route-hero .wp-block-post-excerpt,
  body.hth-article-template .hth-route-hero--article .wp-block-post-excerpt {
    max-width: 100% !important;
    margin-top: 1rem !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }

  .hth-article-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }

  /* Featured image: keep cinematic crop without overflow */
  body:not(.home):not(.front-page) .hth-route-featured,
  body:not(.home):not(.front-page) .wp-block-post-featured-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body:not(.home):not(.front-page) .hth-route-featured img,
  body:not(.home):not(.front-page) .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  body:not(.home):not(.front-page) .hth-route-content {
    padding: 2.25rem 0 3rem !important;
  }

  /* Reading column + modules */
  body:not(.home):not(.front-page) .hth-route-reading,
  body:not(.home):not(.front-page) .hth-article-toc,
  body:not(.home):not(.front-page) .hth-article-handoff,
  body:not(.home):not(.front-page) .hth-article-notes,
  body:not(.home):not(.front-page) .hth-related-reading,
  body:not(.home):not(.front-page) .hth-warning {
    width: var(--hth-reading-width) !important;
    max-width: var(--hth-reading-width) !important;
    margin-inline: auto !important;
  }

  body:not(.home):not(.front-page) .hth-route-reading > .wp-block-post-content,
  body:not(.home):not(.front-page) .hth-editorial-prose,
  body:not(.home):not(.front-page) .hth-field-modules,
  body:not(.home):not(.front-page) .hth-species-profile {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Typography scale for mobile reading */
  body:not(.home):not(.front-page) .hth-route-reading h2,
  body:not(.home):not(.front-page) .hth-editorial-prose > h2,
  body:not(.home):not(.front-page) .hth-article-handoff h2,
  body:not(.home):not(.front-page) .hth-article-notes h2,
  body:not(.home):not(.front-page) .hth-related-reading h2,
  body:not(.home):not(.front-page) .hth-sp-section h2 {
    max-width: 14ch !important;
    font-size: clamp(1.85rem, 9.5vw, 2.75rem) !important;
    line-height: 1.02 !important;
  }

  body:not(.home):not(.front-page) .hth-route-reading h3,
  body:not(.home):not(.front-page) .hth-editorial-prose > h3 {
    font-size: clamp(1.15rem, 5vw, 1.4rem) !important;
    line-height: 1.2 !important;
  }

  body:not(.home):not(.front-page) .hth-route-reading p,
  body:not(.home):not(.front-page) .hth-route-reading li,
  body:not(.home):not(.front-page) .hth-editorial-prose p,
  body:not(.home):not(.front-page) .hth-editorial-prose li {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* TOC: collapsible toggle already JS-driven; ensure touch targets */
  .hth-article-toc {
    padding: 1rem 1.05rem 1.1rem !important;
  }

  html.hth-article-js .hth-article-toc__toggle {
    display: inline-flex !important;
    min-height: 44px;
    min-width: 44px;
  }

  .hth-article-toc ol {
    columns: 1 !important;
    column-count: 1 !important;
  }

  .hth-article-toc a {
    display: inline-block;
    padding-block: 0.25rem;
    min-height: 44px;
    line-height: 1.35;
  }

  /* All multi-column editorial grids → single column */
  .hth-sp-grid,
  .hth-sp-season,
  .hth-sp-signal,
  .hth-sp-three,
  .hth-sp-ident,
  .hth-sp-band,
  .hth-sp-tactics,
  .hth-related-reading__grid,
  .hth-route-rail__inner,
  .hth-article-notes dl,
  .hth-editorial-prose > ul.hth-editorial-tactics,
  .hth-editorial-prose > ol.hth-editorial-tactics,
  .hth-fm-grid,
  .hth-field-modules .hth-fm-grid,
  .hth-pathway-grid,
  .hth-system-line,
  .hth-water-read,
  .hth-water-read__variables,
  .hth-footer-brand {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hth-sp-card,
  .hth-related-card,
  .hth-editorial-prose > ul.hth-editorial-tactics > li,
  .hth-editorial-prose > ol.hth-editorial-tactics > li {
    margin-top: 0 !important;
  }

  .hth-article-handoff,
  .hth-article-notes,
  .hth-related-reading {
    margin-top: 2.75rem !important;
    padding: 1.25rem 1.1rem !important;
  }

  .hth-article-handoff__link,
  .wp-element-button,
  .wp-block-button__link,
  button,
  .hth-chase-mobile__tools a {
    min-height: 44px !important;
  }

  /* Tables: horizontal scroll container, no page overflow */
  .wp-block-table,
  .hth-editorial-prose table,
  .hth-route-reading table,
  .entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block-table table,
  .hth-editorial-prose table table {
    display: table;
    min-width: 28rem;
  }

  /* Figures / galleries */
  .wp-block-gallery,
  .wp-block-gallery.has-nested-images {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  figure.alignwide,
  figure.alignfull,
  .wp-block-image.alignwide,
  .wp-block-image.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Species dossier header density */
  .hth-sp-dossier {
    padding: 1.5rem 1.1rem !important;
  }

  .hth-sp-dossier h1 {
    font-size: clamp(2.2rem, 11vw, 3.4rem) !important;
  }

  /* Floats kill mobile layouts */
  .alignleft,
  .alignright {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 !important;
  }

  /* Pull quotes full width of column */
  .hth-editorial-prose blockquote.hth-editorial-pullquote,
  .hth-route-reading blockquote {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Compact phone ≤ 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  body:not(.home):not(.front-page) {
    --hth-reading-width: min(100%, calc(100% - 1.25rem));
  }

  body:not(.home):not(.front-page) .hth-route-hero h1,
  body:not(.home):not(.front-page) .hth-route-hero h1.wp-block-post-title,
  body.hth-article-template .hth-route-hero--article h1.wp-block-post-title {
    max-width: 11ch !important;
    font-size: clamp(2.1rem, 12vw, 3rem) !important;
  }

  body:not(.home):not(.front-page) .hth-route-reading h2,
  body:not(.home):not(.front-page) .hth-editorial-prose > h2 {
    max-width: 12ch !important;
    font-size: clamp(1.7rem, 10vw, 2.35rem) !important;
  }

  .hth-article-meta {
    font-size: 0.68rem !important;
    letter-spacing: 0.06em !important;
  }

  .hth-article-handoff,
  .hth-article-notes,
  .hth-related-reading,
  .hth-article-toc {
    padding-inline: 0.9rem !important;
  }
}

/* --------------------------------------------------------------------------
   Landscape phones: keep content usable without giant heroes
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  body:not(.home):not(.front-page) .hth-route-hero,
  body:not(.home):not(.front-page) .hth-route-hero--article {
    min-height: 18rem !important;
  }

  body:not(.home):not(.front-page) .hth-route-hero__inner {
    padding-block: 4.5rem 1.25rem !important;
  }

  body:not(.home):not(.front-page) .hth-route-hero h1,
  body:not(.home):not(.front-page) .hth-route-hero h1.wp-block-post-title {
    font-size: clamp(1.9rem, 7vw, 2.8rem) !important;
  }
}

/* --------------------------------------------------------------------------
   Archives / search / 404 — same mobile conversion
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.archive .hth-route-main,
  body.search .hth-route-main,
  body.error404 .hth-route-main {
    overflow-x: clip;
  }

  body.archive .hth-route-hero,
  body.search .hth-route-hero,
  body.error404 .hth-route-hero {
    min-height: clamp(16rem, 48vh, 26rem) !important;
  }

  body.archive .wp-block-post-template,
  body.search .wp-block-post-template {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .hth-search-page__layout {
    grid-template-columns: 1fr !important;
  }

  .hth-search-filters {
    position: static !important;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: no layout thrash on resize transitions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body:not(.home) *,
  body:not(.home) *::before,
  body:not(.home) *::after {
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Safe-area insets (notched phones)
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    body:not(.home):not(.front-page) .hth-route-hero__inner,
    body:not(.home):not(.front-page) .hth-route-content {
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
    }

    .hth-chase-header {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}

/* --------------------------------------------------------------------------
   Landing cover repair + less-restrictive mobile shells (all viewports)
   --------------------------------------------------------------------------
   WP Cover blocks on pillar pages were flex-row with static images, pushing
   hero copy past the right edge. Nested reading shells + overflow:hidden made
   the page look blank on phones. Keep these rules global so combined CSS still
   ships them even when landing-pages.css is late or cached.
   -------------------------------------------------------------------------- */
/* REMOVED (duplicate corrective): this file used to carry a byte-for-byte copy
 * of the landing-surface shell reset that assets/css/frame-lock.css already
 * declares. Two identical !important authorities on the same selectors is one
 * more thing to debug, not one more guarantee — frame-lock is enqueued
 * unconditionally at priority 10001 and always ships after this file, so it
 * owns these selectors alone now. min-width:0 moved there with them. */
body.hth-landing-surface .hth-route-content{
  padding:0!important;
}
body.hth-landing-surface .hth-route-aside{
  display:none!important;
}
body .hth-landing-page .hth-landing-hero.wp-block-cover,
body .hth-landing-page .wp-block-cover.hth-landing-hero{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-height:clamp(20rem,64vh,40rem);
  overflow:hidden;
}
body .hth-landing-page .hth-landing-hero .wp-block-cover__image-background,
body .hth-landing-page .hth-landing-hero > img,
body .hth-landing-page .hth-landing-hero .wp-block-cover__background,
body .hth-landing-page .hth-landing-hero > span.wp-block-cover__background{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  object-fit:cover!important;
  pointer-events:none;
}
body .hth-landing-page .hth-landing-hero .wp-block-cover__inner-container{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  padding:clamp(4.5rem,14vw,7rem) clamp(1rem,4vw,2rem) clamp(2rem,6vw,3rem)!important;
  box-sizing:border-box;
}
body .hth-landing-page .alignfull{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  left:auto!important;
  right:auto!important;
}
@media (max-width: 767px) {
  body:not(.home):not(.front-page) .hth-route-content__inner,
  body:not(.home):not(.front-page) .hth-route-content__inner:has(> .hth-route-aside){
    display:block!important;
    grid-template-columns:1fr!important;
  }
  body:not(.home):not(.front-page) .hth-route-aside{
    position:static!important;
    width:100%!important;
    max-width:none!important;
  }
  body:not(.home) .entry-content [style*="grid-template-columns:repeat"],
  body:not(.home) .wp-block-post-content [style*="grid-template-columns:repeat"],
  body:not(.home) .entry-content [style*="grid-template-columns: repeat"],
  body:not(.home) .wp-block-post-content [style*="grid-template-columns: repeat"]{
    grid-template-columns:1fr!important;
  }
  body .hth-landing-page .hth-route-grid{
    grid-template-columns:1fr!important;
  }
  body .hth-landing-page .hth-landing-hero h1,
  body .hth-landing-page .hth-landing-hero h2{
    font-size:clamp(2.15rem,11vw,3.4rem)!important;
    max-width:14ch;
    line-height:.94!important;
  }
  body .hth-landing-page .hth-landing-hero .hth-landing-deck{
    max-width:100%!important;
    font-size:1rem!important;
  }
  body .hth-landing-page .hth-landing-band{
    padding:clamp(2rem,8vw,3.5rem) clamp(.85rem,4vw,1.25rem)!important;
  }
}

/* --------------------------------------------------------------------------
   Final contrast guard — site-wide, all viewports
   --------------------------------------------------------------------------
   This layer intentionally lives in the existing global responsive bundle so
   WordPress.com/WPVibe preview and asset-combine behavior cannot skip it.
   -------------------------------------------------------------------------- */
:root{
  --hth-contrast-dark:var(--hth-navy-bg, #071827);
  --hth-contrast-body:var(--hth-charcoal-bg, #424546);
  --hth-contrast-light:var(--hth-pearl-bg, #E3E1D9);
  --hth-contrast-mist:var(--hth-pearl-bg, #E3E1D9);
  --hth-contrast-gold:var(--hth-gold-bg, #C7A257);
  --hth-contrast-gold-ink:var(--hth-navy-fg, #071827);
  --hth-contrast-coral-ink:var(--hth-navy-fg, #071827);
}

/* The guard's verdict is the last word, so it is written to outrank everything
   it might land on.
   ------------------------------------------------------------------------
   assets/js/mobile-responsive.js measures the composited background behind
   every text node and, where the pair fails, stamps data-hth-contrast-fix
   with whichever of dark / light / white clears it. That measurement happens
   after paint and knows what the reader is actually looking at, which no
   stylesheet does.

   These three rules were (0,2,2) and lost to ordinary component styling that
   reaches (0,3,1) and (0,4,1). So the guard was doing its job and being
   ignored: on /what-changed/ it correctly stamped .wc-step__q as sitting on a
   dark ground, and the paragraph still rendered #071827 on #0C2233 — 1.11:1 —
   because a component rule outranked the remediation. Eight elements were
   stamped on that page and none of the fixes applied.

   Repeating .wp-site-blocks takes these to (0,4,2), above the component layers
   in this theme. Nothing else changes: the guard still only stamps an element
   whose measured pair has already failed, and it removes the attribute again
   as soon as the pair passes, so this can only ever repaint text that is
   currently unreadable. */
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks.wp-site-blocks.wp-site-blocks [data-hth-contrast-fix="light"],
html body .wp-site-blocks [data-hth-contrast-fix="light"]{
  color:var(--hth-pearl-fg)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg)!important;
}
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks.wp-site-blocks.wp-site-blocks [data-hth-contrast-fix="dark"],
html body .wp-site-blocks [data-hth-contrast-fix="dark"]{
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks.wp-site-blocks.wp-site-blocks [data-hth-contrast-fix="white"],
html body .wp-site-blocks [data-hth-contrast-fix="white"]{
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}

:is(.has-deep-navy-background-color,.has-charcoal-background-color,.has-forest-green-background-color){
  color:var(--hth-pearl-fg)!important;
}
:is(.has-deep-navy-background-color,.has-charcoal-background-color,.has-forest-green-background-color)
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,blockquote,figcaption,th,td,a:not(.wp-element-button):not(.wp-block-button__link)){
  color:var(--hth-pearl-fg)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg)!important;
}
.has-teal-background-color{
  background-color:color-mix(in srgb,var(--hth-teal-bg, #176F78) 14%,var(--hth-pearl-bg, #E3E1D9))!important;
  box-shadow:inset 0 3px 0 var(--hth-teal-line, #176F78);
}
.has-lake-blue-background-color{
  background-color:color-mix(in srgb,var(--hth-lake-bg, #2E6F95) 14%,var(--hth-pearl-bg, #E3E1D9))!important;
  box-shadow:inset 0 3px 0 var(--hth-lake-line, #2E6F95);
}
:is(.has-teal-background-color,.has-lake-blue-background-color){
  color:var(--hth-navy-fg, #071827)!important;
}
:is(.has-teal-background-color,.has-lake-blue-background-color)
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,blockquote,figcaption,th,td,a:not(.wp-element-button):not(.wp-block-button__link)){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}

:is(.has-pearl-background-color,.has-white-background-color,.has-horizon-mist-background-color){
  color:var(--hth-charcoal-fg)!important;
}
:is(.has-pearl-background-color,.has-white-background-color,.has-horizon-mist-background-color)
:is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}
:is(.has-pearl-background-color,.has-white-background-color,.has-horizon-mist-background-color)
:is(p,li,dt,dd,label,blockquote,figcaption,th,td,a:not(.wp-element-button):not(.wp-block-button__link)){
  color:var(--hth-charcoal-fg)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg)!important;
}

:is(.has-champagne-gold-background-color,.has-field-canvas-background-color,.has-burnt-coral-background-color){
  color:var(--hth-navy-fg)!important;
}
:is(.has-champagne-gold-background-color,.has-field-canvas-background-color,.has-burnt-coral-background-color)
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,blockquote,figcaption,th,td,a:not(.wp-element-button):not(.wp-block-button__link)){
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}

:is(.has-deep-navy-background-color,.has-charcoal-background-color,.has-forest-green-background-color)
:is(.has-deep-navy-color,.has-charcoal-color,.has-forest-green-color,.has-teal-color,.has-lake-blue-color,.has-burnt-coral-color){
  color:var(--hth-pearl-fg)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg)!important;
}
:is(.has-teal-background-color,.has-lake-blue-background-color)
:is(.has-deep-navy-color,.has-charcoal-color,.has-forest-green-color,.has-teal-color,.has-lake-blue-color,.has-burnt-coral-color){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
:is(.has-pearl-background-color,.has-white-background-color,.has-horizon-mist-background-color,.has-champagne-gold-background-color,.has-field-canvas-background-color,.has-burnt-coral-background-color)
:is(.has-pearl-color,.has-white-color,.has-horizon-mist-color,.has-champagne-gold-color,.has-field-canvas-color){
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}

.hth-rs-button--coral{color:var(--hth-navy-fg)!important;-webkit-text-fill-color:var(--hth-navy-fg)!important}
.hth-rs-button--gold{color:var(--hth-navy-fg)!important;-webkit-text-fill-color:var(--hth-navy-fg)!important}
.hth-rs-button--ghost{color:var(--hth-pearl-fg)!important;-webkit-text-fill-color:var(--hth-pearl-fg)!important}
.hth-rs-button--ghost:hover,.hth-rs-button--ghost:focus-visible{color:var(--hth-navy-fg)!important;-webkit-text-fill-color:var(--hth-navy-fg)!important}
.hth-rs-button--outline:hover,.hth-rs-button--outline:focus-visible{color:var(--hth-pearl-fg)!important;-webkit-text-fill-color:var(--hth-pearl-fg)!important}
:is(.hth-rs-button--coral,.hth-rs-button--gold,.hth-rs-button--ghost,.hth-rs-button--outline) *{color:inherit!important;-webkit-text-fill-color:currentColor!important}

:is(.hth-rs-hero__copy,.hth-rs-marquee,.hth-rs-evidence,.hth-rs-closing,.hth-rs-condition-card,.hth-rs-dest-card,.hth-compat-hero,.hth-si-hero,.hth-si-toolbar,.hth-sp-remember){
  color:var(--hth-pearl-fg)!important;
}
/* The anchor exclusions matter more than they look. This rule hands the hero's
   own light colour to everything inside it, which is right for copy and wrong
   for anything that fills itself. .hth-si-hero__action--primary fills with the
   gold and surface-contrast.css states the navy for it — but that rule is
   (0,1,3) and this one is (0,4,1), because each :not() argument counts toward
   the :is() it sits in. So the stated navy never applied and the CTA on
   /species/ read pearl-on-gold at 1.84:1. It is named here rather than given
   more weight over there: a button that paints its own ground does not want the
   band's foreground in the first place. */
:is(.hth-rs-hero__copy,.hth-rs-marquee,.hth-rs-evidence,.hth-rs-closing,.hth-rs-condition-card,.hth-rs-dest-card,.hth-compat-hero,.hth-si-hero,.hth-si-toolbar,.hth-sp-remember)
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,blockquote,figcaption,a:not(.hth-rs-button):not(.wp-element-button):not(.wp-block-button__link):not(.hth-si-hero__action--primary)){
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}

:is(.hth-rs-evidence,.hth-rs-closing,.hth-rs-condition-card,.hth-si-hero,.hth-si-toolbar) :is(.hth-rs-kicker,.hth-si-kicker,small),
.hth-rs-evidence .hth-rs-pillars small,
.hth-rs-evidence .hth-rs-pillars__n{
  color:var(--hth-gold-fg)!important;
  -webkit-text-fill-color:var(--hth-gold-fg)!important;
}
.hth-rs-status dt{
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}
.hth-rs-feature small{
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}
.hth-rockstar .hth-rs-kicker{
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}
:is(.hth-rs-hero__copy,.hth-rs-marquee,.hth-rs-evidence,.hth-rs-closing,.hth-rs-condition-card,.hth-rs-dest-card,.hth-rs-bands,.hth-rs-ways-card:not(.hth-rs-ways-card--species)) .hth-rs-kicker{
  color:var(--hth-gold-fg)!important;
  -webkit-text-fill-color:var(--hth-gold-fg)!important;
}
.hth-rs-kicker--coral{
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}

body:is(.page-id-1,.page-id-92,.page-id-100,.page-id-101,.page-id-102,.page-id-103,.page-id-104,.page-id-105,.page-id-551,.page-id-548,.page-id-549) .hth-route-hero{
  color:var(--hth-pearl-fg)!important;
}
body:is(.page-id-1,.page-id-92,.page-id-100,.page-id-101,.page-id-102,.page-id-103,.page-id-104,.page-id-105,.page-id-551,.page-id-548,.page-id-549) .hth-route-hero :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-pearl-fg)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg)!important;
}
body:is(.page-id-1,.page-id-92,.page-id-100,.page-id-101,.page-id-102,.page-id-103,.page-id-104,.page-id-105,.page-id-551,.page-id-548,.page-id-549) .hth-route-hero :is(p,li,span){
  color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
  -webkit-text-fill-color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
}
body:is(.page-id-1,.page-id-92,.page-id-100,.page-id-101,.page-id-102,.page-id-103,.page-id-104,.page-id-105,.page-id-551,.page-id-548,.page-id-549) .hth-route-hero a,
body:is(.page-id-1,.page-id-92,.page-id-100,.page-id-101,.page-id-102,.page-id-103,.page-id-104,.page-id-105,.page-id-551,.page-id-548,.page-id-549) .hth-route-hero .hth-route-eyebrow,
body:is(.page-id-1,.page-id-92,.page-id-100,.page-id-101,.page-id-102,.page-id-103,.page-id-104,.page-id-105,.page-id-551,.page-id-548,.page-id-549) .hth-route-hero__signal b{
  color:var(--hth-gold-fg)!important;
  -webkit-text-fill-color:var(--hth-gold-fg)!important;
}

/* --------------------------------------------------------------------------
   Mobile layout recovery — less restrictive component boxes
   Loaded last so landing/route/species card systems cannot re-box content.
   -------------------------------------------------------------------------- */
body.hth-landing-surface .hth-route-main .hth-route-hero,
body.hth-landing-surface .hth-route-main .hth-route-rail,
body.hth-landing-surface .hth-route-featured,
body:not(.home) .hth-route-main:has(.hth-landing-page) .hth-route-hero,
body:not(.home) .hth-route-main:has(.hth-landing-page) .hth-route-rail,
body:not(.home) .hth-route-main:has(.hth-landing-page) .hth-route-featured{
  display:none!important;
}
.hth-landing-page{
  overflow:visible!important;
}
.hth-landing-page .hth-landing-band,
.hth-landing-page .hth-route-grid,
.hth-landing-page .hth-route-card,
.hth-si-layer-grid article,
.hth-si-profile-card,
.hth-si-guide-card,
.hth-fm-card,
.hth-knot-profile-card{
  overflow:visible!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
}

@media (max-width:900px){
  body:not(.home):not(.front-page) .hth-route-shell,
  body:not(.home):not(.front-page) .hth-route-hero__inner,
  body:not(.home):not(.front-page) .hth-route-content__inner{
    width:min(100%,calc(100% - 1.5rem))!important;
    max-width:100%!important;
  }

  body:not(.home) .hth-landing-page .hth-route-grid,
  .hth-landing-page .hth-route-grid,
  .hth-route-reading .hth-route-grid,
  .hth-si-layer-grid,
  .hth-si-profile-grid,
  .hth-si-guide-grid,
  .hth-si-example-grid,
  .hth-si-hero__grid,
  .hth-si-hero__rail,
  .hth-si-section-head,
  .hth-si-subhead,
  .hth-si-governance,
  .hth-fm-grid,
  .hth-field-modules .hth-fm-grid,
  .hth-route-rail__inner,
  .hth-knot-family__grid,
  .hth-knot-family__head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:1rem!important;
  }

  body:not(.home) .hth-landing-page .hth-route-card,
  body:not(.home) .hth-landing-page .hth-route-card.is-wide,
  .hth-landing-page .hth-route-card{
    grid-column:auto!important;
    min-height:0!important;
    height:auto!important;
    padding:1rem 0 0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body:not(.home) .hth-landing-page .hth-landing-hero{
    min-height:clamp(18rem,48vh,28rem)!important;
  }
  body:not(.home) .hth-landing-page .hth-landing-hero h1,
  body:not(.home) .hth-landing-page .hth-landing-hero h2{
    font-size:clamp(2.2rem,11vw,3.4rem)!important;
    max-width:12ch!important;
    line-height:.95!important;
  }
  body:not(.home) .hth-landing-page .hth-landing-band h2{
    font-size:clamp(1.75rem,8.5vw,2.5rem)!important;
    max-width:14ch!important;
  }
  body:not(.home) .hth-landing-page .hth-landing-band{
    padding-inline:1rem!important;
  }

  .hth-si-layer-grid article{
    padding:1.15rem 1rem!important;
    overflow:visible!important;
  }
  .hth-si-shell{
    width:min(100% - 1.25rem,1180px)!important;
  }
  .hth-si-guide-card > a{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .hth-si-guide-card__media{
    min-height:0!important;
    aspect-ratio:16/10;
  }
  .hth-si-toolbar{
    overflow:visible!important;
  }
  .hth-si-search-row{
    grid-template-columns:1fr!important;
  }

  /* Soften field-module cards on small screens */
  .hth-fm-card{
    padding:1rem .15rem 0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  /* Kill nested 88vw translate wrappers leftover in content */
  .wp-block-post-content > div[style*="width:88vw"],
  .wp-block-post-content > div[style*="width: 88vw"],
  .entry-content > div[style*="width:88vw"]{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    left:auto!important;
    transform:none!important;
    position:relative!important;
  }

  /* Homepage ways cards: don't force tall empty boxes */
  .hth-rs-ways-card{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }
  .hth-rs-ways-card__media{
    min-height:0!important;
    aspect-ratio:16/10;
  }
}

@media (max-width:480px){
  body:not(.home):not(.front-page) .hth-route-shell,
  body:not(.home):not(.front-page) .hth-route-hero__inner,
  body:not(.home):not(.front-page) .hth-route-content__inner{
    width:min(100%,calc(100% - 1rem))!important;
  }
  body:not(.home) .hth-landing-page .hth-route-card h3{
    font-size:1.25rem!important;
  }
  .hth-si-hero h1{
    font-size:clamp(2.4rem,12vw,3.4rem)!important;
  }
}

/* Inline content grids (conditions, destinations, etc.): single column on phones */
@media (max-width:767px){
  body:not(.home) .hth-route-reading .entry-content [style*="grid-template-columns"],
  body:not(.home) .hth-editorial-prose [style*="grid-template-columns"],
  body:not(.home) .hth-field-modules [style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
    gap:0.85rem!important;
  }
  /* Only flatten pale bordered variable cards — leave dark callout panels alone */
  body:not(.home) .hth-route-reading .entry-content div[style*="border:1px solid rgba(169,187,196"]{
    min-height:0!important;
    height:auto!important;
    padding:1rem 0 0!important;
    background:transparent!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    border-top:2px solid var(--hth-gold-line, #C7A257)!important;
  }
}

/* --------------------------------------------------------------------------
   Final mobile fortress (publish-ready)
   Universal Cover stack + full-width shells + off-canvas chrome isolation
   -------------------------------------------------------------------------- */
html, body{
  max-width:100%;
  overflow-x:clip;
}
.wp-site-blocks,
.hth-route-main,
.hth-landing-page,
.entry-content,
.wp-block-post-content{
  max-width:100%;
  min-width:0;
}

.hth-chase-mobile__panel[hidden],
.hth-chase-mobile__panel[aria-hidden="true"],
nav[aria-label="Mobile navigation"][hidden],
nav[aria-label="Mobile navigation"][aria-hidden="true"],
.hth-chase-mobile__tools[hidden],
.hth-chase-mobile__tools[aria-hidden="true"]{
  display:none!important;
}

@media (max-width:900px){
  body .wp-block-cover,
  body .wp-block-cover.hth-landing-hero,
  body .hth-landing-page .wp-block-cover{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-end!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  body .wp-block-cover > .wp-block-cover__image-background,
  body .wp-block-cover > img.wp-block-cover__image-background,
  body .wp-block-cover > .wp-block-cover__video-background,
  body .wp-block-cover > .wp-block-cover__background,
  body .wp-block-cover > span.wp-block-cover__background{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    object-fit:cover!important;
    pointer-events:none!important;
  }
  body .wp-block-cover > .wp-block-cover__inner-container{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
    padding-inline:clamp(0.85rem,4vw,1.5rem)!important;
  }

  body:not(.home):not(.front-page){
    --hth-reading-width:100%!important;
    --wp--style--global--content-size:100%!important;
    --wp--style--global--wide-size:100%!important;
    --hth-layout-prose:100%!important;
    --hth-layout-wide:100%!important;
    --hth-layout-shell:100%!important;
  }
  /* THE MOBILE GUTTER IS APPLIED ONCE, AT THE SHELL.
   * These six selectors used to share one declaration block, so every phone
   * page paid the gutter at each nesting level it happened to have. On a
   * pillar page that is shell + reading + entry-content = three gutters:
   * 375px became a 285px column and a 22-character line. The zeroing rule
   * below at (0,2,1) never had a chance against this block's (0,3,1)/(0,4,1).
   * Shell owns the gutter; everything inside it fills its parent. */
  body:not(.home):not(.front-page) .hth-route-shell,
  body:not(.home):not(.front-page) .hth-route-hero__inner,
  body:not(.home):not(.front-page) .hth-route-content__inner,
  body:not(.home) .hth-shell{
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
    padding-inline:var(--hth-shell-gutter,clamp(0.75rem,4vw,1.15rem))!important;
    box-sizing:border-box!important;
  }
  body:not(.home):not(.front-page) .hth-route-reading,
  body:not(.home):not(.front-page) .hth-route-reading > .wp-block-post-content,
  body:not(.home):not(.front-page) .hth-route-reading > .entry-content{
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
    padding-inline:0!important;
    box-sizing:border-box!important;
  }
  body.hth-landing-surface .hth-route-content,
  body.hth-landing-surface .hth-route-content__inner,
  body.hth-landing-surface .hth-route-reading,
  body .hth-landing-page{
    width:100%!important;
    max-width:none!important;
    padding-inline:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  body .hth-landing-page .hth-landing-band{
    padding-inline:clamp(0.85rem,4vw,1.25rem)!important;
  }

  body .wp-block-columns{
    flex-direction:column!important;
    flex-wrap:wrap!important;
  }
  body .wp-block-columns > .wp-block-column{
    flex-basis:100%!important;
    width:100%!important;
    max-width:100%!important;
  }
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
    max-width:100%!important;
  }
  body .alignwide,
  body .alignfull{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .hth-si-layer-grid,
  .hth-si-profile-grid,
  .hth-si-guide-grid,
  .hth-si-example-grid,
  .hth-si-hero__grid,
  .hth-si-hero__rail,
  .hth-si-section-head,
  .hth-si-search-row,
  .hth-fm-grid,
  .hth-knot-family__grid,
  .hth-knot-family__head,
  .hth-pathway-grid,
  .hth-system-line,
  .hth-water-read,
  .hth-water-read__variables{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:1rem!important;
  }
  .hth-si-shell{
    width:100%!important;
    max-width:100%!important;
    padding-inline:clamp(0.75rem,4vw,1.15rem)!important;
    box-sizing:border-box!important;
  }
}
/* hook-bleed-layout */
/**
 * Hook the Horizon — CANONICAL LAYOUT CONTRACT (v2)
 *
 * This is the single authority for page width, bleed, and component
 * containment. It is enqueued LAST (priority 10000) so that legacy route,
 * landing, component, mobile, and flexible-contract sheets cannot overwrite
 * it. Previously this file loaded FIRST and lost every tie.
 *
 * CONTRACT
 *   Home     -> 100% bleed. Visual design intentionally unchanged.
 *   Interior -> 90% of the viewport, capped at 1720px.
 *   Anywhere -> components size to content and never escape their rail.
 *
 * WIDTH MATH
 *   min(1720px, 90vw) gives exactly 90% bleed up to a 1911px viewport, then
 *   holds at the 1720px cap so text lines do not run absurdly wide on large
 *   displays. The old fixed 1440px ceiling gave 75% at 1920 and 56% at 2560.
 *   article-template.css reads these same variables, so it inherits this
 *   fix with no edit of its own.
 */

/* ======================================================================
   THE LAYOUT CONTRACT — SINGLE SOURCE OF TRUTH
   ======================================================================
   Every width on this site resolves from the tokens below. To change a
   width, change it HERE and nowhere else. The other sheets no longer
   carry their own numbers; they alias these:

     assets/component-layout-system.css  --hth-layout-shell / -wide / -prose
     style.css                           --hth-reading-width
     assets/article-template.css         reads --hth-shell-* directly

   TOKENS
     --hth-bleed-full      front page. Edge to edge, no page gutter.
     --hth-bleed-interior  interior pages. 90% of the viewport.
     --hth-shell-max       the interior shell, capped so a line of text
                           does not run absurdly wide on a big display.
     --hth-shell-gutter    the real margin outside the shell.
     --hth-measure         the prose cap, as a share of the rail it sits in.
                           100%: prose fills the shell and the shell holds the
                           90%. This was 86ch, which resolved to 832px and put
                           the paragraphs at 58% of a 1425px viewport inside a
                           shell that was correctly at 90% — the narrow centred
                           column under another name, one level further in.
                           A character-based measure can go back here; see the
                           note on the declaration below.
     --hth-wide-max        wide rail: figures, grids, tables, pull-outs.
                           This is 100% ON PURPOSE. The 90% bleed is applied
                           exactly ONCE, at the outermost content box (the
                           shell on articles, .hth-field-modules on landing
                           pages). A second viewport-relative width nested
                           inside an already-inset shell compounds the inset:
                           at 375px that produced a 270px column and a 22ch
                           line. Inner rails fill the rail they are in.

   WIDTH MATH
     min(1720px, 90vw) is exactly 90% bleed up to a 1911px viewport, then
     holds at the cap. A fixed 1440px ceiling gave 75% at 1920 and 56% at
     2560, which is where the "narrow blog page" feeling came from.
   ====================================================================== */

:root {
  --hth-bleed-full: 100%;
  /* 90%, not 90vw: vw counts the classic scrollbar and clientWidth does not,
     so a 90vw shell measured 90.9% of the page at 1440. A percentage of a
     full-width parent measures exactly 90%. */
  --hth-bleed-interior: 90%;
  /* No px cap. The house contract is --bleed-max: none — the 1720px ceiling
     put the page back to 67% at 2560, which is the narrow-column look the
     contract exists to remove. Long lines are handled by growing the type
     (--bleed-prose-size in house-bleed.css), not by starving the column. */
  --hth-shell-max: var(--hth-bleed-interior);
  --hth-shell-gutter: clamp(1rem, 4vw, 3rem);
  /* 2026-09-20, fleet appearance audit. Was 86ch, which is a defensible
     reading measure and was chosen deliberately — but it is a second width
     applied inside an already-inset shell, and it is what the 90% bleed was
     measuring against. At a 1425px viewport 86ch resolved to 832px: the shell
     held its 90% and the paragraphs inside it sat at 58%, which is the narrow
     centred column this contract exists to remove.

     The rail is the measure now. Prose fills the shell, the shell holds 90%,
     and the 90% is still applied exactly once. saltnotes.blog has run with no
     prose cap for some time and measures 86.7% on its article pages, which is
     the reference this was matched to.

     This is one token. To put the reading measure back, set --hth-measure to
     86ch and nothing else needs to change: --hth-prose-max and
     component-layout-system.css's --hth-layout-prose both read it. */
  --hth-measure: 100%;
  --hth-wide-max: 100%;
  --hth-prose-max: var(--hth-measure);
  --hth-tap-min: 44px;
}

/* ============================================================
   1. INTERIOR — canvases span the viewport, shells own gutters
   ============================================================ */

body:not(.home):not(.front-page) .hth-route-main,
body:not(.home):not(.front-page) main.hth-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

body:not(.home):not(.front-page) .hth-shell,
body:not(.home):not(.front-page) .hth-route-shell,
body:not(.home):not(.front-page) .hth-route-content__inner,
body:not(.home):not(.front-page) .hth-route-hero__inner,
body.fleet-bleed-interior .hth-shell,
body.fleet-bleed-interior .hth-route-shell,
body.fleet-bleed-draft .hth-shell,
body.fleet-bleed-draft .hth-route-shell {
  width: min(var(--hth-shell-max), calc(100% - (2 * var(--hth-shell-gutter))));
  max-width: var(--hth-shell-max);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Reading columns fill their grid track. Measure is set on text children,
   not by shrinking the component canvas. */
/* :not(.hth-route-shell) matters. On archives ONE element carries both
   classes, and this rule — later in the file, same specificity — was
   overwriting the shell's 90% with width:100%, which is why single posts
   measured 90% and category archives measured 100%. */
body:not(.home):not(.front-page) .hth-route-reading:not(.hth-route-shell),
body:not(.home):not(.front-page) .hth-prose {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  box-sizing: border-box;
}

/* Prose measure applies to text only. Figures, galleries, tables, and
   columns keep the full rail. */
body:not(.home) .hth-editorial-prose > :is(p, ul, ol, blockquote),
body:not(.home) .hth-route-reading__body > :is(p, ul, ol, blockquote),
/* The species-intelligence system carried its own hardcoded 70ch. It reads
   the contract measure now so /species/ widens with everything else. */
body:not(.home) .hth-si-system-note > :is(p, ul, ol, blockquote),
body:not(.home) .hth-si-prose > :is(p, ul, ol, blockquote) {
  max-width: min(var(--hth-prose-max), 100%);
}

body:not(.home) .hth-editorial-prose > :is(figure, .wp-block-image, .wp-block-group, .wp-block-columns, .wp-block-gallery, .wp-block-table),
body:not(.home) .hth-route-reading__body > :is(figure, .wp-block-image, .wp-block-group, .wp-block-columns, .wp-block-gallery) {
  width: 100%;
  max-width: 100%;
}

/* Full-width modules fill the current rail. No transform or negative-margin
   escape tricks. */
body:not(.home) .alignfull,
body:not(.home) .hth-route-reading .wp-block-post-content > .alignfull {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

/* ============================================================
   2. HOME — full bleed. Look preserved exactly.
   ============================================================ */

body.home .hth-shell,
body.front-page .hth-shell,
body.home .hth-route-shell {
  width: 100%;
  max-width: none;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  margin-inline: auto;
  box-sizing: border-box;
}

body.home .hth-site-header,
body.home .hth-site-footer,
body.home .hth-horizon-hero,
body.home .hth-home-hero,
body.home .hth-pathways,
body.home .hth-compatibility,
body.home .hth-method-strip,
body.home .hth-field-proof,
body.home .hth-home-field-gallery,
body.home .hth-home-field-notes,
body.home .hth-home-standard {
  width: 100%;
  max-width: none;
}

/* ============================================================
   3. UNIVERSAL SAFETY RAILS — home included
   These were previously fenced to body:not(.home), which is why the
   homepage had no containment guarantees at all.
   ============================================================ */

main :is(img, video, canvas, svg, iframe, embed, object) {
  max-width: 100%;
}

main :is(img, video, canvas, svg) {
  height: auto;
}

main {
  overflow-wrap: break-word;
}

.wp-block-table,
.hth-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cards size to content on the homepage only. Interior cards are already
   governed by flexible-layout-contract.css using !important — duplicating
   those rules here just creates a second authority to debug. */
body.home :is(.hth-rs-desk-card, .hth-rs-feature,
    .hth-rs-current-card, .hth-rs-ways-card) {
  min-height: 0;
  height: auto;
}

/* Shells clip on X only. Homepage only, for the same reason. */
body.home :is(main, .wp-site-blocks) {
  overflow-x: clip;
  overflow-y: visible;
}

/* Media keeps its crop; text containers stay unclipped. */
:is(.hth-route-card__media, .hth-si-profile-card__media,
    .hth-landing-hero__media, .hth-field-image) {
  overflow: hidden;
}

/* ============================================================
   4. RESPONSIVE — applies to home and interior alike
   ============================================================ */

@media (max-width: 900px) {
  :root {
    /* The 90% holds all the way down to the smallest phone. Below 400px the
     * gutter is small and that is correct. It used to drop to 100% minus a
     * gutter here, which rendered 93% at 390px — close, but not the contract. */
    --hth-bleed-interior: 90%;
    --hth-shell-gutter: 0px;
  }

  /* Interior keeps the 90% as the viewport narrows; the shell owns the gutter. */
  body:not(.home):not(.front-page) .hth-shell,
  body:not(.home):not(.front-page) .hth-route-shell,
  body.fleet-bleed-interior .hth-shell,
  body.fleet-bleed-draft .hth-shell {
    width: var(--hth-bleed-interior);
    max-width: var(--hth-bleed-interior);
    margin-inline: auto;
  }

  /* Every multi-column system collapses to one column, home included. */
  :is(.hth-route-grid, .hth-si-profile-grid, .hth-si-guide-grid, .hth-si-layer-grid,
      .hth-fm-grid, .hth-sp-grid, .hth-related-reading__grid, .hth-fish-grid,
      .hth-si-decision-starters, .hth-si-evidence-grid, .hth-sp-utility,
      .hth-editorial-split, .hth-rs-desk-grid, .hth-rs-feature-grid,
      .wp-block-columns) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .wp-block-column {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Touch targets. Links inside prose are excluded so body copy is
     not forced into oversized line boxes. */
  :is(.hth-rs-button, .hth-dropdown a, .hth-nav-trigger, .hth-chase-header__cta,
      .hth-rs-desk-card, .hth-rs-feature, button, [role="button"]) {
    min-height: var(--hth-tap-min);
  }
}

@media (max-width: 620px) {
  :root {
    --hth-shell-gutter: .85rem;
  }

  body.home .hth-shell,
  body.home .hth-route-shell {
    padding-inline: .85rem;
  }

  :is(.hth-landing-hero, .hth-route-hero--article, .hth-horizon-hero) {
    min-height: auto;
  }
}
/* hook-frame-lock */
/**
 * Hook the Horizon — interior frame lock (0.3.16-landings)
 *
 * Homepage is a coherent Deep Navy magazine. Interiors were painting a
 * Pearl FSE canvas UNDER a dark article well, so cream showed as a frame
 * around the header and reading well. This sheet is the last word on
 * canvas color (enqueued after bleed-layout).
 *
 * Targets body.fleet-bleed-interior (already on every non-home template)
 * and body.hth-navy-canvas. Woo cart/checkout/account/shop keep Pearl.
 * Live visitors are unchanged until this draft is published.
 */

html {
  background: var(--hth-navy-bg, #071827);
}

html:has(body.hth-pearl-canvas),
html:has(body.woocommerce-page):not(:has(body.single-post)):not(:has(body.hth-article-template)) {
  background: var(--hth-pearl-bg, #E3E1D9);
}

/* ------------------------------------------------------------------ */
/* Navy magazine canvas — interiors only                              */
/* ------------------------------------------------------------------ */

body.fleet-bleed-interior:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-shop):not(.hth-pearl-canvas),
body.hth-navy-canvas {
  --re-background-canvas: var(--hth-navy-bg, #071827);
  --re-background-surface: color-mix(in srgb, var(--hth-navy-bg, #071827) 86%, var(--hth-charcoal-bg, #424546));
  --re-background-elevated: color-mix(in srgb, var(--hth-navy-bg, #071827) 74%, var(--hth-charcoal-bg, #424546));
  --re-background-inverse: var(--hth-pearl-bg, #E3E1D9);
  --re-text-primary: var(--hth-pearl-fg, #E3E1D9);
  --re-text-secondary: var(--hth-gold-fg, #C7A257);
  --re-text-muted: rgb(var(--hth-pearl-fg-rgb, 227 225 217) / 0.86);
  --re-text-inverse: var(--hth-navy-fg, #071827);
  --re-heading: var(--hth-pearl-fg, #E3E1D9);
  --re-link: var(--hth-gold-fg, #C7A257);
  --re-link-hover: var(--hth-pearl-fg, #E3E1D9);
  --re-border-default: rgb(var(--hth-pearl-line-rgb, 227 225 217) / 0.18);
  --re-border-strong: var(--hth-gold-line, #C7A257);
  background: var(--hth-navy-bg, #071827) !important;
  color: var(--hth-pearl-fg, #E3E1D9) !important;
  color-scheme: dark;
}

body.fleet-bleed-interior:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-shop):not(.hth-pearl-canvas) .wp-site-blocks,
body.fleet-bleed-interior:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-shop):not(.hth-pearl-canvas) .hth-route-main,
body.fleet-bleed-interior:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-shop):not(.hth-pearl-canvas) .hth-route-main--single,
body.fleet-bleed-interior:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-shop):not(.hth-pearl-canvas) .hth-route-content,
body.fleet-bleed-interior:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-shop):not(.hth-pearl-canvas) main.hth-shell,
body.fleet-bleed-interior:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-shop):not(.hth-pearl-canvas) .hth-field-canvas,
body.fleet-bleed-interior:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-shop):not(.hth-pearl-canvas) .hth-archetype-canvas,
body.hth-navy-canvas .wp-site-blocks,
body.hth-navy-canvas .hth-route-main,
body.hth-navy-canvas .hth-route-main--single,
body.hth-navy-canvas .hth-route-content,
body.hth-navy-canvas main.hth-shell,
body.hth-navy-canvas .hth-field-canvas,
body.hth-navy-canvas .hth-archetype-canvas {
  background: var(--hth-navy-bg, #071827) !important;
  color: var(--hth-pearl-fg, #E3E1D9);
}

/* Kill the nested cream plate: reading well bleeds into navy. */
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-content__inner,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-field-modules,
body.hth-navy-canvas .hth-route-reading,
body.hth-navy-canvas .hth-route-content__inner,
body.hth-navy-canvas .hth-editorial-prose,
body.hth-navy-canvas .hth-field-modules {
  background: transparent;
  color: var(--hth-pearl-fg, #E3E1D9);
}

/* Type on navy */
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading p,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading li,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose p,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose li,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-pub-body {
  color: var(--hth-pearl-fg, #E3E1D9);
}

body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading h1,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading h2,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading h3,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading h4,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-article-handoff h2,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-article-notes h2,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-related-reading h2,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose h2,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose h3,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose > p.hth-editorial-lede,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-pub-body h2,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-pub-body h3,
body.fleet-bleed-interior:not(.hth-pearl-canvas) main.hth-shell > h1,
body.fleet-bleed-interior:not(.hth-pearl-canvas) main.hth-shell .wp-block-post-title,
body.fleet-bleed-interior:not(.hth-pearl-canvas) main.hth-shell .wp-block-query-title {
  color: var(--hth-pearl-fg, #E3E1D9) !important;
}

body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-main a,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose a,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading a {
  color: var(--hth-gold-fg, #C7A257);
}

body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-main a:hover,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose a:hover,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading a:hover {
  color: var(--hth-pearl-fg, #E3E1D9);
}

/* Elevated plates — no cream cards sitting on navy */
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-article-toc {
  background: color-mix(in srgb, var(--hth-navy-bg, #071827) 86%, var(--hth-charcoal-bg, #424546));
  color: var(--hth-pearl-fg, #E3E1D9);
  border-top-color: var(--hth-lake-line, #2E6F95);
}

body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-article-toc__label,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-article-toc__toggle {
  color: var(--hth-gold-fg, #C7A257);
}

body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-warning,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-main .hth-warning {
  background: rgb(var(--hth-gold-bg-rgb, 199 162 87) / 0.12);
  color: var(--hth-pearl-fg, #E3E1D9);
  border-left-color: var(--hth-gold-line, #C7A257);
}

body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-related-card,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-article-handoff,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-article-notes {
  background: color-mix(in srgb, var(--hth-navy-bg, #071827) 86%, var(--hth-charcoal-bg, #424546));
  color: var(--hth-pearl-fg, #E3E1D9);
  border-color: rgb(var(--hth-pearl-line-rgb, 227 225 217) / 0.14);
}

body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-site-footer,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-chase-footer {
  background: var(--hth-navy-bg, #071827);
  color: var(--hth-pearl-fg, #E3E1D9);
}

/* ------------------------------------------------------------------ */
/* Commerce keeps Pearl                                               */
/* ------------------------------------------------------------------ */

body.hth-pearl-canvas,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-shop {
  --re-background-canvas: var(--hth-pearl-bg, #E3E1D9);
  --re-background-surface: var(--hth-pearl-bg, #E3E1D9);
  --re-text-primary: var(--hth-charcoal-fg, #424546);
  --re-heading: var(--hth-navy-fg, #071827);
  --re-link: var(--hth-navy-fg, #071827);
  background: var(--hth-pearl-bg, #E3E1D9) !important;
  color: var(--hth-charcoal-fg, #424546) !important;
  color-scheme: light;
}

body.hth-pearl-canvas .wp-site-blocks,
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-account .wp-site-blocks,
body.woocommerce-shop .wp-site-blocks {
  background: var(--hth-pearl-bg, #E3E1D9) !important;
  color: var(--hth-charcoal-fg, #424546);
}

/* ------------------------------------------------------------------ */
/* Landing surfaces — designed hero only, no cream inner plate        */
/* ------------------------------------------------------------------ */

body.hth-landing-surface .hth-route-hero {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.hth-landing-surface .hth-route-rail,
body.hth-landing-surface .hth-route-featured,
body.hth-landing-surface .hth-featured-credit,
body.hth-landing-surface .hth-article-toc,
body.hth-landing-surface .hth-article-handoff,
body.hth-landing-surface .hth-article-notes,
body.hth-landing-surface .hth-related-reading {
  display: none !important;
}

body.hth-landing-surface .hth-route-content,
body.hth-landing-surface .hth-route-content__inner,
body.hth-landing-surface .hth-route-reading,
body.hth-landing-surface .entry-content,
body.hth-landing-surface .wp-block-post-content,
body.hth-landing-surface .hth-field-modules,
body.hth-landing-surface .hth-editorial-prose,
body.hth-landing-surface .hth-landing-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  min-width: 0 !important;
  background: transparent;
  overflow: visible !important;
  box-sizing: border-box;
}

body.hth-navy-canvas .hth-landing-page {
  background: var(--hth-navy-bg, #071827) !important;
  color: var(--hth-pearl-fg, #E3E1D9) !important;
}

body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas {
  background: var(--hth-pearl-bg, #E3E1D9) !important;
  color: var(--hth-charcoal-fg, #424546) !important;
}

body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas :is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--hth-navy-fg, #071827) !important;
}

body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas :is(p, li, figcaption) {
  color: var(--hth-charcoal-fg, #424546) !important;
}

body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas a {
  color: var(--hth-navy-fg, #071827) !important;
  text-decoration-color: var(--hth-gold-line, #C7A257);
}

body.hth-navy-canvas .hth-landing-page .hth-landing-band:not(.is-canvas) :is(h1, h2, h3, h4, h5, h6, strong),
body.hth-navy-canvas .hth-landing-page .hth-landing-band:not(.is-canvas) .hth-route-card h3 {
  color: var(--hth-pearl-fg, #E3E1D9) !important;
}

body.hth-navy-canvas .hth-landing-page .hth-landing-band:not(.is-canvas) :is(p, li),
body.hth-navy-canvas .hth-landing-page .hth-landing-band:not(.is-canvas) .hth-route-card p {
  color: rgb(var(--hth-pearl-fg-rgb, 227 225 217) / 0.92) !important;
}

body.hth-navy-canvas .hth-landing-page .hth-landing-band:not(.is-canvas) .hth-landing-kicker,
body.hth-navy-canvas .hth-landing-page .hth-landing-band:not(.is-canvas) .hth-route-card a {
  color: var(--hth-gold-fg, #C7A257) !important;
}

body.hth-navy-canvas .hth-landing-page .hth-field-rule {
  background: rgb(var(--hth-pearl-bg-rgb, 227 225 217) / 0.08) !important;
  color: var(--hth-pearl-fg, #E3E1D9) !important;
}
/* hook-the-horizon-surface-contrast */
/* Hook the Horizon — canonical surface contrast contract
 * Loaded last. Fixed surfaces own their foreground polarity regardless of
 * OS color scheme, global tokens, Gutenberg inline color residue, or module order.
 */
:root{
  --hth-fg-dark:var(--hth-navy-fg, #071827);
  --hth-fg-dark-muted:var(--hth-charcoal-fg, #424546);
  --hth-fg-light:var(--hth-pearl-fg, #E3E1D9);
  --hth-fg-light-muted:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90);
  --hth-accent-dark:var(--hth-gold-bg, #C7A257);
  --hth-link-light:var(--hth-gold-fg, #C7A257);
  --hth-link-dark:var(--hth-navy-fg, #071827);
}

/* Explicit surface aliases for future modules. */
.hth-surface--dark{color:var(--hth-pearl-fg)}
.hth-surface--light{color:var(--hth-charcoal-fg)}

/* ---------- Dark fixed surfaces ---------- */
.hth-site-header,
.hth-site-footer,
.hth-horizon-hero,
.hth-compatibility,
.hth-system-line>div,
.hth-chase-header,
.hth-chase-footer,
.hth-route-hero--article,
.honey-hole-intelligence__header,
.hth-fm-remember>div,
.hth-landing-band.is-dark,
.hth-landing-band.is-blue,
.hth-final-route{
  --hth-current-heading:var(--hth-fg-light);
  --hth-current-text:var(--hth-fg-light-muted);
  --hth-current-link:var(--hth-link-light);
  --hth-current-accent:var(--hth-accent-dark);
  color:var(--hth-current-text);
}

.hth-site-header :is(h1,h2,h3,h4,h5,h6,strong),
.hth-site-footer :is(h1,h2,h3,h4,h5,h6,strong),
.hth-horizon-hero :is(h1,h2,h3,h4,h5,h6,strong),
.hth-compatibility :is(h1,h2,h3,h4,h5,h6,strong),
.hth-system-line>div :is(h1,h2,h3,h4,h5,h6,strong),
.hth-chase-header :is(h1,h2,h3,h4,h5,h6,strong),
.hth-chase-footer :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-hero--article :is(h1,h2,h3,h4,h5,h6,strong),
.honey-hole-intelligence__header :is(h1,h2,h3,h4,h5,h6,strong),
.hth-fm-remember>div :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-reading .hth-landing-band.is-dark :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-reading .hth-landing-band.is-blue :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-reading .hth-final-route :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--hth-current-heading);
}

.hth-site-footer :is(p,li,dt,dd,figcaption),
.hth-horizon-hero :is(p,li,dt,dd,figcaption),
.hth-compatibility :is(p,li,dt,dd,figcaption),
.hth-system-line>div :is(p,li,dt,dd,figcaption),
.hth-chase-footer :is(p,li,dt,dd,figcaption),
.hth-route-hero--article :is(p,li,dt,dd,figcaption),
.honey-hole-intelligence__header :is(p,li,dt,dd,figcaption),
.hth-fm-remember>div :is(p,li,dt,dd,figcaption),
.hth-route-reading .hth-landing-band.is-dark :is(p,li,dt,dd,figcaption),
.hth-route-reading .hth-landing-band.is-blue :is(p,li,dt,dd,figcaption),
.hth-route-reading .hth-final-route :is(p,li,dt,dd,figcaption){
  color:var(--hth-current-text);
}

.hth-site-header a,
.hth-site-footer a,
.hth-horizon-hero a,
.hth-compatibility a,
.hth-chase-header a,
.hth-chase-footer a,
.hth-route-hero--article a,
.honey-hole-intelligence__header a,
.hth-fm-remember>div a,
.hth-route-reading .hth-landing-band.is-dark a,
.hth-route-reading .hth-landing-band.is-blue a,
.hth-route-reading .hth-final-route a{
  color:var(--hth-current-link);
}

/* Landing cards are translucent, so their text follows the band beneath them. */
.hth-route-reading .hth-landing-band.is-dark .hth-route-card :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-reading .hth-landing-band.is-blue .hth-route-card :is(h1,h2,h3,h4,h5,h6,strong){color:var(--hth-pearl-fg)}
.hth-route-reading .hth-landing-band.is-dark .hth-route-card :is(p,li),
.hth-route-reading .hth-landing-band.is-blue .hth-route-card :is(p,li){color:var(--hth-fg-light-muted)}
.hth-route-reading .hth-landing-band.is-dark .hth-route-card a,
.hth-route-reading .hth-landing-band.is-blue .hth-route-card a{color:var(--hth-gold-fg)}

/* ---------- Light fixed surfaces ---------- */
.hth-pathway-card,
.hth-water-read__variables>div,
.hth-field-proof .wp-block-post,
.hth-method-strip,
.hth-route-rail,
.hth-route-aside,
.hth-route-content,
.hth-route-tool,
.hth-route-tool__method>div,
.hth-route-reading .hth-application-embed__header,
.hth-fm-card,
.hth-fm-band>*,
.hth-fm-callout,
.hth-fm-boundary,
.hth-fm-related,
.hth-route-reading .hth-landing-band.is-canvas{
  --hth-current-heading:var(--hth-fg-dark);
  --hth-current-text:var(--hth-fg-dark-muted);
  --hth-current-link:var(--hth-link-dark);
  color:var(--hth-current-text);
}

.hth-pathway-card :is(h1,h2,h3,h4,h5,h6,strong),
.hth-water-read__variables>div :is(h1,h2,h3,h4,h5,h6,strong),
.hth-field-proof .wp-block-post :is(h1,h2,h3,h4,h5,h6,strong),
.hth-method-strip :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-rail :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-aside :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-tool__method>div :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-reading .hth-application-embed__header :is(h1,h2,h3,h4,h5,h6,strong),
.hth-fm-card :is(h1,h2,h3,h4,h5,h6,strong),
.hth-fm-band>* :is(h1,h2,h3,h4,h5,h6,strong),
.hth-fm-callout :is(h1,h2,h3,h4,h5,h6,strong),
.hth-fm-boundary :is(h1,h2,h3,h4,h5,h6,strong),
.hth-fm-related :is(h1,h2,h3,h4,h5,h6,strong),
.hth-route-reading .hth-landing-band.is-canvas :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--hth-current-heading);
}

.hth-pathway-card :is(p,li,dt,dd,figcaption),
.hth-water-read__variables>div :is(p,li,dt,dd,figcaption),
.hth-field-proof .wp-block-post :is(p,li,dt,dd,figcaption),
.hth-method-strip :is(p,li,dt,dd,figcaption),
.hth-route-rail :is(p,li,dt,dd,figcaption),
.hth-route-aside :is(p,li,dt,dd,figcaption),
.hth-route-tool__method>div :is(p,li,dt,dd,figcaption),
.hth-route-reading .hth-application-embed__header :is(p,li,dt,dd,figcaption),
.hth-fm-card :is(p,li,dt,dd,figcaption),
.hth-fm-band>* :is(p,li,dt,dd,figcaption),
.hth-fm-callout :is(p,li,dt,dd,figcaption),
.hth-fm-boundary :is(p,li,dt,dd,figcaption),
.hth-fm-related :is(p,li,dt,dd,figcaption),
.hth-route-reading .hth-landing-band.is-canvas :is(p,li,dt,dd,figcaption){
  color:var(--hth-current-text);
}

.hth-route-reading .hth-landing-band.is-canvas .hth-route-card :is(h1,h2,h3,h4,h5,h6,strong){color:var(--hth-navy-fg)}
.hth-route-reading .hth-landing-band.is-canvas .hth-route-card :is(p,li){color:var(--hth-charcoal-fg)}
.hth-route-reading .hth-landing-band.is-canvas a{color:var(--hth-navy-fg)}

/* Preserve useful accents without letting them carry body copy. */
.hth-kicker,.hth-eyebrow,.hth-fm-kicker,.hth-fm-callout__label,.hth-fm-label,
.hth-route-reading .hth-landing-band.is-dark .hth-landing-kicker,
.hth-route-reading .hth-landing-band.is-blue .hth-landing-kicker{
  color:var(--hth-gold-fg);
}
.hth-route-reading .hth-landing-band.is-canvas .hth-landing-kicker{color:var(--hth-navy-fg)}

/* ---------- Gutenberg collision guard ----------
 * Stored content contains literal colors. Correct only known polarity collisions;
 * buttons are excluded so intentional CTA pairings remain intact.
 */
:is(.wp-block-group,.wp-block-column)[style*="background-color:#071827" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#176F78" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#2E6F95" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#355133" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#424546" i]{
  --hth-current-heading:var(--hth-fg-light);
  --hth-current-text:var(--hth-fg-light-muted);
  --hth-current-link:var(--hth-link-light);
}

:is(
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#071827" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#176F78" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#2E6F95" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#355133" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#424546" i]
) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,strong,em)[style*="color:#071827" i],
:is(
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#071827" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#176F78" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#2E6F95" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#355133" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#424546" i]
) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,strong,em)[style*="color:#424546" i]{
  color:var(--hth-pearl-fg)!important;
}

:is(.wp-block-group,.wp-block-column)[style*="background-color:#E3E1D9" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#FFFFFF" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#fff" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#F5F2E9" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#A9BBC4" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#A89578" i],
:is(.wp-block-group,.wp-block-column)[style*="background-color:#d8cbb7" i]{
  --hth-current-heading:var(--hth-fg-dark);
  --hth-current-text:var(--hth-fg-dark-muted);
  --hth-current-link:var(--hth-link-dark);
}

:is(
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#E3E1D9" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#FFFFFF" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#fff" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#F5F2E9" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#A9BBC4" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#A89578" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#d8cbb7" i]
) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,strong,em)[style*="color:#FFFFFF" i],
:is(
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#E3E1D9" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#FFFFFF" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#fff" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#F5F2E9" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#A9BBC4" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#A89578" i],
  :is(.wp-block-group,.wp-block-column)[style*="background-color:#d8cbb7" i]
) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,strong,em)[style*="color:#E3E1D9" i]{
  color:var(--hth-navy-fg)!important;
}

/* WordPress preset classes can carry !important; only override them in known surfaces. */
:is(.hth-landing-band.is-dark,.hth-landing-band.is-blue,.hth-fm-remember>div)
:is(.has-navy-color,.has-deep-navy-color,.has-charcoal-color,.has-kitchen-ink-color){color:var(--hth-pearl-fg)!important}
:is(.hth-landing-band.is-canvas,.hth-fm-card,.hth-fm-band>*,.hth-fm-callout,.hth-fm-boundary)
:is(.has-white-color,.has-pearl-color,.has-ivory-color,.has-salt-color){color:var(--hth-navy-fg)!important}

/* ---------- Final page-ground and light-island guard ----------
 * The Navy article canvas may contain stored inline dark text, while selected
 * components deliberately remain Pearl. Resolve both polarities here.
 */
body.hth-navy-canvas main
:is(p,li,dt,dd,figcaption,blockquote)[style*="color:#071827" i],
body.hth-navy-canvas main
:is(p,li,dt,dd,figcaption,blockquote)[style*="color:#424546" i]{
  color:var(--hth-pearl-fg)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg)!important;
}

body.hth-navy-canvas main :is(
  .hth-ninety-card:not([data-tone="navy"]),
  .hth-knot-linked-library__intro,
  .hth-knot-family__head,
  .hth-landing-band.is-canvas,
  section[style*="background:#E3E1D9" i],
  article[style*="background:#E3E1D9" i],
  aside[style*="background:#E3E1D9" i],
  div[style*="background:#E3E1D9" i]
){
  color:var(--hth-charcoal-fg)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg)!important;
}

body.hth-navy-canvas main :is(
  .hth-ninety-card:not([data-tone="navy"]),
  .hth-knot-linked-library__intro,
  .hth-knot-family__head,
  .hth-landing-band.is-canvas,
  section[style*="background:#E3E1D9" i],
  article[style*="background:#E3E1D9" i],
  aside[style*="background:#E3E1D9" i],
  div[style*="background:#E3E1D9" i]
) :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
}

body.hth-navy-canvas main :is(
  .hth-ninety-card:not([data-tone="navy"]),
  .hth-knot-linked-library__intro,
  .hth-knot-family__head,
  .hth-landing-band.is-canvas,
  section[style*="background:#E3E1D9" i],
  article[style*="background:#E3E1D9" i],
  aside[style*="background:#E3E1D9" i],
  div[style*="background:#E3E1D9" i]
) :is(p,li,dt,dd,figcaption,blockquote){
  color:var(--hth-charcoal-fg)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg)!important;
}

body.hth-navy-canvas main :is(
  .hth-ninety-card:not([data-tone="navy"]),
  .hth-knot-linked-library__intro,
  .hth-knot-family__head,
  .hth-landing-band.is-canvas,
  section[style*="background:#E3E1D9" i],
  article[style*="background:#E3E1D9" i],
  aside[style*="background:#E3E1D9" i],
  div[style*="background:#E3E1D9" i]
) a{
  color:var(--hth-navy-fg)!important;
  -webkit-text-fill-color:var(--hth-navy-fg)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}

/* Explicit dark islands nested inside a Pearl band reclaim light foregrounds. */
body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas
.hth-ninety-card[data-tone="navy"]{
  background:var(--hth-navy-bg, #071827)!important;
  color:var(--hth-fg-light-muted)!important;
  -webkit-text-fill-color:var(--hth-fg-light-muted)!important;
}
body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas
.hth-ninety-card[data-tone="navy"] :is(h1,h2,h3,h4,h5,h6,p,li,strong,figcaption){
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}
body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas
.hth-ninety-card[data-tone="navy"] a{
  color:var(--hth-gold-fg, #C7A257)!important;
  -webkit-text-fill-color:var(--hth-gold-fg, #C7A257)!important;
}

/* Legacy light fills become the approved Pearl surface at render time. */
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#F3F1EA" i],
  [style*="background-color:#F3F1EA" i],
  [style*="background:#F4F2EC" i],
  [style*="background-color:#F4F2EC" i],
  [style*="background:#F5F2E9" i],
  [style*="background-color:#F5F2E9" i],
  [style*="background:#EAF0F2" i],
  [style*="background-color:#EAF0F2" i],
  [style*="background:#E6EFF0" i],
  [style*="background-color:#E6EFF0" i],
  [style*="background:#F8F7F2" i],
  [style*="background-color:#F8F7F2" i]
){
  background:var(--hth-pearl-bg, #E3E1D9)!important;
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#F3F1EA" i],
  [style*="background-color:#F3F1EA" i],
  [style*="background:#F4F2EC" i],
  [style*="background-color:#F4F2EC" i],
  [style*="background:#F5F2E9" i],
  [style*="background-color:#F5F2E9" i],
  [style*="background:#EAF0F2" i],
  [style*="background-color:#EAF0F2" i],
  [style*="background:#E6EFF0" i],
  [style*="background-color:#E6EFF0" i],
  [style*="background:#F8F7F2" i],
  [style*="background-color:#F8F7F2" i]
) :is(h1,h2,h3,h4,h5,h6,strong,[data-hth-contrast-fix="dark"]){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#F3F1EA" i],
  [style*="background-color:#F3F1EA" i],
  [style*="background:#F4F2EC" i],
  [style*="background-color:#F4F2EC" i],
  [style*="background:#F5F2E9" i],
  [style*="background-color:#F5F2E9" i],
  [style*="background:#EAF0F2" i],
  [style*="background-color:#EAF0F2" i],
  [style*="background:#E6EFF0" i],
  [style*="background-color:#E6EFF0" i],
  [style*="background:#F8F7F2" i],
  [style*="background-color:#F8F7F2" i]
) :is(p,li,dt,dd,figcaption,blockquote){
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}

/* Mid-tone legacy blocks become Navy fields with the original hue as a cue. */
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#176F78" i],
  [style*="background-color:#176F78" i],
  [style*="background:#2E6F95" i],
  [style*="background-color:#2E6F95" i]
){
  background:var(--hth-navy-bg, #071827)!important;
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
  box-shadow:inset 0 4px 0 var(--hth-teal-line, #176F78);
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#176F78" i],
  [style*="background-color:#176F78" i],
  [style*="background:#2E6F95" i],
  [style*="background-color:#2E6F95" i]
) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,blockquote,strong){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#176F78" i],
  [style*="background-color:#176F78" i],
  [style*="background:#2E6F95" i],
  [style*="background-color:#2E6F95" i]
) a{
  color:var(--hth-gold-fg, #C7A257)!important;
  -webkit-text-fill-color:var(--hth-gold-fg, #C7A257)!important;
}

/* Dark page-ground routes. */
body.search.hth-navy-canvas .hth-search-page__intro{
  color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body.search.hth-navy-canvas .hth-search-page__intro :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body.search.hth-navy-canvas .hth-search-page__intro :is(p,li){
  color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
  -webkit-text-fill-color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
}
body.search.hth-navy-canvas .hth-search-page__eyebrow{
  color:var(--hth-gold-fg, #C7A257)!important;
  -webkit-text-fill-color:var(--hth-gold-fg, #C7A257)!important;
}
body.search.hth-navy-canvas .hth-search-results__meta{
  color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
  -webkit-text-fill-color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
}
body.search.hth-navy-canvas .hth-search-result{
  background:var(--hth-pearl-bg, #E3E1D9)!important;
  color:var(--hth-charcoal-fg, #424546)!important;
}
body.search.hth-navy-canvas .hth-search-result :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body.search.hth-navy-canvas .hth-search-result :is(p,li){
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}
body.search.hth-navy-canvas .hth-search-result a{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-lake-line, #2E6F95);
}

body.hth-navy-canvas #main .hth-five-routes > header{
  color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body.hth-navy-canvas #main .hth-five-routes > header :is(h1,h2,h3,p,span){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body.hth-navy-canvas #main .hth-five-routes > header > p{
  color:var(--hth-gold-fg, #C7A257)!important;
  -webkit-text-fill-color:var(--hth-gold-fg, #C7A257)!important;
}
body.hth-navy-canvas #main .hth-five-routes__grid > article{
  background:var(--hth-pearl-bg, #E3E1D9)!important;
  color:var(--hth-charcoal-fg, #424546)!important;
}
body.hth-navy-canvas #main .hth-five-routes__grid > article :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body.hth-navy-canvas #main .hth-five-routes__grid > article :is(p,li){
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}
body.hth-navy-canvas #main .hth-five-routes__grid > article a{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-lake-line, #2E6F95);
}

/* Legacy metadata accents on Navy use the approved Gold. */
body.hth-navy-canvas main [style*="color:#7A5D25" i],
body.hth-navy-canvas main [style*="color:#7A5A20" i],
body.hth-navy-canvas main [style*="color:#6B5420" i],
body.hth-navy-canvas main [style*="color:#6B5220" i]{
  color:var(--hth-gold-fg, #C7A257)!important;
  -webkit-text-fill-color:var(--hth-gold-fg, #C7A257)!important;
}

/* Pearl-canvas notices are opaque light islands, even inside a Navy main rail. */
body.hth-pearl-canvas .hth-warning{
  background:color-mix(in srgb,var(--hth-coral-bg, #D55C3E) 9%,var(--hth-pearl-bg, #E3E1D9))!important;
  color:var(--hth-charcoal-fg, #424546)!important;
}
body.hth-pearl-canvas .hth-warning :is(p,li,strong){
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}

/* Opaque landing CTAs always use the Coral/Navy accessible pair. */
body main .hth-landing-page :is(.wp-element-button,.wp-block-button__link),
body.hth-navy-canvas main.hth-route-main .hth-route-reading .hth-landing-page .hth-route-card :is(a.wp-element-button,a.wp-block-button__link){
  background:var(--hth-coral-bg, #D55C3E)!important;
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}

/* Route heroes on the Navy canvas own light foregrounds. */
body.hth-navy-canvas .hth-route-hero{
  color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body.hth-navy-canvas .hth-route-hero :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body.hth-navy-canvas .hth-route-hero :is(p,li,span){
  color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
  -webkit-text-fill-color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
}
body.hth-navy-canvas .hth-route-hero :is(a,.hth-route-eyebrow,.hth-article-meta__item b),
body.hth-navy-canvas .hth-route-hero__signal b{
  color:var(--hth-gold-fg, #C7A257)!important;
  -webkit-text-fill-color:var(--hth-gold-fg, #C7A257)!important;
}

/* Pearl-canvas route heroes reverse to Navy/Charcoal. */
body.hth-pearl-canvas .hth-route-hero{
  background:var(--hth-pearl-bg, #E3E1D9)!important;
  color:var(--hth-charcoal-fg, #424546)!important;
}
body.hth-pearl-canvas .hth-route-hero :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body.hth-pearl-canvas .hth-route-hero :is(p,li,span){
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}
body.hth-pearl-canvas .hth-route-hero :is(a,.hth-route-eyebrow,.hth-article-meta__item b),
body.hth-pearl-canvas .hth-route-hero__signal b{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}

/* These policy/stewardship templates paint their hero Pearl on a Navy body. */
body:is(.page-id-92,.page-id-104,.page-id-548,.page-id-549) .hth-route-hero{
  background:var(--hth-pearl-bg, #E3E1D9)!important;
  color:var(--hth-charcoal-fg, #424546)!important;
}
body:is(.page-id-92,.page-id-104,.page-id-548,.page-id-549) .hth-route-hero :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body:is(.page-id-92,.page-id-104,.page-id-548,.page-id-549) .hth-route-hero :is(p,li,span){
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}
body:is(.page-id-92,.page-id-104,.page-id-548,.page-id-549) .hth-route-hero
:is(a,.hth-route-eyebrow,.hth-article-meta__item b),
body:is(.page-id-92,.page-id-104,.page-id-548,.page-id-549) .hth-route-hero__signal b{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}

/* Approved Pearl inline blocks own dark foregrounds. */
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
){
  background:var(--hth-pearl-bg, #E3E1D9)!important;
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
) :is(h1,h2,h3,h4,h5,h6,strong,[data-hth-contrast-fix="dark"]){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
) :is(p,li,dt,dd,figcaption,blockquote){
  color:var(--hth-charcoal-fg, #424546)!important;
  -webkit-text-fill-color:var(--hth-charcoal-fg, #424546)!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
) a{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}

/* ==========================================================================
   2026-09-20 — fleet appearance audit. Four measured pairings, each from the
   house palette used on a ground it cannot carry. Every replacement is also
   from the palette; nothing new is introduced except one on-light value for
   the metal, which follows the same reasoning as the two-value brass on
   vanityvice.blog.
   ========================================================================== */

:root{
  /* Champagne gold is a dark-ground colour: 7.47:1 on deep navy, and only
     2.40:1 on white and 1.84:1 on pearl, which is below the 3:1 floor even
     for large text. This is the on-light value of the same metal — 5.93:1 on
     white and 4.53:1 on pearl, so it clears AA as small text on both. Ask for
     it by name; nothing inherits it. */
  --hth-gold-ink:#776134;
}

/* 1. Legacy inline text colour on the navy canvas.
   122 published posts and pages carry `color:#…` in their block markup, from
   when interiors were a light surface. 53 of them use the charcoal family
   (#424546, #3F4344, #5A5E60), which measures 1.79:1 to 2.74:1 on deep navy —
   present in the DOM, unreadable on screen. The pearl the prose already
   inherits is 13.72:1.

   Inline styles can only be answered with !important. The three light palette
   values are excluded so a deliberate pearl, gold or coral accent in content
   still survives; only the dark residue defers. Narrow this to the three
   charcoal hexes if a dark inline colour is ever wanted on navy again. */
body.hth-navy-canvas :is(.hth-editorial-prose,.hth-field-modules,.wp-block-post-content,.entry-content)
  :is(p,li,dd,dt,span,strong,em,blockquote,figcaption)[style*="color"]:not(
    [style*="#E3E1D9" i]):not([style*="#C7A257" i]):not([style*="#D55C3E" i]){
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}

/* 2. Buttons on burnt coral. Gold on coral is 1.61:1. Navy is the only palette
   value that clears AA on that ground at 4.64:1 — pearl is 2.95:1 and white
   3.87:1, so neither is enough. */
body :is(a,button).wp-element-button:is([style*="background:#D55C3E" i],[style*="background-color:#D55C3E" i]),
body :is([style*="background:#D55C3E" i],[style*="background-color:#D55C3E" i]) :is(a,button).wp-element-button{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}

/* 2b. The same coral/navy pair, for CTAs outside .hth-landing-page.
   The rule above pairs them correctly on landing pages. The coral ground is
   the theme's default CTA fill, so the buttons inside cover blocks and the
   route strips injected from functions.php carry it too — and there they were
   still resolving to gold at 1.61:1. Commerce keeps its own navy/pearl pair
   (hook-route-system.css) and is left out. */
body main :is(.wp-block-cover,.hth-landing-band,.hth-final-route) :is(a,button):is(.wp-element-button,.wp-block-button__link){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}

/* 2c. White cards sitting on the navy canvas.
   .hth-field-object__card is a rgba(255,255,255,.78) card inside a navy
   interior, so its headings inherited the dark-ground gold and measured
   2.40:1 on their own white ground. The card is a light surface and owns
   light-surface foregrounds: navy body copy, and the on-light metal for the
   heading so the card keeps its accent. .hth-field-object__tool is the dark
   variant of the same card and is excluded. */
body :is(.hth-field-object__card):not(.hth-field-object__tool){
  color:var(--hth-navy-fg, #071827);
}
body :is(.hth-field-object__card):not(.hth-field-object__tool) :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-gold-ink)!important;
  -webkit-text-fill-color:var(--hth-gold-ink)!important;
}

/* 2d. Light surfaces inside the navy interior.
   The mirror image of 1. The navy canvas sets pearl foregrounds with
   !important, correctly, and these components then paint themselves white or
   near-white without restating a foreground — so the pearl carried straight
   onto their own light ground:

     .hth-knot-expanded            #FFFFFF   pearl body and subheads  1.31:1
     .hth-knot-reference-depth     #F4F2EC   pearl body, kickers, li  1.17:1
     .hth-field-object__card       #FFFFFF   pearl body               1.31:1
     .jetpack-subscription-modal   #FEFEFE   pearl heading and body   1.30:1

   The first two are on every knot post, which is most of this site's
   long-form. A light surface owns light-surface foregrounds: navy copy, the
   on-light metal for headings, and navy links underlined in gold — the same
   pair this file already uses for pearl grounds further up. The Jetpack modal
   is a plugin's markup, so it can only be answered here. */
body.hth-navy-canvas :is(
  .hth-knot-expanded,
  .hth-knot-reference-depth,
  .jetpack-subscription-modal__modal-content,
  .hth-field-object__card:not(.hth-field-object__tool)
){
  color:var(--hth-navy-fg, #071827)!important;
}
body.hth-navy-canvas :is(
  .hth-knot-expanded,
  .hth-knot-reference-depth,
  .jetpack-subscription-modal__modal-content,
  .hth-field-object__card:not(.hth-field-object__tool)
) :is(p,li,dd,dt,span,strong,em,blockquote,figcaption,summary){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body.hth-navy-canvas :is(
  .hth-knot-expanded,
  .hth-knot-reference-depth,
  .jetpack-subscription-modal__modal-content,
  .hth-field-object__card:not(.hth-field-object__tool)
) :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-gold-ink)!important;
  -webkit-text-fill-color:var(--hth-gold-ink)!important;
}
body.hth-navy-canvas :is(
  .hth-knot-expanded,
  .hth-knot-reference-depth,
  .jetpack-subscription-modal__modal-content,
  .hth-field-object__card:not(.hth-field-object__tool)
) a{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}

/* 2e. CTAs that fill themselves with an accent.
   The theme's default CTA fill is burnt coral and the Species hero's primary
   action fills with the metal; both kept gold or pearl text, measuring 1.61:1
   and 1.84:1. Navy is 4.64:1 on coral and 7.47:1 on gold — the pair this file
   already names as the accessible one.

   theme.json already declares the right pair for elements.button — burnt-coral
   background, deep-navy text. The gold was arriving from elements.link, which
   these CTAs match because they are anchors, and winning. So this is scoped to
   ANCHORS carrying a button class: it restores the declared button text colour
   on the coral fill and on the Species hero's metal fill, including the CTAs in
   the route strips injected from functions.php that a container-scoped rule
   missed.

   Deliberately not `button`: a <button> that overrides the fill — the navy
   "Send message" submit on /hook-us/ — would then be navy on navy, which is
   the bug this block exists to remove. Anchors are the ones that inherit the
   link colour; real buttons never did. Commerce anchors keep the pearl that
   hook-route-system.css pairs with their navy fill.

   2026-09-20, second pass: the blanket .wp-element-button half of this has
   been removed. article-hunter.css no longer repaints buttons gold, so
   theme.json's elements.button pair — burnt-coral fill, deep-navy text —
   applies on its own and needs no override. Forcing navy on every button also
   reached buttons that override the fill with navy, and put "Open Tackle
   Link →" at 1.00:1 on /tackle-link-analyst/. What is left is the one button
   that fills itself with the metal and genuinely needs the ink stated. */
body main a.hth-si-hero__action--primary{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}

/* .rr-btn on /refusal-reader/ fills with the metal and labels itself with the
   metal — #C7A257 on #C7A257, 1.00:1, on the page's only purchase link. The
   class exists nowhere in this theme: the Refusal Reader block ships its own
   <style> inside the page content, so this is the only place that can answer
   it without editing the post. Navy on the metal is 7.47:1. */
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas a.rr-btn,
body main a.rr-btn,
body main .rr .rr-btn{
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}

/* 2m. The interactive tools state navy on their own dark panel.
     .dg-label / .dg-hint   on /set-the-drag/
     .wc-step__q            on /what-changed/
   all measured #071827 on #0C2233 — 1.11:1. The panel is a step lighter than
   the canvas, not a light surface, so these take the pearl the rest of the
   dark interior uses.

   REMOVED 2026-09-20, second pass. This used to force pearl on
   .dg-label / .dg-hint / .wc-step__q, and it fought the contrast guard rather
   than helping it.

   assets/js/mobile-responsive.js measures each pair after paint. It stamps
   data-hth-contrast-fix when the pair fails and REMOVES the attribute when it
   passes. With this rule present the sequence was: guard measures, sees the
   pearl this rule supplied, concludes the pair passes, removes its own stamp —
   and with the stamp gone the component's navy took over again, on a panel the
   guard had already judged too dark for it. The element ended up navy on
   #0C2233 with no stamp left to say so.

   The guard's own rules in mobile-responsive.css now outrank the component
   layers, so it can be left to do this unaided. A static override of a value
   the guard is actively measuring will always risk this loop.

   What was actually wrong is below, and it is not the tool. set-the-drag.css
   pairs .dg-tool correctly: a #0C2233 panel, pearl copy, gold labels. The
   band rules for the light `is-canvas` band reach inside it and repaint that
   copy for a ground the tool does not have — the tool paints its own, darker
   one. So rather than restate a colour for these elements, the tool's own
   pairing is restored and given enough weight to survive the band. */
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks :is(.dg-tool,.wc-tool,.tfa-tool) :is(p,li,span,dd,dt,small,figcaption){
  color:var(--hth-pearl-fg,var(--hth-pearl-fg, #E3E1D9))!important;
  -webkit-text-fill-color:var(--hth-pearl-fg,var(--hth-pearl-fg, #E3E1D9))!important;
}
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks :is(.dg-tool,.wc-tool,.tfa-tool) :is(.dg-label,.wc-label,.tfa-label,label){
  color:var(--hth-gold-fg,var(--hth-gold-fg, #C7A257))!important;
  -webkit-text-fill-color:var(--hth-gold-fg,var(--hth-gold-fg, #C7A257))!important;
}
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks :is(.dg-tool,.wc-tool,.tfa-tool) :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-pearl-fg,var(--hth-pearl-fg, #E3E1D9))!important;
  -webkit-text-fill-color:var(--hth-pearl-fg,var(--hth-pearl-fg, #E3E1D9))!important;
}

/* .tfa-tool joined the list above on 2026-09-20. The identification key on
   /telling-fish-apart/ is the same instrument pattern — #0C2233 panel, pearl
   copy, gold labels, teal for the live choice — and it was never added, so its
   whole panel read at 1.68:1: charcoal #424546 on the navy.

   Worth being precise about why, because `color` was not the problem. .tfa-tool
   sets color:var(--hth-pearl-fg) and that resolved correctly. What reached inside
   was -webkit-text-fill-color: the page-shell charcoal is stated as a fill
   further up, fill inherits, and fill is what paints the glyphs. The panel was
   pearl by its own reckoning and charcoal on screen. That is why every rule in
   this file states both properties, and why a rule that states only `color`
   cannot be trusted to have done anything.

   The option buttons are exempt. .tfa-group carries two states of its own —
   pearl on a translucent fill, white on the teal when pressed — and the span
   rule above would flatten the pressed one to pearl on teal, 4.48:1. Binding
   them to currentColor lets each state paint what it states. Same treatment as
   .dg-opt, for the same reason. */
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks .tfa-tool .tfa-group,
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks .tfa-tool .tfa-group *{
  -webkit-text-fill-color:currentColor!important;
}
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks .tfa-tool .tfa-group *{
  color:inherit!important;
}

/* 2j. Two more light surfaces, same shape as .hth-fig and .hth-route-card.
     .hth-landing-band.is-canvas   a light band; its copy stayed pearl
     .hm-free                      a light card; its <strong> stayed white
                                   (#FFFFFF on #EEF0E9, 1.15:1)
   is-canvas only — .is-dark bands are the opposite polarity and are left
   alone.

   CORRECTED 2026-09-20: .hth-landing-band.is-canvas has been taken out of
   this list. The name suggests a light band and it is one on /field-tools/,
   but on /set-the-drag/, /what-changed/ and /capability-map/ the same class
   paints #071827 — measured, not assumed. Treating it as light here repainted
   the copy inside a dark band in ink, which is how .dg-hint and .dg-label
   ended up at 1.11:1 on the Set the Drag instrument: not the tool's doing, and
   not the contrast guard's. set-the-drag.css pairs that panel correctly on its
   own, and the rule below now leaves it alone.

   is-canvas is not a reliable statement of polarity. Anything keyed to it has
   to be verified per template, so nothing here is. */
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hm-free :is(p,li,dd,dt,span,strong,em,figcaption,small){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hm-free :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-gold-ink)!important;
  -webkit-text-fill-color:var(--hth-gold-ink)!important;
}
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hm-free a:not(.wp-element-button):not(.wp-block-button__link){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}

/* 2l. Content that paints its own light background inline.
   On /ice-fishing-where-to-start/ the section cards are anchors carrying an
   inline light fill and no class at all — gold or white text on #F4F2EC and
   #EAF0F2, 1.12:1 to 2.15:1. Rule 1 above deliberately spares gold and white
   inline colours, because on the navy canvas they are correct; here the
   element has moved its own ground out from under them.

   Matched on the inline background rather than on a class, because there is
   no class. The list is the light fills actually found in content; a dark
   inline fill is not matched and keeps the canvas foregrounds.

   Matched on the bare hex, not on "background:#HEX". The first version of this
   required no space after the colon and the markup writes "background: #F4F2EC",
   so it matched nothing — the white cards cleared only because their rule
   happened to be spelled without one. A hex on its own is spacing-agnostic.

   CORRECTED 2026-09-21: matched on the background property again, in both
   spellings, because a bare hex is also a text colour. The navy panels on
   /research-and-standards/ are written style="color:#ffffff;
   background-color:#071827": white copy on the panel's own navy, correct as
   written. "#FFFFFF" matched the color, the rule read it as a light fill, and
   every line in the panel went #071827 on #071827, 1:1, invisible. The
   situation posts carry the same shape (color:#F6F4EC on background:#071827
   chips). Every light hex written inline in content is either a fill or a
   text colour sitting on its own dark fill, never light text on a light
   surface, so the property has to be part of the match. The spaced spelling
   keeps what the bare hex was brought in for; served markup writes
   "background:#F4F2EC" with no space today. */
body.hth-navy-canvas :is(a,div,section,article,aside,p,li):is(
  [style*="background:#F4F2EC" i],[style*="background: #F4F2EC" i],[style*="background-color:#F4F2EC" i],[style*="background-color: #F4F2EC" i],
  [style*="background:#EAF0F2" i],[style*="background: #EAF0F2" i],[style*="background-color:#EAF0F2" i],[style*="background-color: #EAF0F2" i],
  [style*="background:#F5F4EF" i],[style*="background: #F5F4EF" i],[style*="background-color:#F5F4EF" i],[style*="background-color: #F5F4EF" i],
  [style*="background:#FFFFFF" i],[style*="background: #FFFFFF" i],[style*="background-color:#FFFFFF" i],[style*="background-color: #FFFFFF" i],
  [style*="background:#F8F7F2" i],[style*="background: #F8F7F2" i],[style*="background-color:#F8F7F2" i],[style*="background-color: #F8F7F2" i],
  [style*="background:#FBF8F1" i],[style*="background: #FBF8F1" i],[style*="background-color:#FBF8F1" i],[style*="background-color: #FBF8F1" i],
  [style*="background:#F6F4EC" i],[style*="background: #F6F4EC" i],[style*="background-color:#F6F4EC" i],[style*="background-color: #F6F4EC" i]
){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body.hth-navy-canvas :is(a,div,section,article,aside):is(
  [style*="background:#F4F2EC" i],[style*="background: #F4F2EC" i],[style*="background-color:#F4F2EC" i],[style*="background-color: #F4F2EC" i],
  [style*="background:#EAF0F2" i],[style*="background: #EAF0F2" i],[style*="background-color:#EAF0F2" i],[style*="background-color: #EAF0F2" i],
  [style*="background:#F5F4EF" i],[style*="background: #F5F4EF" i],[style*="background-color:#F5F4EF" i],[style*="background-color: #F5F4EF" i],
  [style*="background:#FFFFFF" i],[style*="background: #FFFFFF" i],[style*="background-color:#FFFFFF" i],[style*="background-color: #FFFFFF" i],
  [style*="background:#F8F7F2" i],[style*="background: #F8F7F2" i],[style*="background-color:#F8F7F2" i],[style*="background-color: #F8F7F2" i],
  [style*="background:#FBF8F1" i],[style*="background: #FBF8F1" i],[style*="background-color:#FBF8F1" i],[style*="background-color: #FBF8F1" i],
  [style*="background:#F6F4EC" i],[style*="background: #F6F4EC" i],[style*="background-color:#F6F4EC" i],[style*="background-color: #F6F4EC" i]
) :is(p,li,span,strong,em,small,h1,h2,h3,h4,h5,h6,figcaption){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}

/* 2k. Landing-band CTAs are coral-filled by the rule near the top of this
   file, which also states deep-navy text — and was still losing on
   /capability-map/, where the label measured 1.61:1. Same weight as the light
   surfaces above so it is not decided by source order. Only the filled button
   class; nothing else in the band. */
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hth-landing-band a:is(.wp-element-button,.wp-block-button__link),
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hth-landing-page a:is(.wp-element-button,.wp-block-button__link){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
body main .hth-commerce a:is(.wp-element-button,.wp-block-button__link){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}

/* 2f. The figure plate is a light card.
   .hth-fig paints #F5F4EF and sits inside the navy interior, so its kicker,
   title, list and caption all kept the canvas pearl: #E3E1D9 on #F5F4EF,
   1.19:1. Eight elements on /habitat-sequence/ alone. Navy is 15:1 on that
   card and the on-light metal carries the heading.

   The body class is repeated to raise specificity, which is deliberate. The
   interior heading rule further up this file is
     body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-reading h1, …
   at (0,3,1) with !important, and the article sheet carries
     .hth-a .hth-a-main .wp-block-post-content :is(h3)
   at the same weight. Both are correct for text on the navy canvas and both
   reach inside this light card, so a (0,2,1) rule cannot answer them however
   many !importants it carries. Three repeats puts these at (0,4,1) and settles
   it by weight rather than by which sheet happens to load last.

   .hth-route-card is the same component pattern and is included here: it
   paints a light #DCDCD6 and correctly sets navy on itself, but its headings
   and paragraphs are matched directly by the interior heading rule and stayed
   pearl — 1.05:1, on every /water-types/ page and the stillwater guides. A
   card that states its own foreground still loses to a rule that matches its
   children, which is the whole shape of this bug across the site.

   Weighted above the band rules on purpose. A component that paints its own
   ground has to outrank rules that describe the band around it, because the
   band is not what its text sits on. The rule that made this necessary is
     body.hth-band-hero.hth-landing-surface .hth-landing-page > .hth-landing-band:first-child
   which pearls the first band on a band-hero page — correct for the band, and
   wrong for the #F5F4EF figure inside it, where it measured 1.19:1 on
   /kayak-fishing/. */
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks :is(.hth-fig:not(.is-night),.hth-route-card){
  color:var(--hth-navy-fg, #071827)!important;
}
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks :is(.hth-fig:not(.is-night),.hth-route-card) :is(p,li,dd,dt,span,strong,em,figcaption,small){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks :is(.hth-fig:not(.is-night),.hth-route-card) :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-gold-ink)!important;
  -webkit-text-fill-color:var(--hth-gold-ink)!important;
}
html body .wp-site-blocks.wp-site-blocks.wp-site-blocks :is(.hth-fig:not(.is-night),.hth-route-card) a{
  color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}

/* .hth-route-card has two forms and only one of them is a light card.
   On /water-types/reservoir-main-basin/ it paints #DCDCD6 and wants navy. On
   /water-types/ the same class is transparent inside .hth-landing-band.is-dark
   and wants pearl — the card sets navy on itself in both cases, which is only
   right for the filled one, and the rule above then carried that navy onto the
   dark band and took "Organizing forces:" to 1.00:1.

   CSS cannot ask what colour a background resolved to, so the dark band is
   named instead. Anything inside an is-dark band keeps the pearl the band is
   built for, whatever the card says about itself.

   .hth-fig is NOT in this exception, and that matters. .hth-route-card is
   transparent inside a dark band, so it does take the band's ground. .hth-fig
   paints its own #F5F4EF whatever band it sits in — figures.css gives it that
   fill unconditionally and only .hth-fig.is-night swaps to #071827. Including
   it here put pearl on its light panel: the kicker on /kayak-fishing/ measured
   1.19:1. A component that paints its own ground does not inherit the band's.
   The is-night variant is excluded from the light treatment above for the
   mirror-image reason. */
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hth-landing-band.is-dark .hth-route-card,
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hth-landing-band.is-dark .hth-route-card :is(p,li,dd,dt,span,strong,em,figcaption,small){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hth-landing-band.is-dark .hth-route-card :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hth-landing-band.is-dark .hth-route-card a{
  color:var(--hth-gold-fg, #C7A257)!important;
  -webkit-text-fill-color:var(--hth-gold-fg, #C7A257)!important;
}

/* The dark variant of the figure keeps its own pearl. */
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hth-fig.is-night,
body.hth-navy-canvas.hth-navy-canvas.hth-navy-canvas .hth-fig.is-night :is(p,li,dd,dt,span,strong,em,figcaption,small,h1,h2,h3,h4,h5,h6){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}

/* 2g. The edition handoff line, at #0B1F2E on the navy body — 1.07:1. A near
   navy on navy is a line that is present and unreadable; the muted pearl this
   file already uses for secondary copy on dark is 12.3:1. */
body.hth-navy-canvas .hth-edition-handoff__line,
.hth-edition-handoff__line{
  color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
  -webkit-text-fill-color:rgb(var(--hth-pearl-fg-rgb, 227 225 217) / .90)!important;
}

/* 2h. Gold links on a pearl landing band. The band is light (#E3E1D9) and the
   link kept the on-dark metal: 1.84:1. Navy is 13.7:1 on pearl, underlined in
   the metal — the same pair this file uses for pearl grounds further up. */
/* is-canvas dropped here too, for the reason recorded above: it is a light
   band on some templates and #071827 on others, so a link rule keyed to it
   darkens links that are already on a dark ground. is-pearl is kept — that one
   does name its ground. */
body.hth-navy-canvas.hth-navy-canvas .hth-landing-band.is-pearl a:not(.wp-element-button):not(.wp-block-button__link),
body .hth-landing-band.is-pearl a:not(.wp-element-button):not(.wp-block-button__link){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}

/* 2i. Commerce renders on the navy main.
   hook-route-system.css sets .hth-commerce * { color: var(--hth-navy-fg) }, which
   is right for a light commerce surface — but cart, checkout and account paint
   the navy main, so the field labels, "Remember me" and "Lost your password?"
   measured 1.00:1 to 1.86:1 there. Pearl is 13.7:1 on that ground.

   Inputs are deliberately left out: they carry their own light fill and want
   the navy back. Buttons keep the navy/pearl pair hook-route-system gives
   them. */
body:is(.woocommerce-account,.woocommerce-cart,.woocommerce-checkout) :is(.hth-commerce,.woocommerce) :is(p,li,label,legend,span,td,th,dt,dd,h1,h2,h3,h4,small,strong,em){
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}
body:is(.woocommerce-account,.woocommerce-cart,.woocommerce-checkout) :is(.hth-commerce,.woocommerce) a:not(.button):not(.wp-element-button){
  color:var(--hth-gold-fg, #C7A257)!important;
  -webkit-text-fill-color:var(--hth-gold-fg, #C7A257)!important;
}
body:is(.woocommerce-account,.woocommerce-cart,.woocommerce-checkout) :is(input,select,textarea){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
/* The account hero title sits on the navy main but outside .woocommerce, so
   the rule above never reached it, and --re-heading resolves to navy on these
   templates: "My Account" was navy on navy, invisible. */
body:is(.woocommerce-account,.woocommerce-cart,.woocommerce-checkout) .hth-a-hero__title{
  color:var(--hth-pearl-fg, #E3E1D9)!important;
  -webkit-text-fill-color:var(--hth-pearl-fg, #E3E1D9)!important;
}

/* Buttons do not inherit a fill.
   Several rules in this file state -webkit-text-fill-color on a container or
   on a paragraph, which is right for the text they mean — and fill inherits.
   A button inside that states only `color` is then painted by the container's
   fill instead of its own. Found three times on the full crawl, two of them
   caused by rules above:
     - 2i states pearl on commerce <p>; WooCommerce's "Log in" button sits in a
       <p class="form-row"> on its own light-grey fill, so it painted pearl on
       #F0F0F0 — 1.15:1.
     - 2l states navy on a light inline panel; the navy "Check it" button on
       /ice-thickness-safety/ sits in one, so it painted navy on its own navy —
       1:1, invisible.
     - the Field Shop's buy buttons, earlier the same day, the same way.
   So a button's fill defaults to its own colour. This only replaces an
   inherited value: any rule that states a fill on a button directly still wins,
   including every !important one in this file. */
button,
.button,
.wp-element-button,
.wp-block-button__link{
  -webkit-text-fill-color:currentColor;
}

/* 3. Gold headings on a light ground. 2.40:1 on white against a 3:1 floor for
   large text. The on-light metal keeps the colour and clears it. */
body.hth-pearl-canvas :is(h1,h2,h3,h4):is([style*="color:#C7A257" i]),
body :is(.hth-surface--light,[style*="background:#FFFFFF" i],[style*="background:#E3E1D9" i]) :is(h1,h2,h3,h4):is([style*="color:#C7A257" i]){
  color:var(--hth-gold-ink)!important;
  -webkit-text-fill-color:var(--hth-gold-ink)!important;
}

/* 4. The Field Shop is built entirely out of light panels.
   /field-shop/ defines .hth-shop in an inline <style> in the page content, and
   every panel it paints is light: #F6F4EC for .hs-card and the .hs-soon cells,
   #EFECE1 for .hs-free and the .hs-grid cells, #F4E1DA for .hs-holds, #CBC7B7
   in the grid gaps. The only dark things in the component are a.hs-btn, which
   fills itself navy, and hr.hs-rule, which carries no text.

   Measured across the component: 118 text nodes between 1.04:1 and 2.18:1 —
   canvas pearl and gold links on cream. The usual shape. The panel states a
   colour for its own ground and a rule matching its children directly wins
   anyway.

   2j already covers panels that paint a light fill, but it matches on the style
   attribute. These fills come from a stylesheet, so nothing there reaches them.

   Weight. The panel's own `.hth-shop .hs-soon p` is (0,2,1) with no !important,
   so it loses outright. Two rules in article-hunter.css have to be answered and
   they are not the same size:
     .hth-a .hth-a-main .wp-block-post-content :is(h3)                  (0,3,1)
     .hth-a .hth-a-main .wp-block-post-content a:not(...):not(...)      (0,6,1)
   The anchor rule's three :not() arguments each count, which is why a rule sized
   for the heading does nothing for the links — that is what kept the gold
   anchors gold. Four repeats of .hth-shop plus the panel in the middle puts the
   text and heading rules at (0,7,4) and the anchor rule at (0,8,4), so this is
   settled by weight and not by which sheet happens to load last.

   span and b are excluded: the gold "Available now" eyebrow and the coral
   .hs-holds eyebrow are accents the page means to have. Both are corrected at
   source in the page's own style block, where the values are stated, so they
   keep their character instead of being flattened to ink.

   CORRECTED, same day, twice — both worth keeping written down.

   First version scoped to .hth-shop and not to its panels. But .hs-eyebrow and
   .hs-lede also appear as direct children of .hth-shop, on the navy canvas with
   no panel under them, and they were painted #071827 on #071827. Six of them,
   1:1. "Every panel in this component is light" was true and still did not
   license "every element in this component is on a light panel." The scope is
   now the panels themselves.

   Second version set -webkit-text-fill-color on p — and the buy buttons are
   anchors inside a p. Fill inherits; a.hs-btn states only `color`, so the
   inherited navy fill painted its label navy on its own navy ground. All five
   buttons, 1:1. The fill property is what paints the glyphs, which is exactly
   why it is stated here, and exactly why it cannot be stated on a container
   without saying what the things inside it get. So the buttons now state both,
   in all four of their states: solid carries a navy fill and a pearl label; on
   hover it drops the fill onto the cream card and takes navy; .alt is the
   reverse and inverts on hover. Every .hs-btn on the page sits inside .hs-card,
   so the hover ground is cream, not canvas — checked rather than assumed. */
html body.hth-navy-canvas .wp-site-blocks .hth-shop.hth-shop.hth-shop.hth-shop :is(.hs-card,.hs-free,.hs-holds,.hs-grid>div,.hs-soon>div) :is(p,li,dd,dt,strong,em,small,figcaption){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
html body.hth-navy-canvas .wp-site-blocks .hth-shop.hth-shop.hth-shop.hth-shop :is(.hs-card,.hs-free,.hs-holds,.hs-grid>div,.hs-soon>div) :is(h1,h2,h3,h4,h5,h6){
  color:var(--hth-gold-ink)!important;
  -webkit-text-fill-color:var(--hth-gold-ink)!important;
}
html body.hth-navy-canvas .wp-site-blocks .hth-shop.hth-shop.hth-shop.hth-shop :is(.hs-card,.hs-free,.hs-holds,.hs-grid>div,.hs-soon>div) a:not(.hs-btn){
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
  text-decoration-color:var(--hth-gold-line, #C7A257);
}
/* Field Shop buttons: fill and text from the same token set, so the pair holds
   on every ground (the page's own CSS paints a fixed navy fill). */
html body.hth-navy-canvas .wp-site-blocks .hth-shop.hth-shop.hth-shop.hth-shop a.hs-btn{
  background:var(--hth-navy-fg, #071827)!important;
  border-color:var(--hth-navy-fg, #071827)!important;
  color:var(--hth-cream-bg, #F6F4EC)!important;
  -webkit-text-fill-color:var(--hth-cream-bg, #F6F4EC)!important;
}
html body.hth-navy-canvas .wp-site-blocks .hth-shop.hth-shop.hth-shop.hth-shop a.hs-btn:hover{
  background:transparent!important;
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
html body.hth-navy-canvas .wp-site-blocks .hth-shop.hth-shop.hth-shop.hth-shop a.hs-btn.alt{
  background:transparent!important;
  color:var(--hth-navy-fg, #071827)!important;
  -webkit-text-fill-color:var(--hth-navy-fg, #071827)!important;
}
html body.hth-navy-canvas .wp-site-blocks .hth-shop.hth-shop.hth-shop.hth-shop a.hs-btn.alt:hover{
  background:var(--hth-navy-fg, #071827)!important;
  color:var(--hth-cream-bg, #F6F4EC)!important;
  -webkit-text-fill-color:var(--hth-cream-bg, #F6F4EC)!important;
}
/* hook-the-horizon-a11y-contrast */
/* Hook the Horizon — palette-native contrast remediation
   Accent colors stay decorative on light surfaces; readable text uses Deep Navy.
   Dark surfaces use Pearl or Champagne Gold. No automatic OS color-mode swap.
   2026-08-30 */

:root {
  --hth-gold-on-light: var(--hth-navy-bg, #071827);
  --hth-gold-bright: var(--hth-gold-bg, #C7A257);
  --hth-coral-on-light: var(--hth-navy-bg, #071827);
  --hth-coral-bright: var(--hth-coral-bg, #D55C3E);
  --hth-muted-on-dark: rgb(var(--hth-pearl-fg-rgb, 227 225 217) / 0.92);
}

/* Light contexts: accent names describe the cue, not the text color. */
:is(
  [data-theme="light"],
  .has-pearl-background-color,
  .has-white-background-color,
  .hth-pearl-canvas,
  .hth-home-read,
  .hth-home-proof
) :is(.eyebrow, .hth-eyebrow, .text-gold, .text-coral, .accent-coral) {
  color: var(--hth-navy-fg, #071827) !important;
}

:is(
  [data-theme="light"],
  .has-pearl-background-color,
  .has-white-background-color,
  .hth-pearl-canvas,
  .hth-home-read,
  .hth-home-proof
) :is(.text-gold, .eyebrow, .hth-eyebrow) {
  text-decoration-color: var(--hth-gold-line, #C7A257);
}

:is(
  [data-theme="light"],
  .has-pearl-background-color,
  .has-white-background-color,
  .hth-pearl-canvas,
  .hth-home-read,
  .hth-home-proof
) :is(.text-coral, .accent-coral) {
  text-decoration-color: var(--hth-coral-line, #D55C3E);
}

.re-link:not(.re-link--inverse),
.hth-meta,
.hth-caption {
  color: var(--re-link, var(--hth-navy-fg, #071827)) !important;
}

/* Gold and Coral fills always carry Deep Navy text. */
:is(
  .hth-rs-button--gold,
  .hth-rs-button--coral,
  .has-champagne-gold-background-color,
  .has-burnt-coral-background-color
),
:is(
  .hth-rs-button--gold,
  .hth-rs-button--coral,
  .has-champagne-gold-background-color,
  .has-burnt-coral-background-color
) * {
  color: var(--hth-navy-fg, #071827) !important;
  -webkit-text-fill-color: var(--hth-navy-fg, #071827) !important;
}

/* Dark contexts keep the bright reference accents. */
:is(
  [data-theme="dark"],
  .has-deep-navy-background-color,
  .has-charcoal-background-color,
  .has-forest-green-background-color,
  .hth-navy-canvas,
  .hth-rs-hero__copy
) :is(.eyebrow, .hth-eyebrow, .text-gold) {
  color: var(--hth-gold-fg, #C7A257) !important;
}

:is(
  [data-theme="dark"],
  .has-deep-navy-background-color,
  .has-charcoal-background-color,
  .has-forest-green-background-color,
  .hth-navy-canvas,
  .hth-rs-hero__copy
) :is(.text-coral, .accent-coral) {
  color: var(--hth-coral-fg, #D55C3E) !important;
}

/* Supporting text on dark photographic surfaces. */
.hth-hero p,
.hth-deck,
[data-theme="dark"] .muted,
.re-text-muted {
  color: var(--hth-muted-on-dark) !important;
  opacity: 1 !important;
}

/* High-contrast mode remains inside the approved palette. */
html[data-cvd="high-contrast"] :is(.eyebrow, .text-gold) {
  color: var(--hth-navy-fg, #071827) !important;
  font-weight: 600;
}

html[data-theme="dark"][data-cvd="high-contrast"] :is(.eyebrow, .text-gold) {
  color: var(--hth-pearl-fg, #E3E1D9) !important;
}

/* ---- 2026-09-03 · landing-band remediation ------------------------------ */

/* The Pearl "is-canvas" band carried a Champagne Gold kicker. #C7A257 on
   #E3E1D9 is 1.83:1 at .76rem/800 against a 4.5:1 requirement. Deep Navy on
   the same field is 13.6:1. Gold survives as the underline cue, exactly the
   treatment .eyebrow already gets above. landing-pages.css sets the gold at
   (0,5,1), so this needs !important rather than more specificity.
   Flagged by Lighthouse on /gear/; the same pair is on every canvas band,
   including the article pages that reuse the landing layout. */
.hth-landing-page .hth-landing-band.is-canvas .hth-landing-kicker,
.hth-landing-page .hth-final-route.is-canvas .hth-landing-kicker {
  color: var(--hth-navy-fg, #071827) !important;
  -webkit-text-fill-color: var(--hth-navy-fg, #071827) !important;
  text-decoration-color: var(--hth-gold-line, #C7A257);
}

/* Call-to-action links that are the whole paragraph are targets, not prose:
   Lighthouse target-size flagged them at ~20px tall on article pages. Links
   sitting inside real sentences are deliberately untouched. */
.hth-landing-page :is(.hth-route-card, .hth-landing-band, .hth-final-route) > p > a:only-child,
.hth-landing-page :is(.hth-route-card, .hth-landing-band, .hth-final-route) p > a.wp-element-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The closing band on /gear/ — .hth-final-route, landing-pages.css line 208 —
   is painted linear-gradient(135deg,#071827,#176F78). Contrast has to hold at
   the light end, not the average, and measured against #176F78 the band's own
   colours are: link gold #C7A257 at 2.45:1 and body pearl #E3E1D9 at 4.49:1.
   Both clear 4.5:1 easily against the navy end, which is why every pair looks
   fine when it is checked by hand against the token values. That is the node
   Lighthouse reports and does not name.
   Gold cannot reach 4.5:1 against any mid teal, so the inline links stop
   carrying their meaning in colour and take an underline instead. The gold
   button is untouched — navy on #C7A257 is 7.5:1 and it passes as it is.
   #F2F0E9 is 5.15:1 on #176F78 and 19.8:1 on #071827. */
.hth-landing-page .hth-final-route,
.hth-landing-page .hth-final-route :is(p, li, dt, dd, figcaption) {
  color: #F2F0E9 !important;
}
/* The related-knots card is a light card on a dark page. knot-architecture.css
   gives it paper for a background and navy/charcoal for its type, but that file
   is enqueued before surface-contrast.css, which paints the whole dark reading
   column pearl and wins on order. The card kept its paper background and lost
   its dark type, so the eyebrow, the heading and the body paragraph rendered
   #E3E1D9 on #DDDDD7 — 1.04:1, which is not low contrast, it is invisible text.
   This is the node Lighthouse counts on /gear/ and does not name; it is on
   every page that ends with this block, not just that one. Confirmed with
   axe-core in the page rather than by hand, because the background resolves as
   color(srgb ...) and a hand check that only reads rgb() skips the element.
   The knot links and the pillar button set their own colours and already pass
   (navy on paper 13.2:1, pearl on navy 13.7:1), so they stay as they are.
   Navy on paper is 13.2:1; charcoal on paper is 7.0:1. The eyebrow's designed
   teal #176F78 is 4.31:1 there, which is why it takes navy instead. */
/* No -webkit-text-fill-color anywhere in this block. It inherits and outranks
   a child's own color, which would repaint the pearl pillar button charcoal on
   navy. */
.hth-related-knots > p,
.hth-knot-profile-context > p {
  color: var(--hth-charcoal-fg, var(--hth-charcoal-fg, #424546)) !important;
}
/* The eyebrow is also a direct child <p>, so it needs to outrank the rule
   above to keep navy rather than charcoal. Both pass; navy is the design. */
.hth-related-knots > p.hth-related-knots__eyebrow,
.hth-knot-profile-context > p.hth-knot-profile-context__eyebrow {
  color: var(--hth-navy-fg, var(--hth-navy-fg, #071827)) !important;
}
/* The heading needs the body classes. frame-lock.css line 96 paints every h2
   inside .hth-editorial-prose pearl at !important and (0,3,1), which a plain
   .hth-related-knots > h2 cannot outrank however important it is. */
.hth-related-knots > h2,
.hth-knot-profile-context > h2,
body:not(.hth-pearl-canvas) .hth-editorial-prose .hth-related-knots > h2,
body:not(.hth-pearl-canvas) .hth-editorial-prose .hth-knot-profile-context > h2,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose .hth-related-knots > h2,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-editorial-prose .hth-knot-profile-context > h2 {
  color: var(--hth-navy-fg, var(--hth-navy-fg, #071827)) !important;
}
/* Belt and braces for the JS guard. assets/js/mobile-responsive.js now reads
   color-mix backgrounds and should stop tagging this card at all, but if it
   ever tags one again, mobile-responsive.css answers the tag at (0,2,3) with
   !important. Repeating the card class and matching the attribute reaches
   (0,3,1), which outranks it without depending on where the card sits. */
.hth-related-knots.hth-related-knots > :is(h2, p)[data-hth-contrast-fix],
.hth-knot-profile-context.hth-knot-profile-context > :is(h2, p)[data-hth-contrast-fix] {
  color: var(--hth-charcoal-fg, var(--hth-charcoal-fg, #424546)) !important;
}
.hth-related-knots.hth-related-knots > h2[data-hth-contrast-fix],
.hth-related-knots.hth-related-knots > p.hth-related-knots__eyebrow[data-hth-contrast-fix],
.hth-knot-profile-context.hth-knot-profile-context > h2[data-hth-contrast-fix],
.hth-knot-profile-context.hth-knot-profile-context > p.hth-knot-profile-context__eyebrow[data-hth-contrast-fix] {
  color: var(--hth-navy-fg, var(--hth-navy-fg, #071827)) !important;
}

.hth-landing-page .hth-final-route a:not(.wp-element-button):not(.wp-block-button__link) {
  color: #F2F0E9 !important;
  -webkit-text-fill-color: #F2F0E9 !important;
  text-decoration: underline;
  text-decoration-color: var(--hth-gold-line, #C7A257);
  text-underline-offset: 0.2em;
}
/* hook-flexible-layout-contract */
/**
 * Fleet flexible layout contract — Hook the Horizon
 * Components size to content. No forced card cages. No page-shell clip.
 * Heroes/media may keep crop; prose and cards stay free.
 */

/* —— Content modules: never fixed-height boxes —— */
body:not(.home):not(.front-page) :is(
  .hth-route-card,
  .hth-si-layer-grid article,
  .hth-si-profile-card,
  .hth-si-guide-card,
  .hth-fm-card,
  .hth-knot-profile-card,
  .hth-sp-card,
  .hth-fish-card,
  .hth-related-reading article,
  .hth-related-reading__item,
  .hth-compat-state,
  .nlh-card,
  .wp-block-group.nlh-card,
  .hth-chase-path,
  .hth-chase-technique,
  .hth-chase-tools a,
  .hth-home-note-grid a,
  .hth-rs-current-card,
  .hth-rs-ways-card
){
  min-height:0!important;
  height:auto!important;
}

/* Empty-frame traps from old dashboard layouts */
body:not(.home) .hth-si-layer-grid article,
body:not(.home) .hth-si-profile-card,
body:not(.home) .hth-fm-card{
  overflow:visible!important;
  display:flex!important;
  flex-direction:column!important;
}

/* —— Page shells: clip X only, never Y —— */
body:not(.home) :is(
  .hth-landing-page,
  .hth-route-reading,
  .hth-editorial-prose,
  .hth-field-modules,
  .hth-si,
  .hth-route-main,
  main,
  .wp-site-blocks
){
  overflow-x:clip!important;
  overflow-y:visible!important;
}

/* Landing / route cards: top-border rhythm, not white boxes */
body:not(.home) .hth-landing-page .hth-route-card,
body:not(.home) .hth-route-reading .hth-route-card{
  background:transparent!important;
  box-shadow:none!important;
  padding:1.15rem 0 0!important;
  border-top:2px solid var(--hth-gold-line,var(--hth-gold-line, #C7A257))!important;
  min-height:0!important;
}

/* Grids: auto-fit, never locked 12-col spans on content */
body:not(.home) :is(
  .hth-route-grid,
  .hth-si-profile-grid,
  .hth-si-guide-grid,
  .hth-si-layer-grid,
  .hth-fm-grid,
  .hth-sp-grid,
  .hth-related-reading__grid,
  .hth-fish-grid
){
  grid-auto-rows:auto!important;
}

/* Prose measure on text only */
body:not(.home) .hth-editorial-prose > :is(p,ul,ol,blockquote),
body:not(.home) .hth-route-reading__body > :is(p,ul,ol,blockquote){
  max-width:min(70ch,100%);
}
body:not(.home) .hth-editorial-prose > :is(figure,.wp-block-image,.wp-block-group,.wp-block-columns,.wp-block-gallery,.wp-block-table),
body:not(.home) .hth-route-reading__body > :is(figure,.wp-block-image,.wp-block-group,.wp-block-columns,.wp-block-gallery){
  max-width:100%!important;
  width:100%!important;
}

/* Media keeps crop; text containers unclipped */
body:not(.home) :is(
  .hth-route-card__media,
  .hth-si-profile-card__media,
  .hth-landing-hero__media,
  .hth-field-image
){
  overflow:hidden;
}

/* —— Phones / tablets: single column, soft heroes —— */
@media (max-width:900px){
  body:not(.home) :is(
    .hth-route-grid,
    .hth-si-profile-grid,
    .hth-si-guide-grid,
    .hth-si-layer-grid,
    .hth-fm-grid,
    .hth-sp-grid,
    .hth-related-reading__grid,
    .hth-fish-grid,
    .hth-si-decision-starters,
    .hth-si-evidence-grid,
    .hth-sp-utility,
    .hth-editorial-split,
    .wp-block-columns
  ){
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:1rem!important;
  }
  body:not(.home) .wp-block-column{
    flex-basis:100%!important;
    width:100%!important;
    max-width:100%!important;
  }
  body:not(.home) :is(
    .hth-route-hero,
    .hth-landing-hero,
    .hth-route-hero--article
  ){
    min-height:clamp(14rem,42vh,24rem)!important;
  }
  body:not(.home) .hth-map-stage{
    min-height:clamp(14rem,40vw,22rem)!important;
  }
  /* Landing surface: hide decorative dual-rail chrome that wastes space */
  body.hth-landing-surface .hth-route-main .hth-route-hero,
  body.hth-landing-surface .hth-route-main .hth-route-rail{
    display:none!important;
  }
}

@media (max-width:620px){
  body:not(.home){
    --hth-shell:calc(100% - 1.25rem);
  }
  body:not(.home) :is(
    .hth-landing-hero,
    .hth-route-hero--article,
    .hth-horizon-hero
  ){
    min-height:auto!important;
  }
  body:not(.home) .hth-sp-utility a{
    min-height:0!important;
  }
}