/* 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: #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(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(227,225,217)' stroke-opacity='0.2' stroke-width='2.5'/%3E%3Ccircle cx='962' cy='300' r='10' fill='rgb(199,162,87)' fill-opacity='0.7'/%3E%3Ccircle cx='962' cy='300' r='26' fill='none' stroke='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, rgba(7, 24, 39, .93) 0%, rgba(7, 24, 39, .58) 38%, rgba(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, rgba(7, 24, 39, .90) 0%, rgba(7, 24, 39, .82) 55%, rgba(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%, rgba(199, 162, 87, .55) 49.2% 50.1%, rgba(0, 0, 0, 0) 50.1%),
		repeating-linear-gradient(-6deg, rgba(46, 111, 149, .34) 0 3px, rgba(46, 111, 149, 0) 3px 38px),
		radial-gradient(120% 95% at 84% 22%, rgba(46, 111, 149, .58), rgba(7, 24, 39, 0) 72%),
		linear-gradient(140deg, #071827 0%, #0b2740 58%, #17506e 100%);
}

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

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

/* --- knots and rigging: interlacing line ---------------------------------- */
body.hth-plate--knots {
	--hth-plate:
		radial-gradient(circle at 62% 52%, rgba(213, 92, 62, .95) 0 1.5%, rgba(213, 92, 62, 0) 1.9%),
		linear-gradient(22deg, rgba(0, 0, 0, 0) 46.8%, rgba(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%, rgba(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%, rgba(23, 111, 120, .28) 61.2% 62.1%, rgba(0, 0, 0, 0) 62.1%),
		linear-gradient(140deg, #071827 0%, #0b2740 60%, #17506e 100%);
}

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

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

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

/* --- start here: first light --------------------------------------------- */
body.hth-plate--start {
	--hth-plate:
		radial-gradient(circle at 73% 46%, rgba(199, 162, 87, .90) 0 6.4%, rgba(199, 162, 87, .30) 6.4% 10.5%, rgba(199, 162, 87, 0) 15%),
		linear-gradient(0deg, rgba(0, 0, 0, 0) 54%, rgba(227, 225, 217, .26) 54% 54.6%, rgba(0, 0, 0, 0) 54.6%),
		repeating-linear-gradient(-2deg, rgba(46, 111, 149, .26) 0 3px, rgba(46, 111, 149, 0) 3px 52px),
		linear-gradient(150deg, #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%, rgba(227, 225, 217, .34) 43.6% 44.1%, rgba(0, 0, 0, 0) 44.1%),
		linear-gradient(0deg,
			rgba(0, 0, 0, 0) 22%, rgba(46, 111, 149, .26) 22% 30%,
			rgba(23, 111, 120, .30) 30% 36%, rgba(0, 0, 0, 0) 36%,
			rgba(199, 162, 87, .34) 46% 50%, rgba(0, 0, 0, 0) 50%,
			rgba(46, 111, 149, .22) 58% 68%, rgba(0, 0, 0, 0) 68%,
			rgba(23, 111, 120, .24) 74% 79%, rgba(0, 0, 0, 0) 79%),
		linear-gradient(140deg, #071827 0%, #0b2740 58%, #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, rgba(7, 24, 39, .30) 0%, rgba(7, 24, 39, .52) 45%, rgba(7, 24, 39, .93) 100%),
		linear-gradient(90deg, rgba(7, 24, 39, .72) 0%, rgba(7, 24, 39, .30) 62%, rgba(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, #071827 0%, #0b2740 58%, #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: #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, rgba(7, 24, 39, .84) 0%, rgba(7, 24, 39, .72) 52%, rgba(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, rgba(7, 24, 39, .86) 0%, rgba(7, 24, 39, .76) 52%, rgba(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: #E3E1D9 !important;
	-webkit-text-fill-color: #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: #C7A257 !important;
	-webkit-text-fill-color: #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: rgba(227, 225, 217, .93) !important;
	-webkit-text-fill-color: rgba(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: rgba(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:#071827;--lake:#2E6F95;--teal:#176F78;--coral:#D55C3E;--gold:#C7A257;--pearl:#E3E1D9;--moss:#355133;--char:#424546;
 margin:2.6rem 0;border:1px solid rgba(7,24,39,.16);border-radius:2px;background:#F5F4EF;overflow:hidden;
 font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif}
.hth-fig.is-night{background:#071827;border-color:rgba(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:#176F78;font-weight:700}
.hth-fig.is-night .hth-fig__kick{color:#C7A257}
.hth-fig__ttl{margin:0;font-family:"Bebas Neue","Arial Narrow",Arial,sans-serif;font-size:clamp(1.35rem,3.4vw,1.9rem);
 line-height:1.05;letter-spacing:.012em;color:#071827}
.hth-fig.is-night .hth-fig__ttl{color:#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:rgba(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 rgba(7,24,39,.1)}
.hth-fig.is-night .hth-fig__cap{color:#c9cfd4;border-top-color:rgba(227,225,217,.16)}
.hth-fig__cap b{color:#071827}
.hth-fig.is-night .hth-fig__cap b{color:#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:#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:#071827;
  --hth-knot-pearl:#E3E1D9;
  --hth-knot-lake:#2E6F95;
  --hth-knot-teal:#176F78;
  --hth-knot-coral:#D55C3E;
  --hth-knot-gold:#C7A257;
  --hth-knot-mist:color-mix(in srgb,#2E6F95 14%,#E3E1D9);
  --hth-knot-charcoal:#424546;
  --hth-knot-paper:#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-knot-paper);
  color:var(--hth-knot-charcoal);
  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-knot-teal);
  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-knot-navy);
}
.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-knot-navy) 28%,transparent);
  background:#E3E1D9;
  color:var(--hth-knot-navy)!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-knot-navy) 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-knot-teal);
  background:#E3E1D9;
  color:var(--hth-knot-navy)!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-knot-coral)}
.hth-knot-profile-card:nth-child(3n){border-top-color:var(--hth-knot-gold)}
.hth-knot-profile-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(7,24,39,.10);
}
.hth-knot-profile-card strong{
  font-size:1rem;
  line-height:1.2;
}
.hth-knot-profile-card span{
  color:var(--hth-knot-charcoal)!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-knot-gold);
  background:color-mix(in srgb,var(--hth-knot-mist) 22%,#E3E1D9);
  color:var(--hth-knot-charcoal);
}
.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-knot-charcoal);
}
.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-knot-navy);
  background:#E3E1D9;
  color:var(--hth-knot-navy)!important;
  font-weight:800;
  text-decoration:none;
}
.hth-knot-profile-context__links a:first-child,
.hth-related-knots__pillar{
  background:var(--hth-knot-navy);
  color:var(--hth-knot-pearl)!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-knot-navy,#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-knot-teal,#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:#071827;
  --hth-contrast-body:#424546;
  --hth-contrast-light:#E3E1D9;
  --hth-contrast-mist:#E3E1D9;
  --hth-contrast-gold:#C7A257;
  --hth-contrast-gold-ink:#071827;
  --hth-contrast-coral-ink:#071827;
}

html body .wp-site-blocks [data-hth-contrast-fix="light"]{
  color:var(--hth-contrast-light)!important;
  -webkit-text-fill-color:var(--hth-contrast-light)!important;
}
html body .wp-site-blocks [data-hth-contrast-fix="dark"]{
  color:var(--hth-contrast-dark)!important;
  -webkit-text-fill-color:var(--hth-contrast-dark)!important;
}
html body .wp-site-blocks [data-hth-contrast-fix="white"]{
  color:#E3E1D9!important;
  -webkit-text-fill-color:#E3E1D9!important;
}

:is(.has-deep-navy-background-color,.has-charcoal-background-color,.has-forest-green-background-color){
  color:var(--hth-contrast-light)!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-contrast-light)!important;
  -webkit-text-fill-color:var(--hth-contrast-light)!important;
}
.has-teal-background-color{
  background-color:color-mix(in srgb,#176F78 14%,#E3E1D9)!important;
  box-shadow:inset 0 3px 0 #176F78;
}
.has-lake-blue-background-color{
  background-color:color-mix(in srgb,#2E6F95 14%,#E3E1D9)!important;
  box-shadow:inset 0 3px 0 #2E6F95;
}
:is(.has-teal-background-color,.has-lake-blue-background-color){
  color:#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:#071827!important;
  -webkit-text-fill-color:#071827!important;
}

:is(.has-pearl-background-color,.has-white-background-color,.has-horizon-mist-background-color){
  color:var(--hth-contrast-body)!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-contrast-dark)!important;
  -webkit-text-fill-color:var(--hth-contrast-dark)!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-contrast-body)!important;
  -webkit-text-fill-color:var(--hth-contrast-body)!important;
}

:is(.has-champagne-gold-background-color,.has-field-canvas-background-color,.has-burnt-coral-background-color){
  color:var(--hth-contrast-dark)!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-contrast-dark)!important;
  -webkit-text-fill-color:var(--hth-contrast-dark)!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-contrast-light)!important;
  -webkit-text-fill-color:var(--hth-contrast-light)!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:#071827!important;
  -webkit-text-fill-color:#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-contrast-dark)!important;
  -webkit-text-fill-color:var(--hth-contrast-dark)!important;
}

.hth-rs-button--coral{color:var(--hth-contrast-dark)!important;-webkit-text-fill-color:var(--hth-contrast-dark)!important}
.hth-rs-button--gold{color:var(--hth-contrast-dark)!important;-webkit-text-fill-color:var(--hth-contrast-dark)!important}
.hth-rs-button--ghost{color:var(--hth-contrast-light)!important;-webkit-text-fill-color:var(--hth-contrast-light)!important}
.hth-rs-button--ghost:hover,.hth-rs-button--ghost:focus-visible{color:var(--hth-contrast-dark)!important;-webkit-text-fill-color:var(--hth-contrast-dark)!important}
.hth-rs-button--outline:hover,.hth-rs-button--outline:focus-visible{color:var(--hth-contrast-light)!important;-webkit-text-fill-color:var(--hth-contrast-light)!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-contrast-light)!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)
: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)){
  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-contrast-gold)!important;
  -webkit-text-fill-color:var(--hth-contrast-gold)!important;
}
.hth-rs-status dt{
  color:var(--hth-contrast-coral-ink)!important;
  -webkit-text-fill-color:var(--hth-contrast-coral-ink)!important;
}
.hth-rs-feature small{
  color:var(--hth-contrast-gold-ink)!important;
  -webkit-text-fill-color:var(--hth-contrast-gold-ink)!important;
}
.hth-rockstar .hth-rs-kicker{
  color:var(--hth-contrast-gold-ink)!important;
  -webkit-text-fill-color:var(--hth-contrast-gold-ink)!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-contrast-gold)!important;
  -webkit-text-fill-color:var(--hth-contrast-gold)!important;
}
.hth-rs-kicker--coral{
  color:var(--hth-contrast-coral-ink)!important;
  -webkit-text-fill-color:var(--hth-contrast-coral-ink)!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-contrast-light)!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-contrast-light)!important;
  -webkit-text-fill-color:var(--hth-contrast-light)!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:rgba(227,225,217,.90)!important;
  -webkit-text-fill-color:rgba(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-contrast-gold)!important;
  -webkit-text-fill-color:var(--hth-contrast-gold)!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 #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 centre reading measure. 86ch at the body
                           size lands around 1040px, which reads as a
                           designed page instead of a narrow blog column.
                           65ch is not a law; 75-90 characters reads fine.
     --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);
  --hth-measure: 86ch;
  --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: #071827;
}

html:has(body.hth-pearl-canvas),
html:has(body.woocommerce-page):not(:has(body.single-post)):not(:has(body.hth-article-template)) {
  background: #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: #071827;
  --re-background-surface: color-mix(in srgb, #071827 86%, #424546);
  --re-background-elevated: color-mix(in srgb, #071827 74%, #424546);
  --re-background-inverse: #E3E1D9;
  --re-text-primary: #E3E1D9;
  --re-text-secondary: #C7A257;
  --re-text-muted: rgba(227, 225, 217, 0.86);
  --re-text-inverse: #071827;
  --re-heading: #E3E1D9;
  --re-link: #C7A257;
  --re-link-hover: #E3E1D9;
  --re-border-default: rgba(227, 225, 217, 0.18);
  --re-border-strong: #C7A257;
  background: #071827 !important;
  color: #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: #071827 !important;
  color: #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: #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: #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: #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: #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: #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, #071827 86%, #424546);
  color: #E3E1D9;
  border-top-color: #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: #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: rgba(199, 162, 87, 0.12);
  color: #E3E1D9;
  border-left-color: #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, #071827 86%, #424546);
  color: #E3E1D9;
  border-color: rgba(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: #071827;
  color: #E3E1D9;
}

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

body.hth-pearl-canvas,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-shop {
  --re-background-canvas: #E3E1D9;
  --re-background-surface: #E3E1D9;
  --re-text-primary: #424546;
  --re-heading: #071827;
  --re-link: #071827;
  background: #E3E1D9 !important;
  color: #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: #E3E1D9 !important;
  color: #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: #071827 !important;
  color: #E3E1D9 !important;
}

body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas {
  background: #E3E1D9 !important;
  color: #424546 !important;
}

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

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

body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas a {
  color: #071827 !important;
  text-decoration-color: #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: #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: rgba(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: #C7A257 !important;
}

body.hth-navy-canvas .hth-landing-page .hth-field-rule {
  background: rgba(227, 225, 217, 0.08) !important;
  color: #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:#071827;
  --hth-fg-dark-muted:#424546;
  --hth-fg-light:#E3E1D9;
  --hth-fg-light-muted:rgba(227,225,217,.90);
  --hth-accent-dark:#C7A257;
  --hth-link-light:#C7A257;
  --hth-link-dark:#071827;
}

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

/* ---------- 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-fg-light)}
.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-link-light)}

/* ---------- 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-fg-dark)}
.hth-route-reading .hth-landing-band.is-canvas .hth-route-card :is(p,li){color:var(--hth-fg-dark-muted)}
.hth-route-reading .hth-landing-band.is-canvas a{color:var(--hth-link-dark)}

/* 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-accent-dark);
}
.hth-route-reading .hth-landing-band.is-canvas .hth-landing-kicker{color:var(--hth-fg-dark)}

/* ---------- 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-fg-light)!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-fg-dark)!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-fg-light)!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-fg-dark)!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-fg-light)!important;
  -webkit-text-fill-color:var(--hth-fg-light)!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-fg-dark-muted)!important;
  -webkit-text-fill-color:var(--hth-fg-dark-muted)!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-fg-dark)!important;
  -webkit-text-fill-color:var(--hth-fg-dark)!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-fg-dark-muted)!important;
  -webkit-text-fill-color:var(--hth-fg-dark-muted)!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-fg-dark)!important;
  -webkit-text-fill-color:var(--hth-fg-dark)!important;
  text-decoration-color:#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:#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:#C7A257!important;
  -webkit-text-fill-color:#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:#E3E1D9!important;
  color:#424546!important;
  -webkit-text-fill-color:#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:#071827!important;
  -webkit-text-fill-color:#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:#424546!important;
  -webkit-text-fill-color:#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:#071827!important;
  color:#E3E1D9!important;
  -webkit-text-fill-color:#E3E1D9!important;
  box-shadow:inset 0 4px 0 #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:#E3E1D9!important;
  -webkit-text-fill-color:#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:#C7A257!important;
  -webkit-text-fill-color:#C7A257!important;
}

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

body.hth-navy-canvas #main .hth-five-routes > header{
  color:#E3E1D9!important;
}
body.hth-navy-canvas #main .hth-five-routes > header :is(h1,h2,h3,p,span){
  color:#E3E1D9!important;
  -webkit-text-fill-color:#E3E1D9!important;
}
body.hth-navy-canvas #main .hth-five-routes > header > p{
  color:#C7A257!important;
  -webkit-text-fill-color:#C7A257!important;
}
body.hth-navy-canvas #main .hth-five-routes__grid > article{
  background:#E3E1D9!important;
  color:#424546!important;
}
body.hth-navy-canvas #main .hth-five-routes__grid > article :is(h1,h2,h3,h4,h5,h6,strong){
  color:#071827!important;
  -webkit-text-fill-color:#071827!important;
}
body.hth-navy-canvas #main .hth-five-routes__grid > article :is(p,li){
  color:#424546!important;
  -webkit-text-fill-color:#424546!important;
}
body.hth-navy-canvas #main .hth-five-routes__grid > article a{
  color:#071827!important;
  -webkit-text-fill-color:#071827!important;
  text-decoration-color:#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:#C7A257!important;
  -webkit-text-fill-color:#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,#D55C3E 9%,#E3E1D9)!important;
  color:#424546!important;
}
body.hth-pearl-canvas .hth-warning :is(p,li,strong){
  color:#424546!important;
  -webkit-text-fill-color:#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:#D55C3E!important;
  color:#071827!important;
  -webkit-text-fill-color:#071827!important;
}

/* Route heroes on the Navy canvas own light foregrounds. */
body.hth-navy-canvas .hth-route-hero{
  color:#E3E1D9!important;
}
body.hth-navy-canvas .hth-route-hero :is(h1,h2,h3,h4,h5,h6){
  color:#E3E1D9!important;
  -webkit-text-fill-color:#E3E1D9!important;
}
body.hth-navy-canvas .hth-route-hero :is(p,li,span){
  color:rgba(227,225,217,.90)!important;
  -webkit-text-fill-color:rgba(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:#C7A257!important;
  -webkit-text-fill-color:#C7A257!important;
}

/* Pearl-canvas route heroes reverse to Navy/Charcoal. */
body.hth-pearl-canvas .hth-route-hero{
  background:#E3E1D9!important;
  color:#424546!important;
}
body.hth-pearl-canvas .hth-route-hero :is(h1,h2,h3,h4,h5,h6){
  color:#071827!important;
  -webkit-text-fill-color:#071827!important;
}
body.hth-pearl-canvas .hth-route-hero :is(p,li,span){
  color:#424546!important;
  -webkit-text-fill-color:#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:#071827!important;
  -webkit-text-fill-color:#071827!important;
  text-decoration-color:#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:#E3E1D9!important;
  color:#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:#071827!important;
  -webkit-text-fill-color:#071827!important;
}
body:is(.page-id-92,.page-id-104,.page-id-548,.page-id-549) .hth-route-hero :is(p,li,span){
  color:#424546!important;
  -webkit-text-fill-color:#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:#071827!important;
  -webkit-text-fill-color:#071827!important;
  text-decoration-color:#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:#E3E1D9!important;
  color:#424546!important;
  -webkit-text-fill-color:#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:#071827!important;
  -webkit-text-fill-color:#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:#424546!important;
  -webkit-text-fill-color:#424546!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
) a{
  color:#071827!important;
  -webkit-text-fill-color:#071827!important;
  text-decoration-color:#C7A257;
}
/* 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: #071827;
  --hth-gold-bright: #C7A257;
  --hth-coral-on-light: #071827;
  --hth-coral-bright: #D55C3E;
  --hth-muted-on-dark: rgba(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: #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: #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: #D55C3E;
}

.re-link:not(.re-link--inverse),
.hth-meta,
.hth-caption {
  color: var(--re-link, #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: #071827 !important;
  -webkit-text-fill-color: #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: #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: #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: #071827 !important;
  font-weight: 600;
}

html[data-theme="dark"][data-cvd="high-contrast"] :is(.eyebrow, .text-gold) {
  color: #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: #071827 !important;
  -webkit-text-fill-color: #071827 !important;
  text-decoration-color: #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-knot-charcoal, #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-knot-navy, #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-knot-navy, #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-knot-charcoal, #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-knot-navy, #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: #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,#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;
  }
}