/* hth-bleed-contract */
/* ============================================================================
 * THE BLEED CONTRACT
 *
 * One rule for the whole publication, and the same rule at every screen size:
 *
 *   Front page  — full bleed, edge to edge.
 *   Interiors   — 90% of the viewport, centred.
 *   The reading column IS that 90%. It is not a narrow measure floating in
 *   the middle of a wide band.
 *
 * What this file fixes: the bands were already 90% wide, but the prose inside
 * them carried its own max-width (about 1042px) plus 100px of side padding,
 * so on a 1440px screen the text occupied 72% of the window and sat in a
 * column with 200px of empty band on either side. On a phone the same
 * arrangement left the text at 81% inside an 89% band. Both are the same
 * defect at different scales: a column down the middle instead of the bleed.
 *
 * Loaded last so it wins without anyone having to hunt down the original
 * declarations across fifteen stylesheets.
 * ========================================================================= */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body {
  overflow-x: clip;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

main {
  overflow-wrap: break-word;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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