/* hook-the-horizon-header-chrome */
/**
 * Hook the Horizon — hybrid header chrome
 * Search-first sticky header + pillar mega menus + breadcrumbs.
 */

.hth-chase-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element in the document, before the header, so
 * a keyboard user reaches it without tabbing the whole navigation. The theme
 * previously had one skip control and it sat inside <main> on the front page
 * only, i.e. after everything it was supposed to let you skip. */
.hth-skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  background: #C7A257;
  color: #071827 !important;
  font-family: var(--wp--preset--font-family--ui, system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--duration-fast, 130ms) var(--ease-enter, ease-out);
}
.hth-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #071827;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .hth-skip-link { transition: none; }
}

.hth-chase-header {
  position: sticky;
  top: 0;
  z-index: 500;
  width: 100%;
  border-bottom: 1px solid rgba(227, 225, 217, 0.1);
  background: #071827 !important;
  color: #E3E1D9 !important;
  transition: box-shadow var(--duration-standard, 200ms) ease-out;
}

.hth-chase-header.is-compact {
  box-shadow: 0 10px 28px rgba(7,24,39, 0.28);
}

.hth-chase-shell {
  width: min(1440px, calc(100% - 2 * clamp(1rem, 4vw, 2.5rem)));
  margin-inline: auto;
}

/* Top row: logo | search | actions */
.hth-chase-header__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  min-height: 84px;
  padding-block: 0.85rem;
  transition: min-height 0.2s ease, padding 0.2s ease;
}

.hth-chase-header.is-compact .hth-chase-header__top {
  min-height: 64px;
  padding-block: 0.45rem;
}

.hth-chase-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  flex-shrink: 0;
}

.hth-chase-brand img,
.hth-header-mark {
  width: auto;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  transition: height 0.2s ease;
}

.hth-chase-header.is-compact .hth-chase-brand img,
.hth-chase-header.is-compact .hth-header-mark {
  height: 34px;
}

/* Search */
.hth-header-search {
  position: relative;
  width: 100%;
  max-width: 46rem;
  justify-self: center;
}

.hth-header-search__field {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.2rem 0.3rem 0.2rem 0.75rem;
  border: 1px solid rgba(227, 225, 217, 0.22);
  background: rgba(227, 225, 217, 0.06);
  transition: border-color var(--duration-fast, 130ms) ease-out, background var(--duration-fast, 130ms) ease-out;
}

.hth-chase-header.is-compact .hth-header-search__field {
  min-height: 44px;
}

/* The input's own outline is suppressed, so the wrapper has to carry a focus
 * indicator that actually meets 3:1. The previous 16%-alpha gold glow measured
 * about 1.2:1 against the navy header and vanished entirely in forced-colors,
 * leaving the header's primary control with no visible focus state. */
.hth-header-search__field:has(.hth-header-search__input:focus-visible) {
  border-color: #C7A257;
  background: rgba(227, 225, 217, 0.14);
  outline: 3px solid #C7A257;
  outline-offset: 2px;
}
.hth-header-search__field:focus-within {
  border-color: rgba(199, 162, 87, 0.75);
  background: rgba(227, 225, 217, 0.1);
}
@media (forced-colors: active) {
  .hth-header-search__field:has(.hth-header-search__input:focus-visible) {
    outline: 3px solid Highlight;
  }
}

.hth-header-search__icon {
  color: rgba(227, 225, 217, 0.7);
  flex-shrink: 0;
}

.hth-header-search__input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #E3E1D9 !important;
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  outline: none;
}

/* 0.48 alpha pearl composites to 4.0:1 against the navy header — under AA.
 * Placeholder text is real content for a user reading the field. */
.hth-header-search__input::placeholder {
  color: rgba(227, 225, 217, 0.66);
}

.hth-header-search__input::-webkit-search-decoration,
.hth-header-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.hth-header-search__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border: 1px solid rgba(227, 225, 217, 0.22);
  border-radius: 0.2rem;
  color: rgba(227, 225, 217, 0.55);
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1;
}

.hth-header-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 0;
  background: #C7A257;
  color: #071827 !important;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.hth-header-search__submit:hover,
.hth-header-search__submit:focus-visible {
  background: #E3E1D9;
}

/* Search suggestion panel */
.hth-search-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  z-index: 90;
  max-height: min(70vh, 28rem);
  overflow: auto;
  border: 1px solid rgba(199, 162, 87, 0.35);
  background: #071827;
  box-shadow: 0 18px 44px rgba(7,24,39, 0.45);
  color: #E3E1D9;
}

.hth-search-panel[hidden] {
  display: none !important;
}

.hth-search-panel__section {
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(227, 225, 217, 0.1);
}

.hth-search-panel__section:last-child {
  border-bottom: 0;
}

.hth-search-panel__heading {
  margin: 0 0 0.55rem;
  color: #C7A257 !important;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hth-search-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hth-search-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(227, 225, 217, 0.2);
  background: transparent;
  color: rgba(227, 225, 217, 0.9) !important;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
}

.hth-search-chip:hover,
.hth-search-chip:focus-visible {
  border-color: rgba(199, 162, 87, 0.55);
  color: #C7A257 !important;
  background: rgba(199, 162, 87, 0.1);
}

.hth-search-panel__cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.hth-search-panel__cats a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(227, 225, 217, 0.12);
  color: #E3E1D9 !important;
  font-size: 0.78rem;
  text-decoration: none !important;
}

.hth-search-panel__cats a:hover,
.hth-search-panel__cats a:focus-visible {
  border-color: rgba(199, 162, 87, 0.45);
  color: #C7A257 !important;
}

.hth-search-panel__list {
  display: grid;
}

.hth-search-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid rgba(227, 225, 217, 0.08);
  color: #E3E1D9 !important;
  text-decoration: none !important;
}

.hth-search-suggest:last-child {
  border-bottom: 0;
}

.hth-search-suggest:hover,
.hth-search-suggest:focus-visible {
  color: #C7A257 !important;
}

.hth-search-suggest em {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(227, 225, 217, 0.45);
}

/* Actions */
.hth-chase-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  justify-self: end;
}

.hth-chase-header__cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid #C7A257;
  color: #C7A257 !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.hth-chase-header__cta:hover,
.hth-chase-header__cta:focus-visible {
  background: #C7A257;
  color: #071827 !important;
}

/* Pillar row */
.hth-chase-header__pillars-wrap {
  border-top: 1px solid rgba(227, 225, 217, 0.08);
  background: rgba(7,24,39, 0.18);
  transition: max-height 0.22s ease, opacity 0.18s ease, border-color 0.18s ease;
}

.hth-chase-header__pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 1.8vw, 1.75rem);
  min-height: 48px;
  padding-block: 0.15rem;
}

.hth-pillar-link,
.hth-nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(227, 225, 217, 0.88) !important;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.hth-pillar-link:hover,
.hth-pillar-link:focus-visible,
.hth-nav-trigger:hover,
.hth-nav-trigger[aria-expanded="true"] {
  color: #E3E1D9 !important;
}

.hth-pillar-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.55rem;
  border-bottom: 1px solid #C7A257;
  transition: right 0.16s ease;
}

.hth-pillar-link:hover::after,
.hth-pillar-link:focus-visible::after {
  right: 0;
}

.hth-nav-item {
  position: relative;
}

.hth-nav-chevron {
  transition: transform 0.2s ease;
  opacity: 0.8;
}

.hth-nav-trigger[aria-expanded="true"] .hth-nav-chevron {
  transform: rotate(180deg);
}

/* Dropdown / mega panels */
.hth-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: min(22rem, calc(100vw - 2rem));
  z-index: 80;
  background: #071827 !important;
  border: 1px solid rgba(199, 162, 87, 0.35);
  box-shadow: 0 16px 40px rgba(7,24,39, 0.45);
  color: #E3E1D9 !important;
}

.hth-nav-item--mega .hth-dropdown {
  left: 50%;
  min-width: min(36rem, calc(100vw - 2rem));
}

.hth-dropdown[hidden] {
  display: none !important;
}

.hth-dropdown:not([hidden]) {
  display: block !important;
}

.hth-dropdown__inner {
  display: grid;
  padding: 0.5rem 0;
}

.hth-mega__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.hth-mega__col {
  padding: 0.85rem 0.35rem 0.85rem;
}

.hth-mega__col + .hth-mega__col {
  border-left: 1px solid rgba(227, 225, 217, 0.1);
}

.hth-mega__title {
  margin: 0 0.8rem 0.35rem;
  color: #C7A257 !important;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hth-dropdown a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1.15rem;
  color: rgba(227, 225, 217, 0.9) !important;
  text-decoration: none !important;
}

.hth-dropdown a:hover {
  background: rgba(199, 162, 87, 0.12);
  color: #C7A257 !important;
}

.hth-dropdown__label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit !important;
}

.hth-dropdown__desc {
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(227, 225, 217, 0.55) !important;
  text-transform: none;
  letter-spacing: 0;
}

/* Breadcrumbs */
.hth-breadcrumbs {
  display: block;
  padding: 0.55rem 0 0.7rem;
  border-top: 1px solid rgba(227, 225, 217, 0.08);
  background: rgba(7,24,39, 0.12);
}

.hth-breadcrumbs[hidden] {
  display: none !important;
}

.hth-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(227, 225, 217, 0.7);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

/* Breadcrumb links were bare inline text at 0.74rem — roughly a 17px tap
 * target with about 6px between neighbours, on every inner page. Vertical
 * padding brings the hit area up without changing the visual density. */
.hth-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-block: 0.45rem;
  color: rgba(227, 225, 217, 0.78) !important;
  text-decoration: none;
}
@media (pointer: coarse) {
  .hth-breadcrumbs a { min-height: 44px; }
  .hth-breadcrumbs { gap: 0.15rem 0.6rem; }
}

.hth-breadcrumbs a:hover,
.hth-breadcrumbs a:focus-visible {
  color: #C7A257 !important;
}

.hth-breadcrumbs [aria-current="page"] {
  color: #E3E1D9 !important;
}

.hth-breadcrumbs__sep {
  color: rgba(227, 225, 217, 0.35);
}

/* The trail is written by header-nav.js after load. Leaving the bar at
 * display:none until then meant revealing it pushed every interior page down
 * by about sixty pixels, which measured as a 0.06 layout shift on a site that
 * had just been through a CLS repair. The bar now holds its final height from
 * first paint and stays invisible until it has something to say. The trail is
 * kept on one line so that height is the same on a phone as on a desktop. */
body:not(.home) .hth-breadcrumbs,
body:not(.home) .hth-breadcrumbs[hidden] {
  display: block !important;
  min-height: 55px;
}

body:not(.home) .hth-breadcrumbs[hidden] {
  visibility: hidden;
}

.hth-breadcrumbs__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.hth-breadcrumbs__list::-webkit-scrollbar {
  display: none;
}

.hth-breadcrumbs__list > li {
  flex: none;
  white-space: nowrap;
}

@media (pointer: coarse) {
  body:not(.home) .hth-breadcrumbs,
  body:not(.home) .hth-breadcrumbs[hidden] {
    min-height: 61px;
  }
}

/* Mobile defaults: hide hamburger until breakpoint */
.hth-chase-mobile {
  display: none;
}

/* Mobile: search stays visible; pillars move into menu */
@media (max-width: 980px) {
  .hth-chase-header__top {
    grid-template-columns: auto 1fr auto;
    min-height: 64px;
    padding-block: 0.55rem;
    gap: 0.55rem;
  }

  .hth-chase-header__pillars-wrap {
    display: none !important;
  }

  .hth-chase-header__cta {
    display: none !important;
  }

  .hth-chase-mobile {
    display: block !important;
  }

  .hth-chase-brand img,
  .hth-header-mark {
    height: 36px;
  }

  .hth-text-brand span {
    max-width: 7.5rem !important;
    font-size: 0.95rem !important;
  }

  .hth-header-search {
    max-width: none;
  }

  .hth-header-search__field {
    min-height: 44px;
    padding-left: 0.7rem;
    grid-template-columns: auto 1fr auto;
  }

  .hth-header-search__kbd {
    display: none;
  }

  .hth-header-search__submit span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  /* This is the touch breakpoint, so the submit control must not shrink here.
   * It previously dropped to 38x30px on exactly the viewports where a finger
   * is the only input. */
  .hth-header-search__submit {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23071827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M14 14l-2.5-2.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  .hth-search-panel__cats {
    grid-template-columns: 1fr 1fr;
  }

  .hth-chase-mobile summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(227, 225, 217, 0.35);
    color: #E3E1D9;
  }

  .hth-chase-mobile summary::-webkit-details-marker {
    display: none;
  }

  .hth-chase-mobile__icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 1.15rem;
  }

  .hth-chase-mobile__icon i {
    display: block;
    height: 1px;
    background: #E3E1D9;
  }

  .hth-chase-mobile__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    max-height: calc(100vh - 64px);
    overflow: auto;
    background: #071827;
    border-bottom: 1px solid rgba(227, 225, 217, 0.12);
    color: #E3E1D9;
  }

  .hth-chase-mobile__panel nav {
    display: grid;
    gap: 0;
    padding: 0.5rem 0;
  }

  .hth-chase-mobile__panel nav a {
    display: grid;
    gap: 0.25rem;
    padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
    border-bottom: 1px solid rgba(227, 225, 217, 0.1);
    color: #E3E1D9 !important;
    text-decoration: none;
  }

  .hth-chase-mobile__panel nav strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #E3E1D9 !important;
  }

  .hth-chase-mobile__panel nav span {
    color: rgba(227, 225, 217, 0.68) !important;
    font-size: 0.78rem;
  }

  .hth-chase-mobile__tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 1.4rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  }

  .hth-chase-mobile__tools > span {
    grid-column: 1 / -1;
    color: #C7A257 !important;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }

  .hth-chase-mobile__tools a {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(227, 225, 217, 0.2);
    color: #E3E1D9 !important;
    font-size: 0.72rem;
    text-decoration: none;
  }

  .hth-breadcrumbs {
    padding-block: 0.45rem 0.55rem;
  }
}

@media (max-width: 560px) {
  .hth-chase-header__top {
    grid-template-columns: auto auto;
    grid-template-areas:
      "brand actions"
      "search search";
    gap: 0.55rem 0.65rem;
  }

  .hth-chase-brand {
    grid-area: brand;
  }

  .hth-chase-header__actions {
    grid-area: actions;
  }

  .hth-header-search {
    grid-area: search;
  }

  .hth-header-search__input {
    font-size: 0.86rem;
  }
}

@media (min-width: 981px) {
  .hth-chase-mobile {
    display: none !important;
  }

  /* Compact: collapse pillar density slightly but keep access */
  .hth-chase-header.is-compact .hth-chase-header__pillars {
    min-height: 40px;
  }

  /* Compact state keeps the 44px floor: the sticky header is where these
   * controls get used most, so shrinking them on scroll is backwards. */
  .hth-chase-header.is-compact .hth-pillar-link,
  .hth-chase-header.is-compact .hth-nav-trigger {
    min-height: 44px;
    font-size: 0.76rem;
  }
}

/* Light content surfaces only — never apply dark ink to navy chrome */
.hth-page-shell,
.hth-prose,
.entry-content,
.wp-block-post-content {
  color: #424546;
}

.hth-page-shell h1,
.hth-page-shell h2,
.hth-page-shell h3,
.hth-page-title,
.hth-prose h1,
.hth-prose h2,
.hth-prose h3,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
  color: #071827;
}

/* Dark content surfaces — pearl type */
.hth-horizon-hero,
.hth-compatibility,
.hth-home-hero,
.hth-home-system,
.hth-route-hero {
  color: #E3E1D9 !important;
}

.hth-horizon-hero h1,
.hth-horizon-hero h2,
.hth-horizon-hero h3,
.hth-compatibility h1,
.hth-compatibility h2,
.hth-compatibility h3,
.hth-home-hero h1,
.hth-home-hero h2,
.hth-home-system h2,
.hth-route-hero h1 {
  color: #E3E1D9 !important;
}
/* hook-the-horizon-global-brand */
/* Hook the Horizon — global brand shell for all non-home templates. */
:root {
  --hth-navy: #071827;
  --hth-pearl: #E3E1D9;
  --hth-paper: #E3E1D9;
  --hth-gold: #C7A257;
  --hth-lake: #2E6F95;
  --hth-coral: #D55C3E;
  --hth-charcoal: #424546;
  --hth-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --hth-sans: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hth-text-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  color: var(--hth-pearl) !important;
  text-decoration: none !important;
}

.hth-text-brand span {
  max-width: 13rem;
  color: inherit !important;
  font-family: var(--hth-serif) !important;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem) !important;
  font-weight: 700 !important;
  line-height: .95 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  white-space: normal;
}

.hth-text-brand--footer {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.2rem !important;
}

.hth-text-brand--footer span:not(.hth-chase-sr-only) {
  max-width: 15rem;
  font-size: clamp(1.55rem, 2.6vw, 2.5rem) !important;
}

.hth-footer-logo {
  display: block !important;
  width: min(140px, 50vw) !important;
  height: auto !important;
  max-height: 40px !important;
  object-fit: contain;
  object-position: left center;
}

/* About / landing brand lockup */
.hth-brand-lockup {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
  margin: 0 auto 1.5rem;
  max-width: 28rem;
}
.hth-brand-lockup img {
  width: min(320px, 86vw);
  height: auto;
  max-height: 220px;
  object-fit: contain;
}
.hth-brand-lockup__tag {
  margin: 0;
  color: var(--hth-navy, #071827);
  text-decoration: underline;
  text-decoration-color: var(--hth-coral, #D55C3E);
  text-decoration-thickness: .16em;
  text-underline-offset: .22em;
  font-family: var(--hth-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hth-landing-band .hth-brand-lockup {
  margin-block: 0 1.25rem;
}
.hth-landing-band.is-dark .hth-brand-lockup__tag {
  color: #D55C3E;
}

body:not(.home) {
  background: var(--hth-navy);
  color: var(--hth-pearl);
  font-family: var(--hth-sans);
}

body:not(.home) .wp-site-blocks {
  min-height: 100vh;
  padding: 0;
  background: var(--hth-navy);
}

body:not(.home) .wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

body:not(.home) main.hth-shell {
  width: 90%;
  max-width: none;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  body:not(.home) main.hth-shell {
    width: 94%;
  }
}
@media (max-width: 768px) {
  body:not(.home) main.hth-shell {
    width: calc(100% - 1.5rem);
  }
}

/* These headings sit on the navy page ground set at :86 and :94, so painting
 * them navy rendered them invisible on index, archive, 404, search,
 * commercially-caught and the conservation policy page. */
body:not(.home) main.hth-shell > h1,
body:not(.home) main.hth-shell .wp-block-post-title,
body:not(.home) main.hth-shell .wp-block-query-title {
  color: var(--hth-pearl);
  font-family: var(--hth-serif);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

body:not(.home) main.hth-shell a {
  text-underline-offset: .2em;
  text-decoration-thickness: .08em;
}

body:not(.home) main.hth-shell .wp-block-button__link {
  min-height: 44px;
  border-radius: 0;
  background: var(--hth-coral);
  color: #071827;
  font-family: var(--hth-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The footer owns its Navy surface; it must never borrow the page canvas. */
.hth-chase-footer,
.hth-site-footer {
  background: var(--hth-navy) !important;
  color: var(--hth-pearl);
}

@media (max-width: 780px) {
  .hth-text-brand span {
    font-size: 1.02rem !important;
  }
}

/* --------------------------------------------------------------------------
   SLIM NETWORK FOOTER (August 2026)
   One row of Northern Lantern House publications, one legal line. Replaces
   the three-column footer that was duplicated across parts/footer.html,
   parts/footer-home.html and templates/front-page.html. As of 2026-09-03
   parts/footer.html is the only copy: footer-home.html was deleted and
   front-page.html calls the template part instead of inlining it.
   -------------------------------------------------------------------------- */
.hth-chase-footer--slim {
  display: block;
  padding: 1.6rem clamp(1rem, 3vw, 2.5rem);
}
.hth-chase-footer--slim .hth-chase-footer__row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  text-align: center;
}
.hth-chase-footer--slim .hth-chase-footer__row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hth-pearl, #F4F1EA);
}
.hth-chase-footer--slim .hth-chase-footer__row a:hover,
.hth-chase-footer--slim .hth-chase-footer__row a:focus-visible {
  color: var(--hth-champagne-gold, #C7A257);
}
.hth-chase-footer--slim .hth-chase-footer__legal {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 1.1rem;
  max-width: 80rem;
  margin: 0.85rem auto 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(244, 241, 234, 0.18);
  font-size: 0.7rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: rgba(244, 241, 234, 0.78);
  text-align: center;
}
/* Legal row links were ~18px tall (0.7rem x 1.6 line-height) and sat 1.1rem
   apart, which is under the 24px target-size floor on a 375px screen. */
.hth-chase-footer--slim .hth-chase-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.hth-chase-footer--slim .hth-chase-footer__legal a:hover,
.hth-chase-footer--slim .hth-chase-footer__legal a:focus-visible {
  color: var(--hth-champagne-gold, #C7A257);
}
/* hook-the-horizon-route-system */
/* Hook the Horizon — approved inner-route system.
 * WordPress port companion to Lovable commit d36930b03741d7837cae8df225ce3be6827466ad.
 * Exact ten-color authority only. Loads after home-approved.css.
 */

body:not(.home){margin:0;overflow-x:hidden;background:#071827;color:#E3E1D9;font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body:not(.home) .wp-site-blocks{min-height:100vh;padding:0}
body:not(.home) .wp-site-blocks>*{margin-block-start:0;margin-block-end:0}

.hth-route-main{
  --hth-navy:#071827;--hth-pearl:#E3E1D9;--hth-lake:#2E6F95;--hth-teal:#176F78;
  --hth-coral:#D55C3E;--hth-charcoal:#424546;--hth-forest:#355133;--hth-gold:#C7A257;
  --hth-mist:color-mix(in srgb,#2E6F95 14%,#E3E1D9);--hth-canvas:color-mix(in srgb,#C7A257 18%,#E3E1D9);--hth-display:"Playfair Display",Georgia,serif;
  --hth-body:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  width:100%;max-width:none;margin:0;background:var(--hth-navy);color:var(--hth-pearl);font-family:var(--hth-body);line-height:1.65
}
.hth-route-main *,.hth-route-main *::before,.hth-route-main *::after{box-sizing:border-box}
.hth-route-main img{display:block;max-width:100%;height:auto}
/* Body links sit on the pearl reading surface, where the bright lake blue
 * measures 4.19:1 and fails AA. The -ink variants are the same hues darkened
 * to clear 4.5:1. Links inside the navy hero keep the bright colour. */
.hth-route-main a{color:var(--re-lake-ink,#071827);text-decoration-thickness:.08em;text-underline-offset:.25em}
.hth-route-main a:hover{color:var(--re-teal-ink,#071827)}
.hth-route-hero a,.hth-route-hero a:hover{color:var(--hth-gold)}
.hth-route-main :focus-visible{outline:3px solid var(--hth-gold);outline-offset:4px}
/* Editorial bleed: regular pages run at 88% of the viewport (>=85% brief floor),
 * capped so ultrawide displays do not turn the page into a billboard.
 * Reading measure is enforced on text separately, not by starving the shell. */
.hth-route-shell{width:min(2400px,88%);margin-inline:auto}
/* Gold reads at 7.5:1 on the navy hero and 1.8:1 on the pearl one, so the
 * eyebrow takes its ink from the surface it is actually sitting on. */
.hth-route-eyebrow{margin:0;color:var(--hth-eyebrow-ink,var(--hth-gold));font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}

/* Cinematic route opening
 * Image layer (::before) is separate from navy wash (::after) so cinema grades
 * can filter the stock frame without tinting title type.
 */
.hth-route-hero{
  --hth-hero-filter:none;
  position:relative;isolation:isolate;display:grid;align-items:end;
  min-height:clamp(30rem,62vh,48rem);overflow:hidden;
  background:var(--hth-navy);color:var(--hth-pearl)
}
/* Gradeable image plate — no negative inset (filters expand paint cost) */
.hth-route-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hth-route-image,linear-gradient(135deg,#2E6F95,#071827));
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:var(--hth-hero-filter,none);
  transform:translateZ(0);
  backface-visibility:hidden;
  contain:paint;
  pointer-events:none
}
/* Unfiltered navy wash + gold ornament (type stays pearl) */
.hth-route-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    /* Vertical ramp: light through the picture, dense only where type sits. */
    linear-gradient(180deg,rgba(7,24,39,.10) 0%,rgba(7,24,39,.18) 36%,rgba(7,24,39,.66) 70%,rgba(7,24,39,.93) 100%),
    /* Reading wedge: holds headline contrast on the type side without
     * flattening the whole frame to a slab. */
    linear-gradient(100deg,rgba(7,24,39,.62) 0%,rgba(7,24,39,.28) 42%,rgba(7,24,39,0) 72%),
    repeating-radial-gradient(ellipse at 88% 92%,transparent 0 2.8rem,#C7A257 2.85rem 2.9rem,transparent 2.95rem 5.8rem);
  background-size:auto,auto,min(62%,42rem) min(58%,28rem);
  background-position:center,center,100% 100%;
  background-repeat:no-repeat;
  opacity:1
}
/* Featured image as the hero's own media plate.
 * A real <img> (srcset + alt) rather than a CSS background: it carries the
 * alternative text, serves a size-appropriate file, and is a valid LCP element.
 * This replaces the second full-width featured-image band that used to sit
 * directly beneath the hero and repeat the same picture. */
.hth-route-hero__media{
  position:absolute;inset:0;z-index:0;margin:0;
  pointer-events:none
}
/* Photographs render at full strength with a restrained vibrancy lift.
 * The old "cinema grade" chain pointed at --hth-css-A..G, which live in
 * assets/cinema-grades.css — a file nothing enqueues — and the two grades that
 * were reachable applied saturate(0.92) and saturate(0.95), i.e. the theme was
 * actively draining colour out of the imagery. */
.hth-route-hero__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:var(--hth-hero-focus,center);
  filter:saturate(1.08) contrast(1.04)
}
/* When a real photograph is present the synthetic gradient plate stands down. */
.hth-route-hero:has(.hth-route-hero__media)::before{background-image:none}
.hth-route-hero__inner{
  position:relative;z-index:2;
  width:min(2400px,88%);
  margin-inline:auto;padding-block:clamp(7rem,13vw,12rem) clamp(3rem,7vw,5.5rem)
}
/* Photo credit rides inside the hero now that the image lives there. */
.hth-route-hero .hth-featured-credit{
  position:absolute;right:clamp(1rem,3vw,2rem);bottom:.7rem;z-index:3;
  margin:0;color:rgba(227,225,217,.6);
  font-size:.62rem;letter-spacing:.09em;text-transform:uppercase
}
.hth-route-hero h1{max-width:15ch;margin:.25rem 0 0;color:var(--hth-pearl);font-family:var(--hth-display);font-size:clamp(3.7rem,8.7vw,8.8rem);font-weight:400;letter-spacing:.005em;line-height:.84;text-transform:uppercase;text-wrap:balance}
.hth-route-hero .wp-block-post-excerpt{max-width:48rem;margin-top:1.5rem;color:rgba(227,225,217,.95);font-size:clamp(1rem,1.7vw,1.25rem)}
.hth-route-hero .wp-block-post-excerpt__excerpt{margin:0;color:inherit}
.hth-route-hero__signal{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid rgba(227,225,217,.22);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.hth-route-hero__signal span{color:rgba(227,225,217,.92)}
.hth-route-hero__signal b{color:var(--hth-gold);font-weight:800}

/* Unillustrated hero — a deliberate state, not a gap.
 * Stock photography was removed from the article layer, so most posts now have
 * no featured image. Left alone, the hero would keep photo-frame proportions
 * and sit under a wash built to hold type over a picture: 48rem of empty navy
 * that reads as an image that failed to load. Without a media plate it becomes
 * a title block instead — shorter, with the teal/navy plate and gold ornament
 * still visible through a lighter wash.
 * Route landing pages paint a licensed photograph through ::before even with no
 * featured image, so they are exempted below and keep the full photo hero. */
.hth-route-hero:not(:has(.hth-route-hero__media)){
  min-height:clamp(19rem,36vh,27rem)
}
.hth-route-hero:not(:has(.hth-route-hero__media))::after{opacity:.7}
.hth-route-hero:not(:has(.hth-route-hero__media)) .hth-route-hero__inner{
  padding-block:clamp(3.5rem,8vw,6rem) clamp(2rem,4vw,3rem)
}
body.page-id-117 .hth-route-hero,body.page-id-544 .hth-route-hero,
body.page-id-545 .hth-route-hero,body.page-id-546 .hth-route-hero,
body.page-id-547 .hth-route-hero,body.page-id-206 .hth-route-hero,
body.page-id-81 .hth-route-hero,body.page-id-88 .hth-route-hero,
body.page-id-207 .hth-route-hero,body.page-id-93 .hth-route-hero,
body.page-id-838 .hth-route-hero,body.page-id-1254 .hth-route-hero{
  min-height:clamp(30rem,62vh,48rem)
}
body.page-id-117 .hth-route-hero::after,body.page-id-544 .hth-route-hero::after,
body.page-id-545 .hth-route-hero::after,body.page-id-546 .hth-route-hero::after,
body.page-id-547 .hth-route-hero::after,body.page-id-206 .hth-route-hero::after,
body.page-id-81 .hth-route-hero::after,body.page-id-88 .hth-route-hero::after,
body.page-id-207 .hth-route-hero::after,body.page-id-93 .hth-route-hero::after,
body.page-id-838 .hth-route-hero::after,body.page-id-1254 .hth-route-hero::after{
  opacity:1
}
/* Articles run their own hero system in assets/article-template.css, which is
 * enqueued after this file and selects at a higher specificity
 * (body.hth-article-template .hth-route-hero--article). The three rules above
 * therefore never reached a single post: the height stayed at 48rem, the inner
 * padding stayed at 11rem, and only the wash changed — a lighter wash over the
 * same empty slab, which is worse than leaving it alone. The same is true at
 * phone widths, where assets/css/mobile-responsive.css holds the hero at 58vh.
 * These rules restate the title-block treatment where it can actually win.
 * Route landing pages never carry --article, so their exemption is untouched. */
@media screen and (min-width:768px){
  body.hth-article-template .hth-route-hero--article:not(:has(.hth-route-hero__media)){
    min-height:clamp(19rem,36vh,27rem)!important
  }
  body.hth-article-template .hth-route-hero--article:not(:has(.hth-route-hero__media)) .hth-route-hero__inner{
    padding-block:clamp(3.5rem,8vw,6rem) clamp(2rem,4vw,3rem)!important
  }
}
@media screen and (max-width:767px){
  body.hth-article-template .hth-route-hero--article:not(:has(.hth-route-hero__media)),
  body:not(.home):not(.front-page) .hth-route-hero--article:not(:has(.hth-route-hero__media)){
    min-height:clamp(14rem,34vh,20rem)!important
  }
  body.hth-article-template .hth-route-hero--article:not(:has(.hth-route-hero__media)) .hth-route-hero__inner,
  body:not(.home):not(.front-page) .hth-route-hero--article:not(:has(.hth-route-hero__media)) .hth-route-hero__inner{
    padding-block:clamp(4.75rem,15vw,6rem) clamp(1.5rem,5vw,2rem)!important
  }
}

/* Route media + recipe (perf: CSS filter tokens; SVG fine grade via --hth-hero-filter-fine)
 * A Golden Chase · B Blue Hour · C Open Water · D Species · E Bench · F Signal · G Shore Gold
 */
body.page-id-117{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2050999544-1920x1200.jpeg?crop=1");
  --hth-hero-recipe:A;
  --hth-hero-filter:var(--hth-css-A);
  --hth-hero-filter-fine:var(--hth-svg-A)
}
body.page-id-544{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_252706690-960x640.jpeg?crop=1");
  --hth-hero-recipe:B;
  --hth-hero-filter:var(--hth-css-B);
  --hth-hero-filter-fine:var(--hth-svg-B)
}
body.page-id-545{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2100401486-960x640.jpeg?crop=1");
  --hth-hero-recipe:D;
  --hth-hero-filter:var(--hth-css-D);
  --hth-hero-filter-fine:var(--hth-svg-D)
}
body.page-id-546{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2104003758-1920x1200.jpeg?crop=1");
  --hth-hero-recipe:C;
  --hth-hero-filter:var(--hth-css-C);
  --hth-hero-filter-fine:var(--hth-svg-C)
}
body.page-id-547{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_133970534-960x640.jpeg?crop=1");
  --hth-hero-recipe:E;
  --hth-hero-filter:var(--hth-css-E);
  --hth-hero-filter-fine:var(--hth-svg-E)
}
body.page-id-206,body.page-id-81,body.page-id-88{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_380997587-960x640.jpeg?crop=1");
  --hth-hero-recipe:G;
  --hth-hero-filter:var(--hth-css-G);
  --hth-hero-filter-fine:var(--hth-svg-G)
}
body.page-id-207{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2094468945-1920x1200.jpeg?crop=1");
  --hth-hero-recipe:F;
  --hth-hero-filter:var(--hth-css-F);
  --hth-hero-filter-fine:var(--hth-svg-F)
}
body.page-id-93{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2012768141-1920x1200.jpeg?crop=1");
  --hth-hero-recipe:B;
  --hth-hero-filter:var(--hth-css-B);
  --hth-hero-filter-fine:var(--hth-svg-B)
}
body.page-id-838,body.page-id-1254{
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2104003758-1920x1200.jpeg?crop=1");
  --hth-hero-recipe:C;
  --hth-hero-filter:var(--hth-css-C);
  --hth-hero-filter-fine:var(--hth-svg-C)
}
body.post-type-archive-species_profile,body.tax-species{
  --hth-hero-recipe:D;
  --hth-hero-filter:var(--hth-css-D);
  --hth-hero-filter-fine:var(--hth-svg-D);
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2100401486-960x640.jpeg?crop=1")
}
body.post-type-archive-water_profile,body.tax-water{
  --hth-hero-recipe:C;
  --hth-hero-filter:var(--hth-css-C);
  --hth-hero-filter-fine:var(--hth-svg-C);
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2104003758-1920x1200.jpeg?crop=1")
}
body.post-type-archive-gear_review,body.post-type-archive-hth_gear_verdict{
  --hth-hero-recipe:E;
  --hth-hero-filter:var(--hth-css-E);
  --hth-hero-filter-fine:var(--hth-svg-E);
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_133970534-960x640.jpeg?crop=1")
}
body.post-type-archive-technique{
  --hth-hero-recipe:G;
  --hth-hero-filter:var(--hth-css-G);
  --hth-hero-filter-fine:var(--hth-svg-G);
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_380997587-960x640.jpeg?crop=1")
}
body.post-type-archive-hth_field_report,body.post-type-archive-field_report{
  --hth-hero-recipe:B;
  --hth-hero-filter:var(--hth-css-B);
  --hth-hero-filter-fine:var(--hth-svg-B);
  --hth-route-image:url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_252706690-960x640.jpeg?crop=1")
}
body.single:not(.home){
  --hth-hero-recipe:A;
  --hth-hero-filter:var(--hth-css-A);
  --hth-hero-filter-fine:var(--hth-svg-A)
}
body.single-species_profile{--hth-hero-recipe:D;--hth-hero-filter:var(--hth-css-D);--hth-hero-filter-fine:var(--hth-svg-D)}
body.single-water_profile{--hth-hero-recipe:C;--hth-hero-filter:var(--hth-css-C);--hth-hero-filter-fine:var(--hth-svg-C)}
body.single-gear_review,body.single-hth_gear_verdict,body.single-product{--hth-hero-recipe:E;--hth-hero-filter:var(--hth-css-E);--hth-hero-filter-fine:var(--hth-svg-E)}
body.single-technique{--hth-hero-recipe:G;--hth-hero-filter:var(--hth-css-G);--hth-hero-filter-fine:var(--hth-svg-G)}
body.single-hth_field_report,body.single-field_report{--hth-hero-recipe:B;--hth-hero-filter:var(--hth-css-B);--hth-hero-filter-fine:var(--hth-svg-B)}

/* Policy and trust pages use luminous editorial openings rather than stock
 * imagery — a legal page does not need a photograph of a lake.
 * Terms (1234), the editorial/safety disclaimer (1240) and the cookie policy
 * (8027) were omitted from this list, so they fell through to the blue-to-navy
 * gradient plate instead and looked unlike the pages they belong with. */
body.page-id-1 .hth-route-hero,body.page-id-92 .hth-route-hero,body.page-id-100 .hth-route-hero,
body.page-id-101 .hth-route-hero,body.page-id-102 .hth-route-hero,body.page-id-103 .hth-route-hero,
body.page-id-104 .hth-route-hero,body.page-id-105 .hth-route-hero,body.page-id-551 .hth-route-hero,
body.page-id-548 .hth-route-hero,body.page-id-549 .hth-route-hero,
body.page-id-1234 .hth-route-hero,body.page-id-1240 .hth-route-hero,body.page-id-8027 .hth-route-hero{min-height:clamp(24rem,48vh,38rem);background:var(--hth-pearl);color:var(--hth-navy);--hth-eyebrow-ink:var(--re-gold-ink,#071827)}
body.page-id-1 .hth-route-hero::before,body.page-id-92 .hth-route-hero::before,body.page-id-100 .hth-route-hero::before,
body.page-id-101 .hth-route-hero::before,body.page-id-102 .hth-route-hero::before,body.page-id-103 .hth-route-hero::before,
body.page-id-104 .hth-route-hero::before,body.page-id-105 .hth-route-hero::before,body.page-id-551 .hth-route-hero::before,
body.page-id-548 .hth-route-hero::before,body.page-id-549 .hth-route-hero::before,
body.page-id-1234 .hth-route-hero::before,body.page-id-1240 .hth-route-hero::before,body.page-id-8027 .hth-route-hero::before{
  inset:0;filter:none;transform:none;
  background-image:radial-gradient(circle at 82% 20%,rgba(199,162,87,.28),transparent 30%),linear-gradient(135deg,#E3E1D9 0 70%,color-mix(in srgb,#2E6F95 14%,#E3E1D9) 100%)
}
body.page-id-1 .hth-route-hero::after,body.page-id-92 .hth-route-hero::after,body.page-id-100 .hth-route-hero::after,
body.page-id-101 .hth-route-hero::after,body.page-id-102 .hth-route-hero::after,body.page-id-103 .hth-route-hero::after,
body.page-id-104 .hth-route-hero::after,body.page-id-105 .hth-route-hero::after,body.page-id-551 .hth-route-hero::after,
body.page-id-548 .hth-route-hero::after,body.page-id-549 .hth-route-hero::after,
body.page-id-1234 .hth-route-hero::after,body.page-id-1240 .hth-route-hero::after,body.page-id-8027 .hth-route-hero::after{background:none;opacity:0}
body.page-id-1 .hth-route-hero h1,body.page-id-92 .hth-route-hero h1,body.page-id-100 .hth-route-hero h1,
body.page-id-101 .hth-route-hero h1,body.page-id-102 .hth-route-hero h1,body.page-id-103 .hth-route-hero h1,
body.page-id-104 .hth-route-hero h1,body.page-id-105 .hth-route-hero h1,body.page-id-551 .hth-route-hero h1,
body.page-id-548 .hth-route-hero h1,body.page-id-549 .hth-route-hero h1{color:var(--hth-navy)}
body.page-id-1 .hth-route-hero .wp-block-post-excerpt,body.page-id-92 .hth-route-hero .wp-block-post-excerpt,
body.page-id-100 .hth-route-hero .wp-block-post-excerpt,body.page-id-101 .hth-route-hero .wp-block-post-excerpt,
body.page-id-102 .hth-route-hero .wp-block-post-excerpt,body.page-id-103 .hth-route-hero .wp-block-post-excerpt,
body.page-id-104 .hth-route-hero .wp-block-post-excerpt,body.page-id-105 .hth-route-hero .wp-block-post-excerpt,
body.page-id-551 .hth-route-hero .wp-block-post-excerpt,body.page-id-548 .hth-route-hero .wp-block-post-excerpt,
body.page-id-549 .hth-route-hero .wp-block-post-excerpt{color:var(--hth-charcoal)}

/* Orientation / evidence rail */
.hth-route-rail{border-block:1px solid rgba(7,24,39,.18);background:var(--hth-mist);color:var(--hth-navy)}
.hth-route-rail__inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(7,24,39,.18)}
.hth-route-rail__inner>div{min-height:7rem;padding:1.15rem;background:var(--hth-mist)}
.hth-route-rail span{display:block;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hth-route-rail strong{display:block;margin-top:.45rem;color:var(--hth-navy);font-size:.82rem;line-height:1.45}

/* Canonical WordPress content */
/* Content ground carries a shallow tonal shift and a seam under the hero so the
 * page reads as layered surfaces rather than one flat field of pearl. */
.hth-route-content{
  position:relative;
  padding:clamp(4rem,8vw,8rem) 0;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--hth-mist) 34%,var(--hth-pearl)) 0,var(--hth-pearl) 22rem),
    var(--hth-pearl)
}
.hth-route-content::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(7,24,39,.22) 18%,rgba(7,24,39,.22) 82%,transparent);
  pointer-events:none
}
/* Default to one clean content rail. Two columns exist only when a real aside is present. */
.hth-route-content__inner{display:block;align-items:start}
.hth-route-content__inner:has(> .hth-route-aside){display:grid;grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);gap:clamp(2rem,4vw,5rem)}
.hth-route-aside{position:sticky;top:2rem;padding:1.25rem;border-top:4px solid var(--hth-lake);background:var(--hth-mist);color:var(--hth-navy)}
.hth-route-aside p{margin:0;font-size:.78rem;line-height:1.55}
.hth-route-aside strong{display:block;margin-bottom:.5rem;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase}
.hth-route-reading{min-width:0;width:100%;max-width:100%;margin:0}
.hth-route-reading>.wp-block-post-content{width:100%;max-width:none;margin:0}
/* Text gets a readable measure; visual/editorial modules keep the full content rail. */
.hth-route-reading .wp-block-post-content>:where(p,ul,ol,blockquote){width:100%;max-width:72ch!important;margin-inline:auto}
.hth-route-reading .wp-block-post-content>:where(h2,h3,h4,h5,h6){width:100%;max-width:72ch!important;margin-inline:auto}
/* Visual and editorial modules use the full widened rail, so the page reads as
 * layered bands rather than one flat ribbon of text. Prose keeps its measure. */
.hth-route-reading .wp-block-post-content>:where(figure,.wp-block-table,.wp-block-columns,.wp-block-group,section,.alignwide){width:100%;max-width:100%!important;margin-inline:auto}
.hth-route-reading .wp-block-post-content>.alignfull{width:100%;max-width:none!important;margin-inline:0}
.hth-route-reading p,.hth-route-reading li{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.78}
.hth-route-reading h2{max-width:18ch;margin-top:clamp(3rem,7vw,5.5rem);color:var(--hth-navy);font-family:var(--hth-display);font-size:clamp(2.7rem,5.4vw,5.8rem);font-weight:400;line-height:.9;text-transform:uppercase}
.hth-route-reading h3{margin-top:2.5rem;color:var(--hth-navy);font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.15}
.hth-route-reading blockquote{padding:1.5rem 0 1.5rem 1.5rem;border-left:4px solid var(--hth-gold);color:var(--hth-navy);font-size:1.2rem}
.hth-route-reading figure{margin-block:2.5rem}
.hth-route-reading img{width:100%;height:auto}
.hth-route-reading table{width:100%;border-collapse:collapse;background:var(--hth-pearl)}
.hth-route-reading th,.hth-route-reading td{padding:.8rem;border:1px solid rgba(7,24,39,.28);text-align:left;vertical-align:top}
.hth-route-reading th{background:var(--hth-navy);color:var(--hth-pearl);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}

/* Existing application shells are visually integrated rather than replaced. */
.hth-route-reading .hth-application-embed,.hth-route-reading .hth-hatch-shell,.hth-route-reading .hth-rig-signal{max-width:78rem;padding:0;background:transparent}
.hth-route-reading iframe{display:block;width:100%;max-width:none;border:1px solid rgba(7,24,39,.24);background:var(--hth-pearl)}
.hth-route-reading .hth-application-embed__header,.hth-route-reading .hth-hatch-shell__header,.hth-route-reading .hth-rig-signal__header{padding:2rem;background:var(--hth-canvas);color:var(--hth-navy)}
.hth-route-reading .hth-application-embed__header h2,.hth-route-reading .hth-hatch-shell__header h2,.hth-route-reading .hth-rig-signal__header h2{margin-top:.4rem;font-family:var(--hth-display);font-size:clamp(2.4rem,5vw,5rem);font-weight:400;line-height:.9;text-transform:uppercase}

/* Compatibility Builder direct template */
.hth-route-tool{padding:clamp(3rem,6vw,6rem) 0;background:var(--hth-pearl)}
.hth-route-tool>.hth-route-shell{max-width:1440px}
.hth-route-tool .hth-compatibility-frame,.hth-route-tool iframe{max-width:none}
.hth-route-tool__method{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;margin-top:2rem;background:var(--hth-navy)}
.hth-route-tool__method>div{padding:clamp(1.5rem,4vw,3rem);background:var(--hth-canvas);color:var(--hth-navy)}
.hth-route-tool__method h2{font-family:var(--hth-display);font-size:clamp(2rem,4vw,4rem);font-weight:400;line-height:.9;text-transform:uppercase}

/* Honey Hole keeps its tested contract but receives the approved shell. */
body.page-id-93 .honey-hole-intelligence{width:min(1440px,calc(100% - 2*clamp(1.25rem,4vw,2.5rem)));margin:0 auto;padding:clamp(3rem,7vw,7rem) 0;background:var(--hth-pearl);color:var(--hth-navy);font-family:var(--hth-body)}
body.page-id-93 .honey-hole-intelligence__header{padding:clamp(2rem,5vw,4rem);border:0;background:var(--hth-navy);color:var(--hth-pearl)}
body.page-id-93 .honey-hole-intelligence__header h1{margin:.35rem 0 1rem;color:var(--hth-pearl);font-family:var(--hth-display);font-size:clamp(3rem,7vw,7rem);font-weight:400;line-height:.86;text-transform:uppercase}
body.page-id-93 .hhi-boundary,body.page-id-93 .hhi-runtime,body.page-id-93 #hhi-form,body.page-id-93 #hhi-status,body.page-id-93 #hhi-result{margin-inline:clamp(1rem,5vw,4rem)}

/* Compatibility Builder application frame */
.hth-route-tool .hth-application-embed{max-width:none;margin:0;background:transparent}
.hth-route-tool .hth-application-embed__header{padding:clamp(1.5rem,4vw,3rem);background:var(--hth-canvas);color:var(--hth-navy)}
.hth-route-tool .hth-application-embed__header h2{margin:.4rem 0 1rem;font-family:var(--hth-display);font-size:clamp(2.6rem,5vw,5.4rem);font-weight:400;line-height:.88;text-transform:uppercase}
.hth-route-tool .hth-application-embed__frame-wrap{background:var(--hth-navy);padding:1px}
.hth-route-tool .hth-application-embed__frame{display:block;width:100%;max-width:none;border:0;background:var(--hth-pearl)}

/* Honey Hole Intelligence is supplied by the content plugin and receives a
 * full visual port here without changing its verified data contract. */
body.page-id-93 main.hth-shell{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:linear-gradient(180deg,rgba(7,24,39,.38),rgba(7,24,39,.92) 30rem,#E3E1D9 30rem),url("https://hookthehorizon.blog/wp-content/uploads/2026/07/AdobeStock_2104003758-1920x1200.jpeg?crop=1") center top/100% 30rem no-repeat;color:var(--hth-charcoal)}
body.page-id-93 main.hth-shell>.hth-kicker,body.page-id-93 main.hth-shell>h1,body.page-id-93 main.hth-shell>h1+p{position:relative;z-index:1;width:min(1440px,calc(100% - 2*clamp(1.25rem,4vw,2.5rem)));margin-inline:auto;color:var(--hth-pearl)}
body.page-id-93 main.hth-shell>.hth-kicker{padding-top:clamp(7rem,12vw,10rem);color:var(--hth-gold)}
body.page-id-93 main.hth-shell>h1{max-width:12ch;margin-top:.35rem;font-family:var(--hth-display);font-size:clamp(3.8rem,8vw,8rem);font-weight:400;line-height:.84;text-transform:uppercase}
body.page-id-93 main.hth-shell>h1+p{max-width:48rem;margin-top:1.25rem;font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.6}
body.page-id-93 main.hth-shell>br{display:block;height:clamp(4rem,8vw,7rem);content:""}
body.page-id-93 .hth-hhi{width:min(1440px,calc(100% - 2*clamp(1.25rem,4vw,2.5rem)))!important;max-width:none!important;margin:0 auto!important;padding-bottom:clamp(4rem,8vw,8rem);color:var(--hth-navy);font-family:var(--hth-body)}
body.page-id-93 .hth-hhi>h2{margin:0;font-family:var(--hth-display);font-size:clamp(3rem,6vw,6rem);font-weight:400;line-height:.9;text-transform:uppercase}
/* HHI tool shell mirrors Restaurant/Venue Intelligence: equal cards, airy filters, site palette. */
body.page-id-93 .hth-hhi-live{margin:2rem 0!important;padding:1.35rem 1.45rem!important;border:1px solid rgba(7,24,39,.2)!important;border-radius:0!important;background:linear-gradient(180deg,color-mix(in srgb,var(--hth-mist) 70%,#E3E1D9),var(--hth-pearl));color:var(--hth-navy);box-shadow:0 20px 55px -48px rgba(7,24,39,.45)}
body.page-id-93 .hth-hhi-live h2{margin:0 0 .65rem;font-family:var(--hth-display);font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:400;line-height:.96;letter-spacing:-.02em;text-transform:uppercase}
body.page-id-93 .hth-hhi-live form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:end}
body.page-id-93 .hth-hhi label{display:block;min-width:0;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hth-navy)}
body.page-id-93 .hth-hhi input,body.page-id-93 .hth-hhi select,body.page-id-93 .hth-hhi button{width:100%;min-height:44px;margin-top:.45rem;padding:.7rem .8rem;border-radius:0!important;border:1px solid rgba(7,24,39,.28)!important;background:var(--hth-pearl)!important;color:var(--hth-navy)!important;font:inherit}
body.page-id-93 .hth-hhi button{background:var(--hth-navy)!important;color:var(--hth-pearl)!important;border-color:var(--hth-navy)!important;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
body.page-id-93 .hth-hhi__filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:end;margin:1.5rem 0 1rem;padding:1.25rem 1.35rem;border:1px solid rgba(7,24,39,.18);background:var(--hth-pearl);box-shadow:0 20px 55px -48px rgba(7,24,39,.4)}
body.page-id-93 .hth-hhi__grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1.25rem!important;align-items:stretch;margin-top:1.35rem!important}
body.page-id-93 .hth-hhi__card{position:relative;display:flex;flex-direction:column;grid-column:auto!important;min-width:0;min-height:22rem;margin-top:0!important;padding:1.45rem!important;border:1px solid rgba(7,24,39,.18)!important;border-top:5px solid var(--hth-lake)!important;border-radius:0!important;background:var(--hth-pearl)!important;color:var(--hth-navy)!important;box-shadow:0 24px 70px -58px rgba(7,24,39,.55);overflow:hidden}
body.page-id-93 .hth-hhi__card:nth-child(3n+2){border-top-color:var(--hth-teal)!important}
body.page-id-93 .hth-hhi__card:nth-child(3n+3){border-top-color:var(--hth-gold)!important}
body.page-id-93 .hth-hhi__card:nth-child(3n+1){border-top-color:var(--hth-forest)!important}
body.page-id-93 .hth-hhi__card h3{margin:0 0 .55rem;max-width:none;font-family:var(--hth-display);font-size:clamp(1.65rem,2.4vw,2.35rem);font-weight:400;line-height:.98;letter-spacing:-.03em;text-transform:none}
body.page-id-93 .hth-hhi__card>p{margin:0 0 .7rem;font-size:.94rem;line-height:1.5}
body.page-id-93 .hth-hhi__status{display:inline-flex;align-self:flex-start;margin:0 0 .85rem;padding:.45rem .58rem;background:color-mix(in srgb,var(--hth-mist) 55%,#E3E1D9);font-size:.56rem;font-weight:800;letter-spacing:.06em;line-height:1.25;text-transform:uppercase}
body.page-id-93 .hth-hhi__card h4{margin:1rem 0 .4rem;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--hth-navy) 72%,var(--hth-lake))}
body.page-id-93 .hth-hhi__card ul{margin:.15rem 0 .55rem;padding-left:1.1rem;font-size:.9rem;line-height:1.45}
body.page-id-93 .hth-hhi__card li+li{margin-top:.28rem}
body.page-id-93 .hth-hhi__card a,body.page-id-93 .hth-hhi__card .hth-hhi__planner-handoff{margin-top:auto;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
body.page-id-93 .hth-hhi__card a{color:var(--hth-lake);font-weight:800}
body.page-id-93 .hth-hhi__planner-handoff{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;margin-top:.85rem;padding:.7rem .95rem;border:1px solid var(--hth-navy);background:var(--hth-navy);color:var(--hth-pearl);cursor:pointer}
body.page-id-93 .hhi-enhanced__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
body.page-id-93 .hhi-enhanced__card{min-height:20rem;padding:1.45rem 1.35rem;border:1px solid rgba(7,24,39,.18);border-radius:0;border-top:5px solid var(--hth-lake);background:var(--hth-pearl);box-shadow:0 24px 70px -58px rgba(7,24,39,.55)}
body.page-id-93 .hhi-enhanced__card.is-stop{border-top-color:#D55C3E}
body.page-id-93 .hhi-enhanced__card.is-verify{border-top-color:var(--hth-gold)}
body.page-id-93 .hhi-enhanced__card.is-prepare{border-top-color:var(--hth-teal)}
body.page-id-93 .hhi-enhanced__filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:end;padding:1.25rem 1.35rem;border:1px solid rgba(7,24,39,.18);background:var(--hth-pearl);box-shadow:0 20px 55px -48px rgba(7,24,39,.4)}

.hth-search-results .wp-block-post-template{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;padding:0;list-style:none}
.hth-search-results .wp-block-post{grid-column:span 4;padding:1.25rem;border-top:4px solid var(--hth-lake);background:color-mix(in srgb,var(--hth-mist) 28%,var(--hth-pearl))}
.hth-search-results .wp-block-post:nth-child(1){grid-column:span 8}
.hth-search-results .wp-block-post:nth-child(2){grid-column:span 4;margin-top:3rem;border-color:var(--hth-gold)}
.hth-search-results .wp-block-post-title{font-family:var(--hth-display);font-size:clamp(1.8rem,3vw,3rem);font-weight:400;line-height:.92;text-transform:uppercase}

/* Canonical single, archive, taxonomy, attachment, and fallback families. */
.hth-route-main--single .hth-route-hero{min-height:clamp(28rem,58vh,44rem)}
.hth-route-meta{gap:.75rem 1.5rem;margin-top:1.5rem;color:rgba(227,225,217,.92);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hth-route-featured{margin:0;background:var(--hth-navy)}
.hth-route-featured img{width:100%;max-height:72vh;object-fit:cover}
.hth-route-main--single .hth-route-content__inner{display:block}
.hth-route-main--single .hth-route-reading{margin-inline:auto}
.hth-route-main--archive .hth-route-hero{min-height:clamp(24rem,48vh,38rem)}
.hth-route-content--archive{padding-top:clamp(3rem,6vw,6rem)}
.hth-route-query .wp-block-post-template,.hth-route-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem;padding:0;list-style:none}
.hth-route-query .wp-block-post{grid-column:span 4;margin:0}
.hth-route-card{height:100%;padding:1.25rem;border-top:5px solid var(--hth-lake);background:color-mix(in srgb,var(--hth-mist) 28%,var(--hth-pearl))}
.hth-route-query .wp-block-post:nth-child(3n+2) .hth-route-card{border-color:var(--hth-gold)}
.hth-route-query .wp-block-post:nth-child(3n+3) .hth-route-card{border-color:var(--hth-teal)}
.hth-route-card .wp-block-post-title{margin:.75rem 0 .5rem;font-family:var(--hth-display);font-size:clamp(2rem,3.4vw,3.5rem);font-weight:400;line-height:.9;text-transform:uppercase}
.hth-route-card .wp-block-post-date,.hth-route-card__terms{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hth-route-query .wp-block-query-pagination{margin-top:3rem;padding-top:1.25rem;border-top:1px solid rgba(7,24,39,.25)}

/* Normalized family aliases and commerce/result surfaces. */
.hth-route-single .hth-route-hero{min-height:clamp(28rem,58vh,44rem)}
.hth-route-single .hth-route-content__inner{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
.hth-route-archive .hth-route-hero{min-height:clamp(24rem,48vh,38rem)}
.hth-route-archive-grid .wp-block-post-template{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem;padding:0;list-style:none}
.hth-route-archive-grid .wp-block-post{grid-column:span 4;margin:0}
.hth-route-archive-grid .wp-block-post:nth-child(3n+2) .hth-route-card{border-color:var(--hth-gold)}
.hth-route-archive-grid .wp-block-post:nth-child(3n+3) .hth-route-card{border-color:var(--hth-teal)}
.hth-route-archive-grid .wp-block-query-pagination{margin-top:3rem;padding-top:1.25rem;border-top:1px solid rgba(7,24,39,.25)}
.hth-commerce-route .hth-route-hero{min-height:clamp(22rem,42vh,34rem)}
.hth-commerce{padding:clamp(3rem,7vw,7rem) 0;background:var(--hth-pearl);color:var(--hth-navy)}
.hth-commerce .woocommerce,.hth-commerce .wc-block-cart,.hth-commerce .wc-block-checkout,.hth-commerce .wp-block-woocommerce-product-collection{width:100%;max-width:none}
.hth-commerce input,.hth-commerce select,.hth-commerce textarea{border-radius:0;border:1px solid rgba(7,24,39,.45);background:#E3E1D9;color:var(--hth-navy)}
.hth-commerce button,.hth-commerce .button,.hth-commerce .wp-element-button{border-radius:0;background:var(--hth-navy);color:var(--hth-pearl);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hth-route-result .hth-route-reading{max-width:78rem}

@media(max-width:1120px){
  body.page-id-93 .hth-hhi__grid,body.page-id-93 .hhi-enhanced__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.page-id-93 .hth-hhi__filters,body.page-id-93 .hth-hhi-live form,body.page-id-93 .hhi-enhanced__filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hth-route-rail__inner{grid-template-columns:1fr 1fr}
  .hth-route-content__inner,
  .hth-route-content__inner:has(> .hth-route-aside),
  .hth-route-single .hth-route-content__inner{
    display:block!important;
    grid-template-columns:1fr!important;
  }
  .hth-route-aside{position:static!important;width:100%!important;max-width:none!important}
  .hth-route-tool__method{grid-template-columns:1fr}
  .hth-search-results .wp-block-post-template{grid-template-columns:1fr 1fr!important}
  .hth-search-results .wp-block-post,.hth-search-results .wp-block-post:nth-child(1),.hth-search-results .wp-block-post:nth-child(2){grid-column:auto;margin-top:0}
}
@media(max-width:767px){
  .hth-route-hero{min-height:clamp(18rem,52vh,28rem)!important}
  .hth-route-hero h1{font-size:clamp(2.35rem,11.5vw,3.6rem)!important;max-width:12ch}
  .hth-route-hero__signal{display:grid;grid-template-columns:1fr;gap:.85rem 1rem}
  .hth-route-rail__inner{grid-template-columns:1fr}
  .hth-route-content{padding:2.25rem 0 3rem}
  .hth-route-reading h2{font-size:clamp(1.85rem,9.5vw,2.75rem)!important;max-width:14ch}
  .hth-route-shell{width:calc(100% - 1.5rem)!important;max-width:none!important}
  .hth-route-hero__inner{width:calc(100% - 1.5rem)!important;padding-block:clamp(5rem,16vw,7rem) clamp(1.5rem,5vw,2.5rem)!important}
  .hth-route-query .wp-block-post-template,
  .hth-route-grid,
  .hth-route-archive-grid .wp-block-post-template,
  .hth-search-results .wp-block-post-template{grid-template-columns:1fr!important}
  .hth-route-query .wp-block-post,
  .hth-search-results .wp-block-post,
  .hth-route-archive-grid .wp-block-post{grid-column:auto!important;margin-top:0!important}
  body.page-id-93 main.hth-shell{background-size:auto 28rem}
  body.page-id-93 main.hth-shell>.hth-kicker{padding-top:5rem}
  body.page-id-93 .hth-hhi__grid,body.page-id-93 .hhi-enhanced__grid,.hth-search-results .wp-block-post-template{grid-template-columns:1fr!important}
  body.page-id-93 .hth-hhi__filters,body.page-id-93 .hth-hhi-live form,body.page-id-93 .hhi-enhanced__filters{grid-template-columns:1fr}
  body.page-id-93 .hth-hhi__card,body.page-id-93 .hhi-enhanced__card{min-height:0}
}
/* Publication body parity with homepage tokens */
.hth-pub-body{
  color:#355133;
  font-size:1.05rem;
  line-height:1.7
}
.hth-pub-body h2,
.hth-pub-body h3{
  font-family:"Playfair Display",Georgia,serif;
  color:#071827;
  text-transform:none;
  letter-spacing:-.02em;
  line-height:1.15
}
.hth-pub-body .hth-warning,
.hth-route-main .hth-warning{
  margin:2rem 0;
  padding:1.1rem 1.25rem;
  border-left:3px solid #C7A257;
  background:rgba(7,24,39,.06)
}
.hth-tool-shell .hth-route-hero h1{
  max-width:18ch;
  text-transform:none
}
body:not(.home) .hth-chase-header{
  position:relative;
  z-index:40;
  background:#071827;
  color:#E3E1D9
}

/* Contrast contract: route, application, archive, and commerce surfaces. */
.hth-route-hero,
.hth-route-hero *{color:var(--hth-pearl)}
.hth-route-hero .hth-route-eyebrow,
.hth-route-hero__signal b{color:var(--hth-gold)}
.hth-route-hero .wp-block-post-excerpt,
.hth-route-hero .wp-block-post-excerpt *{color:rgba(227,225,217,.90)}

body.page-id-1 .hth-route-hero *,body.page-id-92 .hth-route-hero *,body.page-id-100 .hth-route-hero *,
body.page-id-101 .hth-route-hero *,body.page-id-102 .hth-route-hero *,body.page-id-103 .hth-route-hero *,
body.page-id-104 .hth-route-hero *,body.page-id-105 .hth-route-hero *,body.page-id-551 .hth-route-hero *,
body.page-id-548 .hth-route-hero *,body.page-id-549 .hth-route-hero *{color:var(--hth-navy)}
body.page-id-1 .hth-route-hero .wp-block-post-excerpt,body.page-id-92 .hth-route-hero .wp-block-post-excerpt,
body.page-id-100 .hth-route-hero .wp-block-post-excerpt,body.page-id-101 .hth-route-hero .wp-block-post-excerpt,
body.page-id-102 .hth-route-hero .wp-block-post-excerpt,body.page-id-103 .hth-route-hero .wp-block-post-excerpt,
body.page-id-104 .hth-route-hero .wp-block-post-excerpt,body.page-id-105 .hth-route-hero .wp-block-post-excerpt,
body.page-id-551 .hth-route-hero .wp-block-post-excerpt,body.page-id-548 .hth-route-hero .wp-block-post-excerpt,
body.page-id-549 .hth-route-hero .wp-block-post-excerpt{color:var(--hth-charcoal)}
body.page-id-1 .hth-route-hero .hth-route-eyebrow,body.page-id-92 .hth-route-hero .hth-route-eyebrow,
body.page-id-100 .hth-route-hero .hth-route-eyebrow,body.page-id-101 .hth-route-hero .hth-route-eyebrow,
body.page-id-102 .hth-route-hero .hth-route-eyebrow,body.page-id-103 .hth-route-hero .hth-route-eyebrow,
body.page-id-104 .hth-route-hero .hth-route-eyebrow,body.page-id-105 .hth-route-hero .hth-route-eyebrow,
body.page-id-551 .hth-route-hero .hth-route-eyebrow,body.page-id-548 .hth-route-hero .hth-route-eyebrow,
body.page-id-549 .hth-route-hero .hth-route-eyebrow{color:var(--hth-navy)}

.hth-route-rail,
.hth-route-rail *{color:var(--hth-navy)}
.hth-route-aside,
.hth-route-aside *{color:var(--hth-navy)}
.hth-route-tool__method>div,
.hth-route-tool__method>div *,
.hth-route-tool .hth-application-embed__header,
.hth-route-tool .hth-application-embed__header *{color:var(--hth-navy)}

.hth-route-card,
.hth-route-card *,
.hth-search-results .wp-block-post,
.hth-search-results .wp-block-post *{color:var(--hth-navy)}
.hth-route-card a,
.hth-search-results .wp-block-post a{color:var(--hth-lake)}

body.page-id-93 .honey-hole-intelligence__header,
body.page-id-93 .honey-hole-intelligence__header *{color:var(--hth-pearl)}
body.page-id-93 .honey-hole-intelligence__header .hth-route-eyebrow{color:var(--hth-gold)}
body.page-id-93 .hth-hhi__card,
body.page-id-93 .hth-hhi__card *,
body.page-id-93 .hhi-enhanced__card,
body.page-id-93 .hhi-enhanced__card *{color:var(--hth-navy)}
body.page-id-93 .hth-hhi__card a{color:var(--hth-lake)}
body.page-id-93 .hth-hhi__planner-handoff,
body.page-id-93 .hth-hhi__planner-handoff *{color:var(--hth-pearl)}

.hth-commerce,
.hth-commerce *{color:var(--hth-navy)}
.hth-commerce button,.hth-commerce .button,.hth-commerce .wp-element-button,
.hth-commerce button *,.hth-commerce .button *,.hth-commerce .wp-element-button *{color:var(--hth-pearl)}
.hth-commerce input,.hth-commerce select,.hth-commerce textarea{color:var(--hth-navy)}

@media(prefers-reduced-motion:reduce){.hth-route-main *,.hth-route-main *::before,.hth-route-main *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.hth-route-hero::before,.hth-route-hero::after{display:none}.hth-route-hero,.hth-route-rail,.hth-route-aside{border:2px solid CanvasText;background:Canvas!important;color:CanvasText!important}}
@media print{
  .hth-route-hero{min-height:auto;background:#E3E1D9!important;color:#071827!important}
  .hth-route-hero::before,.hth-route-hero::after,.hth-route-rail,.hth-route-aside{display:none!important}
  .hth-route-hero__inner,.hth-route-content{padding:1rem 0}
  .hth-route-hero h1{color:#071827!important;font-size:3rem}
  .hth-route-content__inner{display:block}
  .hth-route-reading .wp-block-post-content>*{max-width:none}
}
/* hook-text-display-standard */
/* Text Display Standard v1.0 — Hook the Horizon
   Base type floors: root scale, body size, article measure, wrapping safety.

   2026-09-03: everything scoped to `.hth-home-*` / `.hth-homepage` was removed.
   Those classes belong to the retired home.css / home-v2.css front page; the
   live front page is `.hth-rs-*` and no published post, page, template or part
   contains a single `.hth-home-*` node. The `.hook-nav` rules went with the
   deleted nav fallback. File went 3.0 KB -> 0.9 KB; nothing it still sets was
   being applied to a rendered element by the removed blocks. */

:root {
  --tds-ui: 1rem;
  --tds-meta: 0.875rem;
  --tds-body: 1.125rem;
  --hth-navy: #071827;
  --hth-pearl: #E3E1D9;
  --hth-gold: #C7A257;
  --hth-gold-on-light: #071827;
  --hth-coral: #D55C3E;
  --hth-paper: #E3E1D9;
}

html { font-size: 100%; }
body {
  font-size: var(--tds-body);
  line-height: 1.65;
}

/* Core navigation block, wherever it is used, keeps a 16px floor. */
.wp-block-navigation-item__content {
  font-size: var(--tds-ui) !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
}

/* Body copy */
.entry-content p,
.article-content p {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.2rem);
  line-height: 1.7;
  max-width: 68ch;
}

body :where(h1, h2, h3, h4, p, a, button, li) {
  overflow-wrap: break-word;
}
img, video, svg { max-width: 100%; height: auto; }
/* hook-the-horizon-article-template */
/* Hook the Horizon article-template system.
 * Loads after typography-normalization.css and owns the shared article
 * hierarchy, hero, navigation, trust notes, application handoff, and related reading.
 */

body.hth-article-template .hth-route-main--single{
  background:var(--hth-navy);
}

body.hth-article-template .hth-route-hero--article{
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:end;
  min-height:clamp(30rem,68vh,48rem);
  overflow:hidden;
  background:var(--hth-navy);
  color:var(--hth-pearl);
}

body.hth-article-template .hth-route-hero--article>.hth-route-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  margin:0;
}

body.hth-article-template .hth-route-hero--article>.hth-route-hero__media img{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  object-position:center;
}

body.hth-article-template .hth-route-hero--article::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(7,24,39,.16) 0%,rgba(7,24,39,.44) 42%,rgba(7,24,39,.94) 100%),
    linear-gradient(90deg,rgba(7,24,39,.74) 0%,rgba(7,24,39,.18) 58%,rgba(7,24,39,.08) 100%);
}

/* Species Intelligence hero: crop for the fish/body plane, then use a neutral
   navy/teal wash so labels remain readable without recoloring identification cues. */
body.single-species_profile.hth-article-template .hth-route-hero--article>.hth-route-hero__media img,
body.hth-species-intelligence-single.hth-article-template .hth-route-hero--article>.hth-route-hero__media img{
  object-position:center 44%;
  transform:scale(1.012) translateZ(0);
  transform-origin:center;
}

body.single-species_profile.hth-article-template .hth-route-hero--article::before,
body.hth-species-intelligence-single.hth-article-template .hth-route-hero--article::before{
  background:
    linear-gradient(180deg,rgba(7,24,39,.10) 0%,rgba(7,24,39,.34) 42%,rgba(7,24,39,.93) 100%),
    linear-gradient(90deg,rgba(7,24,39,.80) 0%,rgba(7,24,39,.28) 52%,rgba(23,111,120,.08) 100%),
    radial-gradient(circle at 76% 32%,rgba(199,162,87,.07),transparent 30%);
}

/* Legacy Species Intelligence posts keep the standard single template. Layer its
   existing featured-image block into the hero instead of duplicating media markup. */
body.hth-species-intelligence-single.hth-article-template .hth-route-main--single{
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
body.hth-species-intelligence-single.hth-article-template .hth-route-hero--article,
body.hth-species-intelligence-single.hth-article-template .hth-route-main--single>.hth-route-featured{
  grid-column:1;
  grid-row:1;
}
body.hth-species-intelligence-single.hth-article-template .hth-route-hero--article{
  z-index:1;
  background:transparent;
}
body.hth-species-intelligence-single.hth-article-template .hth-route-main--single>.hth-route-featured{
  position:relative;
  z-index:0;
  width:100%;
  height:clamp(30rem,68vh,48rem);
  margin:0;
  aspect-ratio:auto!important;
  overflow:hidden;
  background:var(--hth-navy);
}
body.hth-species-intelligence-single.hth-article-template .hth-route-main--single>.hth-route-featured img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 44%!important;
  filter:var(--hth-hero-filter, var(--hth-css-D));
  transform:scale(1.012) translateZ(0);
  transform-origin:center;
}
body.hth-species-intelligence-single.hth-article-template .hth-route-main--single>.hth-route-featured:has(img[src*="species-illustration"]),
body.hth-species-intelligence-single.hth-article-template .hth-route-main--single>.hth-route-featured:has(img[src*="species-reference"]){
  background:#E3E1D9;
}
body.hth-species-intelligence-single.hth-article-template .hth-route-main--single>.hth-route-featured img[src*="species-illustration"],
body.hth-species-intelligence-single.hth-article-template .hth-route-main--single>.hth-route-featured img[src*="species-reference"]{
  object-fit:contain!important;
  object-position:center!important;
  padding:1rem;
  filter:none;
  transform:none;
}

body.hth-article-template .hth-route-hero--article::after{
  z-index:1;
  opacity:.16;
}

body.hth-article-template .hth-route-hero--article .hth-route-hero__inner{
  position:relative;
  z-index:2;
  padding-block:clamp(7rem,13vw,11rem) clamp(2.5rem,6vw,4.75rem);
}

body.hth-article-template .hth-route-hero--article h1.wp-block-post-title{
  max-width:14ch;
  margin:.25rem 0 0;
  color:var(--hth-pearl);
  font-family:var(--hth-display);
  font-size:clamp(3.2rem,6.8vw,6.8rem)!important;
  font-weight:400;
  letter-spacing:-.012em!important;
  line-height:.92!important;
  text-transform:none;
  text-wrap:balance;
}

body.hth-article-template .hth-route-hero--article .wp-block-post-excerpt{
  max-width:46rem;
  margin-top:1.25rem;
  color:rgba(227,225,217,.92);
  font-size:clamp(1.05rem,1.45vw,1.28rem)!important;
  line-height:1.6!important;
}

body.hth-article-template .hth-route-hero--article .wp-block-post-excerpt p{
  max-width:none;
  margin:0;
  color:inherit;
  font-size:inherit!important;
  line-height:inherit!important;
}

.hth-article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem 1.4rem;
  margin-top:1.4rem;
  padding-top:1rem;
  border-top:1px solid rgba(227,225,217,.28);
  color:rgba(227,225,217,.86);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.45;
  text-transform:uppercase;
}

.hth-article-meta__item{
  display:inline-flex;
  gap:.35rem;
  align-items:baseline;
}

.hth-article-meta__item b{
  color:var(--hth-gold);
  font-weight:800;
}

.hth-featured-credit{
  width:fit-content;
  max-width:min(42rem,100%);
  margin:1.15rem 0 0;
  padding:.48rem .68rem;
  background:rgba(7,24,39,.72);
  color:rgba(227,225,217,.9);
  font-size:.72rem!important;
  letter-spacing:.035em!important;
  line-height:1.45!important;
}

body.hth-article-template .hth-route-content{
  padding:clamp(3.25rem,7vw,7rem) 0;
}

body.hth-article-template .hth-route-reading{
  /* Full shell width — no thin Gutenberg column */
  width:100%;
  max-width:none;
  margin-inline:auto;
}

/* Desktop: article left, sticky TOC right */
@media (min-width: 1100px){
  body.hth-article-template .hth-route-reading:has(.hth-article-toc){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(15rem,18rem)!important;
    gap:clamp(1.75rem,3vw,2.75rem)!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.hth-article-template .hth-route-reading:has(.hth-article-toc) > .hth-article-toc{
    grid-column:2!important;
    grid-row:1!important;
    position:sticky!important;
    top:5.5rem!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    max-height:calc(100vh - 6.5rem);
    overflow:auto;
    scrollbar-width:thin;
    align-self:start!important;
    z-index:2;
  }
  body.hth-article-template .hth-route-reading:has(.hth-article-toc) > .wp-block-post-content,
  body.hth-article-template .hth-route-reading:has(.hth-article-toc) > .entry-content{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0;
  }
  body.hth-article-template .hth-route-reading:has(.hth-article-toc) .hth-article-toc ol{
    columns:1!important;
    column-gap:0!important;
  }
  body.hth-article-template .hth-route-reading:has(.hth-article-toc) .hth-article-toc__toggle{
    display:none!important;
  }
  /* Allow sticky: avoid clipping ancestors on article templates */
  body.hth-article-template .hth-route-main,
  body.hth-article-template .hth-route-content{
    overflow:visible;
  }
}

body.hth-article-template .hth-route-reading>.wp-block-post-content{
  width:100%;
  max-width:none;
  margin:0;
}

/* Children fill the 80vw reading column set by style.css. */
body.hth-article-template .hth-route-reading .wp-block-post-content>*{
  width:100%;
  max-width:100%!important;
  margin-inline:0;
}

body.hth-article-template .hth-route-reading .wp-block-post-content>.alignfull,
body.hth-article-template .hth-route-reading .wp-block-post-content>.alignwide{
  width:100%;
  max-width:100%!important;
}

body.hth-article-template .hth-route-reading .wp-block-post-content>h2{
  scroll-margin-top:2rem;
}

body.hth-article-template .hth-route-reading h2,
body.hth-article-template .hth-article-handoff h2,
body.hth-article-template .hth-article-notes h2,
body.hth-article-template .hth-related-reading h2{
  color:var(--hth-pearl);
  font-family:var(--hth-display);
  font-size:clamp(2.15rem,3.75vw,3.9rem)!important;
  font-weight:400;
  letter-spacing:-.012em!important;
  line-height:1!important;
  text-transform:none;
  text-wrap:balance;
}

body.hth-article-template .hth-route-reading .wp-block-post-content>h2{
  max-width:22ch;
  margin-top:clamp(3rem,6vw,5rem);
}

body.hth-article-template .hth-route-reading h3{
  font-size:clamp(1.35rem,1.9vw,1.8rem)!important;
  line-height:1.2!important;
}

body.hth-article-template .hth-route-reading p,
body.hth-article-template .hth-route-reading li{
  font-size:clamp(1.04rem,1rem + .16vw,1.15rem)!important;
  line-height:1.78!important;
}

.hth-article-toc{
  width:min(100%,80vw);
  max-width:min(100%,80vw);
  margin:0 auto clamp(3rem,6vw,5rem);
  padding:1.35rem 1.5rem 1.45rem;
  border-top:5px solid var(--hth-lake);
  background:color-mix(in srgb,var(--hth-mist) 32%,var(--hth-pearl));
  color:var(--hth-navy);
  box-sizing:border-box;
}

.hth-article-toc__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.hth-article-toc__label,
.hth-article-handoff__eyebrow,
.hth-article-notes__eyebrow,
.hth-related-reading__eyebrow,
.hth-related-card__eyebrow{
  margin:0;
  /* These eyebrows sit on the light card grounds (#E3E1D9 / #E3E1D9 /
   * #D8D3C8 / #E3E1D9), where the bright teal measures 3.93-4.48:1 and fails
   * AA at 11px/800. The ink variant clears 4.65:1 on all of them. */
  color:var(--re-teal-ink,#071827);
  font-size:.72rem!important;
  font-weight:800;
  letter-spacing:.14em!important;
  line-height:1.45!important;
  text-transform:uppercase;
}

/* Present only so wpautop sees a block tag around the button. It must not
 * become a layout box of its own. */
.hth-article-toc__actions{display:contents}
.hth-article-toc__toggle{
  display:none;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  padding:.4rem 0 .4rem .75rem;
  border:0;
  background:transparent;
  color:var(--hth-navy);
  font:700 .72rem/1.3 var(--hth-ui);
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}

.hth-article-toc__toggle svg{
  width:.8rem;
  transition:transform .2s ease;
}

.hth-article-toc ol{
  columns:2;
  column-gap:2.5rem;
  margin:1rem 0 0;
  padding-left:1.2rem;
}

.hth-article-toc li{
  break-inside:avoid;
  margin:.35rem 0;
  padding-right:.8rem;
  font-size:.94rem!important;
  line-height:1.45!important;
}

/* TOC entries are the primary in-article navigation and become a single
 * column on mobile. As bare inline links they computed to roughly 22px tall
 * with ~6px between them; padding gives them a real hit area. */
.hth-article-toc a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding-block:.3rem;
  color:var(--hth-navy);
}
@media (pointer: coarse){
  .hth-article-toc a{min-height:44px}
  .hth-article-toc li{margin:.1rem 0}
}

.hth-article-handoff,
.hth-article-notes,
.hth-related-reading{
  width:min(100%,80vw);
  max-width:min(100%,80vw);
  margin:clamp(4rem,8vw,7rem) auto 0;
}

.hth-article-handoff{
  position:relative;
  overflow:hidden;
  padding:clamp(1.75rem,4vw,3.25rem);
  background:linear-gradient(135deg,var(--hth-navy),color-mix(in srgb,var(--hth-teal) 42%,var(--hth-navy)));
  color:var(--hth-pearl);
}

.hth-article-handoff::after{
  content:"";
  position:absolute;
  right:-5rem;
  bottom:-8rem;
  width:18rem;
  height:18rem;
  border:1px solid rgba(199,162,87,.5);
  border-radius:50%;
  box-shadow:0 0 0 3rem rgba(199,162,87,.08),0 0 0 6rem rgba(199,162,87,.05);
}

.hth-article-handoff>*{
  position:relative;
  z-index:1;
}

body.hth-article-template .hth-article-handoff h2{
  max-width:13ch;
  margin:.45rem 0 1.4rem;
  color:var(--hth-pearl);
}

.hth-article-handoff__eyebrow{
  color:var(--hth-gold);
}

.hth-article-handoff__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.78rem 1rem;
  border:1px solid var(--hth-gold);
  background:var(--hth-gold);
  color:var(--hth-navy)!important;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}

.hth-article-notes{
  padding:clamp(1.5rem,4vw,2.75rem);
  border:1px solid rgba(7,24,39,.22);
  background:color-mix(in srgb,var(--hth-canvas) 18%,var(--hth-pearl));
}

body.hth-article-template .hth-article-notes h2,
body.hth-article-template .hth-related-reading h2{
  max-width:16ch;
  margin:.35rem 0 1.6rem;
}

.hth-article-notes dl{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:0;
  background:rgba(7,24,39,.16);
}

.hth-article-notes dl>div{
  min-width:0;
  padding:1rem 1.1rem;
  background:var(--hth-pearl);
}

.hth-article-notes dt{
  margin-bottom:.45rem;
  color:var(--re-teal-ink,#071827);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hth-article-notes dd{
  margin:0;
  color:var(--hth-charcoal);
  font-size:.92rem;
  line-height:1.6;
}

.hth-related-reading{
  padding-top:clamp(2rem,5vw,4rem);
  border-top:1px solid rgba(7,24,39,.24);
}

.hth-related-reading__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.hth-related-card{
  min-width:0;
  padding:1.25rem;
  border-top:5px solid var(--hth-lake);
  background:color-mix(in srgb,var(--hth-mist) 28%,var(--hth-pearl));
}

.hth-related-card:nth-child(2){border-color:var(--hth-gold)}
.hth-related-card:nth-child(3){border-color:var(--hth-teal)}

.hth-related-card h3{
  margin:.55rem 0 .75rem;
  color:var(--hth-navy);
  font-family:var(--hth-display);
  font-size:clamp(1.75rem,2.7vw,2.65rem)!important;
  font-weight:400;
  letter-spacing:-.01em!important;
  line-height:1!important;
  text-transform:none;
}

.hth-related-card h3 a{
  color:inherit;
  text-decoration:none;
}

.hth-related-card>p:last-child{
  margin:0;
  color:var(--hth-charcoal);
  font-size:.94rem!important;
  line-height:1.58!important;
}

body.hth-article-template .sharedaddy,
body.hth-article-template .sd-sharing-enabled{
  display:none!important;
}

@media(max-width:900px){
  .hth-related-reading__grid{
    grid-template-columns:1fr;
  }
  .hth-article-notes dl{
    grid-template-columns:1fr;
  }
}

@media(max-width:767px){
  body.hth-article-template .hth-route-hero--article{
    min-height:auto;
  }
  body.hth-article-template .hth-route-hero--article .hth-route-hero__inner{
    padding-block:7rem 2.25rem;
  }
  body.hth-article-template .hth-route-hero--article h1.wp-block-post-title{
    max-width:15ch;
    font-size:clamp(2.65rem,12vw,4.35rem)!important;
    line-height:.96!important;
  }
  body.hth-article-template .hth-route-hero--article .wp-block-post-excerpt{
    font-size:1rem!important;
  }
  .hth-article-meta{
    display:grid;
    grid-template-columns:1fr;
    gap:.42rem;
  }
  .hth-featured-credit{
    font-size:.68rem!important;
  }
  body.hth-article-template .hth-route-content{
    padding:2.75rem 0;
  }
  .hth-article-toc{
    margin-bottom:3rem;
    padding:1.05rem 1.15rem 1.15rem;
  }
  html.hth-article-js .hth-article-toc__toggle{
    display:inline-flex;
  }
  .hth-article-toc__toggle[aria-expanded="true"] svg{
    transform:rotate(180deg);
  }
  .hth-article-toc__panel[hidden]{
    display:none;
  }
  .hth-article-toc ol{
    columns:1;
    margin-top:.8rem;
  }
  body.hth-article-template .hth-route-reading h2,
  body.hth-article-template .hth-article-handoff h2,
  body.hth-article-template .hth-article-notes h2,
  body.hth-article-template .hth-related-reading h2{
    font-size:clamp(2rem,10.5vw,3.1rem)!important;
    line-height:1.02!important;
  }
  .hth-article-handoff,
  .hth-article-notes,
  .hth-related-reading{
    margin-top:3.5rem;
  }
}

/* Canonical editorial measure: readable prose inside a wide component rail. */
body.hth-article-template{
  --wp--style--global--content-size:min(72ch,100%);
  --wp--style--global--wide-size:min(72rem,100%);
}
body.hth-article-template .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width:min(72ch,100%)!important;
}
body.hth-article-template .hth-route-shell.hth-route-content__inner{
  width:min(var(--hth-shell-max,1440px),calc(100% - (2 * var(--hth-shell-gutter,clamp(1rem,4vw,3rem)))));
  max-width:var(--hth-shell-max,1440px);
}
body.hth-article-template .hth-route-reading .hth-field-modules,
body.hth-article-template .hth-route-reading .hth-editorial-prose,
body.hth-article-template .hth-route-reading .hth-species-profile{
  width:100%;
  max-width:72rem;
  margin-inline:auto;
}

.hth-knot-reference-depth{
  margin:2rem 0 0;
  border:1px solid rgba(7,24,39,.16);
  background:#F4F2EC;
}
.hth-knot-reference-depth>summary{
  display:grid;
  gap:.35rem;
  min-height:58px;
  padding:1rem 1.15rem;
  cursor:pointer;
  background:#071827;
  color:#fff;
}
.hth-knot-reference-depth>summary span{font-weight:800;letter-spacing:.04em}
.hth-knot-reference-depth>summary small{max-width:760px;color:#E3E1D9;line-height:1.45}
.hth-knot-reference-depth>summary:focus-visible{outline:3px solid #C7A257;outline-offset:3px}
.hth-knot-reference-depth__body{padding:clamp(1.1rem,3vw,2rem)}

@media print{
  /* Anyone printing an article is taking it somewhere the site cannot follow —
   * usually a boat or a bank with no signal. The one thing a paper copy cannot
   * do is stay current, so the printed version says so. Screen readers and
   * on-screen readers never see this; it exists only on paper. */
  body.hth-article-template .hth-route-reading .wp-block-post-content::after{
    content:"Printed from Hook the Horizon. Paper does not update — check the current rules, access and conditions before you go.";
    display:block;
    margin-top:2rem;
    padding-top:.75rem;
    border-top:1px solid #071827;
    font-size:9.5pt;
    font-style:italic;
  }
  body.hth-article-template .hth-route-hero--article{
    min-height:auto;
    background:#E3E1D9!important;
    color:#071827!important;
  }
  body.hth-article-template .hth-route-hero--article>.hth-route-hero__media,
  body.hth-article-template .hth-route-hero--article::before,
  body.hth-article-template .hth-route-hero--article::after,
  .hth-article-toc,
  .hth-related-reading{
    display:none!important;
  }
  body.hth-article-template .hth-route-hero--article h1.wp-block-post-title,
  body.hth-article-template .hth-route-hero--article .wp-block-post-excerpt,
  .hth-article-meta{
    color:#071827!important;
  }
  .hth-article-handoff{
    background:#E3E1D9!important;
    color:#071827!important;
    border:1px solid #071827;
  }
}
/* hook-the-horizon-field-handoff */
/* Hook the Horizon — the editorial → instrument handoff.
 *
 * Deliberately quieter than the old gold-button band. This is a marginal note
 * that happens to contain a link, not a call to action: the reader should be
 * able to read it and decline. Colours are drawn from the route-system tokens
 * with literal fallbacks so the block also renders correctly if it is used
 * outside the article template.
 */

.hth-field-handoff{
  --hthh-ink:var(--hth-navy,#071827);
  --hthh-paper:var(--hth-pearl,#E3E1D9);
  --hthh-rule:var(--hth-teal,#176F78);
  --hthh-accent:var(--hth-gold,#C7A257);
  --hthh-quiet:var(--hth-charcoal,#424546);

  box-sizing:border-box;
  margin:clamp(3rem,6vw,5rem) auto 0;
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1.4rem,3vw,2.4rem);
  border:1px solid color-mix(in srgb,var(--hthh-ink) 16%,transparent);
  border-left:4px solid var(--hthh-rule);
  background:color-mix(in srgb,var(--hth-canvas,#dcd6c4) 34%,var(--hthh-paper));
  color:var(--hthh-ink);
  font-family:var(--hth-body,Montserrat,system-ui,sans-serif);
}

.hth-field-handoff > *{
  margin:0;
}

.hth-field-handoff__eyebrow{
  color:var(--hthh-rule);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.2;
  text-transform:uppercase;
}

.hth-field-handoff__tool{
  margin-top:.35rem!important;
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.2;
}

/* The question the instrument answers, straight from the manifest. */
.hth-field-handoff__answers{
  margin-top:.3rem!important;
  max-width:60ch;
  color:var(--hthh-quiet);
  font-size:.9rem;
  font-style:italic;
  line-height:1.5;
}

/* The condition under which opening it is worth it. This is the sentence that
 * carries the placement; everything else is chrome. */
.hth-field-handoff__when{
  margin-top:.95rem!important;
  max-width:66ch;
  font-size:clamp(.98rem,1.5vw,1.06rem);
  line-height:1.62;
}

.hth-field-handoff__act{
  margin-top:1.05rem!important;
}

.hth-field-handoff__link{
  display:inline-block;
  padding-bottom:.16rem;
  border-bottom:2px solid var(--hthh-accent);
  color:var(--hthh-ink)!important;
  font-size:.95rem;
  font-weight:600;
  line-height:1.45;
  text-decoration:none;
}

.hth-field-handoff__link::after{
  content:" \2192";
  white-space:nowrap;
}

.hth-field-handoff__link:hover,
.hth-field-handoff__link:focus-visible{
  border-bottom-color:var(--hthh-rule);
  color:var(--hthh-ink)!important;
}

.hth-field-handoff__link:focus-visible{
  outline:3px solid var(--re-focus-core,#071827);
  outline-offset:3px;
}

.hth-field-handoff__fine{
  margin-top:.95rem!important;
  max-width:62ch;
  color:var(--hthh-quiet);
  font-size:.76rem;
  line-height:1.5;
}

/* Touch target floor. */
@media (max-width:781px){
  .hth-field-handoff__link{
    min-height:44px;
    padding-top:.55rem;
    padding-bottom:.5rem;
  }
}

/* Dark article surfaces (fleet-bleed interiors and the dark palettes) invert
 * the card rather than punching a light rectangle into a dark page. */
[data-theme="dark"] .hth-field-handoff,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-field-handoff{
  border-color:color-mix(in srgb,var(--hth-pearl,#E3E1D9) 22%,transparent);
  border-left-color:var(--hthh-accent);
  background:color-mix(in srgb,var(--hth-pearl,#E3E1D9) 7%,var(--hth-navy,#071827));
  color:var(--hth-pearl,#E3E1D9);
}

[data-theme="dark"] .hth-field-handoff__eyebrow,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-field-handoff__eyebrow{
  color:var(--hthh-accent);
}

[data-theme="dark"] .hth-field-handoff__answers,
[data-theme="dark"] .hth-field-handoff__fine,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-field-handoff__answers,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-field-handoff__fine{
  color:color-mix(in srgb,var(--hth-pearl,#E3E1D9) 78%,transparent);
}

[data-theme="dark"] .hth-field-handoff__link,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-field-handoff__link{
  color:var(--hth-pearl,#E3E1D9)!important;
}

[data-theme="dark"] .hth-field-handoff__link:focus-visible,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-field-handoff__link:focus-visible{
  outline-color:var(--hthh-accent);
}

/* Cold-water immersion note. Sober, high contrast, prints. It is the one block
 * on the page that should still be readable on paper. */
.hth-cold-water-note{
  box-sizing:border-box;
  margin:clamp(2.4rem,5vw,3.6rem) auto;
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,2.1rem);
  border:1px solid color-mix(in srgb,var(--hth-navy,#071827) 24%,transparent);
  border-left:5px solid var(--hth-navy,#071827);
  background:color-mix(in srgb,var(--hth-pearl,#E3E1D9) 55%,#fff);
  color:var(--hth-navy,#071827);
  font-family:var(--hth-body,Montserrat,system-ui,sans-serif);
}
.hth-cold-water-note h2{
  margin:0 0 .7rem;
  font-size:clamp(1.1rem,2.1vw,1.35rem);
  line-height:1.25;
}
.hth-cold-water-note p{
  max-width:66ch;
  margin:0 0 .85rem;
  font-size:clamp(.97rem,1.5vw,1.05rem);
  line-height:1.62;
}
.hth-cold-water-note p:last-child{margin-bottom:0}
.hth-cold-water-note__source{
  font-size:.82rem!important;
  line-height:1.5;
}
.hth-cold-water-note a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.18em;
}
.hth-cold-water-note a:focus-visible{
  outline:3px solid var(--re-focus-core,#071827);
  outline-offset:3px;
}
@media (max-width:781px){
  .hth-cold-water-note a{
    display:inline-block;
    min-height:44px;
    padding-top:.5rem;
    padding-bottom:.5rem;
  }
}
[data-theme="dark"] .hth-cold-water-note,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-cold-water-note{
  border-color:color-mix(in srgb,var(--hth-pearl,#E3E1D9) 30%,transparent);
  border-left-color:var(--hth-pearl,#E3E1D9);
  background:color-mix(in srgb,var(--hth-pearl,#E3E1D9) 9%,var(--hth-navy,#071827));
  color:var(--hth-pearl,#E3E1D9);
}
@media print{
  .hth-cold-water-note{
    border-left-width:3px;
    background:none;
  }
}

/* The "opens in a new tab" cue. Announced, never drawn. */
.hth-field-handoff .screen-reader-text{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* A link block is dead weight on paper. */
@media print{
  .hth-field-handoff{
    display:none!important;
  }
}
/* hook-the-horizon-field-modules */
/**
 * Hook the Horizon — Shared Field Modules
 * Version: 1.0.0
 *
 * PURPOSE
 *   Reusable visual modules that carry the same craft level as the species-profile
 *   gold standard into knots, field notes, long-form intelligence articles, and
 *   other non-homepage content.
 *
 *   These modules deliberately share the same visual grammar (surface hierarchy,
 *   accent borders, tracked labels, elevated cards, numbered memory blocks,
 *   boundary boxes) without forcing every content type into a species dossier layout.
 *
 * USAGE
 *   Wrap a module group in .hth-field-modules (or use individual classes directly).
 *   Enqueue this file on singular posts/pages that need the modules, or load it
 *   globally for article templates once the system is stable.
 *
 * GOVERNANCE
 *   Same ten-color Hook palette. Deep Navy + Pearl dominant. Accents never carry
 *   meaning alone.
 */

.hth-field-modules {
  --fm-navy: #071827;
  --fm-pearl: #E3E1D9;
  --fm-blue: #2E6F95;
  --fm-teal: #176F78;
  --fm-charcoal: #424546;
  --fm-green: #355133;
  --fm-coral: #D55C3E;
  --fm-gold: #C7A257;
  --fm-mist: color-mix(in srgb,#2E6F95 14%,#E3E1D9);
  --fm-canvas: color-mix(in srgb,#C7A257 18%,#E3E1D9);
}

/* ------------------------------------------------------------------
   SIGNAL GRID
   Compact 2–4 column quick facts. Use after a lede or inside a dark opener.
   ------------------------------------------------------------------ */
.hth-fm-signal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem;
  margin: 1.25rem 0;
}

.hth-fm-signal > div {
  min-height: 5.5rem;
  padding: 0.8rem;
  border-top: 2px solid var(--fm-gold);
  background: rgba(7, 24, 39, 0.04);
}

.hth-fm-signal b {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--fm-gold);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hth-fm-signal span {
  color: var(--fm-charcoal);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Dark-surface variant (inside a navy section) */
[data-surface="dark"] .hth-fm-signal > div,
.hth-fm-signal--dark > div {
  background: rgba(227,225,217, 0.06);
}

[data-surface="dark"] .hth-fm-signal span,
.hth-fm-signal--dark span {
  color: #E3E1D9;
}

/* ------------------------------------------------------------------
   ELEVATED CARDS
   ------------------------------------------------------------------ */
.hth-fm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.7rem;
  margin: 1rem 0;
}

.hth-fm-card {
  position: relative;
  overflow: visible;
  min-height: 0;
  height: auto;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(7, 24, 39, 0.13);
  background: linear-gradient(145deg, #E3E1D9, #E3E1D9);
  box-shadow: 0 8px 22px rgba(7, 24, 39, 0.055);
}

.hth-fm-card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-top: 3px solid var(--fm-blue);
}

.hth-fm-card:nth-child(2):before { border-color: var(--fm-teal); }
.hth-fm-card:nth-child(3):before { border-color: var(--fm-gold); }
.hth-fm-card:nth-child(4):before { border-color: var(--fm-coral); }
.hth-fm-card:nth-child(5):before { border-color: var(--fm-green); }

.hth-fm-card h3 {
  margin: 0.15rem 0 0.4rem;
  color: var(--fm-navy);
  font-size: 1rem;
  line-height: 1.2;
}

.hth-fm-card p {
  margin: 0;
  color: var(--fm-charcoal);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: no-preference) {
  .hth-fm-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .hth-fm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(7, 24, 39, 0.1);
  }
}

/* ------------------------------------------------------------------
   LEFT-BORDER BAND (2-column comparison / tactics / steps)
   ------------------------------------------------------------------ */
.hth-fm-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
  margin: 1rem 0;
}

.hth-fm-band > * {
  padding: 1rem 1.05rem;
  border-left: 3px solid var(--fm-blue);
  background: rgba(46, 111, 149, 0.06);
}

.hth-fm-band > *:nth-child(2) {
  border-left-color: var(--fm-gold);
  background: rgba(199, 162, 87, 0.075);
}

.hth-fm-band > *:nth-child(3) {
  border-left-color: var(--fm-teal);
  background: rgba(23, 111, 120, 0.07);
}

.hth-fm-band h3 {
  margin: 0.1rem 0 0.4rem;
  color: var(--fm-navy);
}

.hth-fm-band p {
  margin: 0.3rem 0;
  color: var(--fm-charcoal);
  line-height: 1.58;
}

/* ------------------------------------------------------------------
   CALLOUT / SCIENCE / NOTE
   ------------------------------------------------------------------ */
.hth-fm-callout {
  margin: 1.25rem 0;
  padding: 1.15rem 1.25rem 1.15rem 1.5rem;
  border-left: 4px solid var(--fm-coral);
  background: linear-gradient(100deg, rgba(213, 92, 62, 0.08), rgba(227, 225, 217, 0.3));
}

.hth-fm-callout--teal {
  border-left-color: var(--fm-teal);
  background: linear-gradient(100deg, rgba(23, 111, 120, 0.08), rgba(227, 225, 217, 0.3));
}

.hth-fm-callout--gold {
  border-left-color: var(--fm-gold);
  background: linear-gradient(100deg, rgba(199, 162, 87, 0.1), rgba(227, 225, 217, 0.3));
}

.hth-fm-callout__label {
  margin: 0 0 0.35rem;
  color: var(--fm-coral);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hth-fm-callout--teal .hth-fm-callout__label { color: var(--fm-teal); }
.hth-fm-callout--gold .hth-fm-callout__label { color: var(--fm-gold); }

.hth-fm-callout p {
  margin: 0.35rem 0;
  color: var(--fm-charcoal);
  line-height: 1.62;
}

/* ------------------------------------------------------------------
   NUMBERED MEMORY BLOCKS
   ------------------------------------------------------------------ */
.hth-fm-remember {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin: 1.25rem 0;
  counter-reset: remember;
}

.hth-fm-remember > div {
  counter-increment: remember;
  position: relative;
  padding: 1rem 1rem 1rem 3.2rem;
  background: var(--fm-navy);
  color: var(--fm-pearl);
}

.hth-fm-remember > div:before {
  content: counter(remember);
  position: absolute;
  left: 1rem;
  top: 0.9rem;
  color: var(--fm-gold);
  font-family: var(--wp--preset--font-family--display, "Bebas Neue", sans-serif);
  font-size: 1.7rem;
  line-height: 1;
}

.hth-fm-remember p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------
   BOUNDARY / STOP / REGULATION
   ------------------------------------------------------------------ */
.hth-fm-boundary {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(213, 92, 62, 0.24);
  background: rgba(213, 92, 62, 0.06);
}

.hth-fm-boundary strong {
  color: var(--fm-coral);
}

.hth-fm-boundary p {
  margin: 0.35rem 0;
  color: var(--fm-charcoal);
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   RELATED / DEEPER GUIDE
   ------------------------------------------------------------------ */
.hth-fm-related {
  margin: 1.25rem 0;
  padding: 1.05rem;
  border: 1px solid rgba(23, 111, 120, 0.2);
  background: rgba(23, 111, 120, 0.06);
}

.hth-fm-related a {
  font-weight: 800;
  color: var(--fm-teal);
}

/* ------------------------------------------------------------------
   KICKER / EYEBROW
   ------------------------------------------------------------------ */
.hth-fm-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fm-gold);
}

.hth-fm-kicker span {
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(199, 162, 87, 0.45);
  background: rgba(199, 162, 87, 0.08);
}

/* ------------------------------------------------------------------
   UTILITY LABEL
   ------------------------------------------------------------------ */
.hth-fm-label {
  margin: 0 0 0.35rem;
  color: var(--fm-teal);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* hook-the-horizon-editorial-layouts */
/* Hook the Horizon field canvas. The homepage is intentionally excluded. */
body:not(.home):not(.front-page) {
  --hth-reading: 46rem;
  --hth-intelligence: min(78rem, calc(100vw - 3rem));
  --hth-structural: min(96rem, calc(100vw - 2rem));
  --hth-gutter: clamp(1rem, 3vw, 2.5rem);
  --hth-section: clamp(3.5rem, 8vw, 8rem);
  --hth-navy: #071827;
  --hth-pearl: #e3e1d9;
  --hth-blue: #2e6f95;
  --hth-teal: #176f78;
  --hth-coral: #d55c3e;
  --hth-gold: #c7a257;
  --hth-mist: color-mix(in srgb,#2E6F95 14%,#E3E1D9);
  --hth-canvas: color-mix(in srgb,#C7A257 18%,#E3E1D9);
}

body:not(.home):not(.front-page) .entry-content,
body:not(.home):not(.front-page) .wp-block-post-content,
body:not(.home):not(.front-page) .hth-field-canvas {
  overflow: clip;
}

body:not(.home):not(.front-page) .entry-content > :where(:not(.alignwide):not(.alignfull):not(.hth-breakout)),
body:not(.home):not(.front-page) .wp-block-post-content > :where(:not(.alignwide):not(.alignfull):not(.hth-breakout)) {
  width: min(var(--hth-reading), calc(100% - 2rem));
  margin-inline: auto;
}

body:not(.home):not(.front-page) .entry-content > .alignwide,
body:not(.home):not(.front-page) .wp-block-post-content > .alignwide,
body:not(.home):not(.front-page) .hth-field-canvas > .alignwide {
  width: var(--hth-intelligence);
  max-width: none;
  margin-inline: auto;
}

body:not(.home):not(.front-page) .entry-content > .alignfull,
body:not(.home):not(.front-page) .wp-block-post-content > .alignfull,
body:not(.home):not(.front-page) .hth-field-canvas > .alignfull {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

body:not(.home):not(.front-page) .hth-breakout {
  width: min(58rem, calc(100% - 2rem));
  margin-inline: auto;
  transform: translateX(clamp(0rem, 4vw, 5rem));
}

body:not(.home):not(.front-page) .hth-field-canvas,
body:not(.home):not(.front-page) .hth-archetype-canvas {
  background: var(--hth-navy);
  color: var(--hth-pearl);
}

body:not(.home):not(.front-page) .hth-field-label {
  margin: 0 0 .8rem;
  color: var(--hth-teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body:not(.home):not(.front-page) .hth-density-open-water {
  padding-block: clamp(5rem, 12vw, 10rem);
}

body:not(.home):not(.front-page) .hth-density-field-active {
  padding-block: clamp(3rem, 7vw, 6rem);
}

body:not(.home):not(.front-page) .hth-density-intelligence-dense {
  padding: clamp(2rem, 5vw, 4rem);
}

body:not(.home):not(.front-page) .hth-horizon-hero {
  position: relative;
  isolation: isolate;
  color: var(--hth-pearl);
}

body:not(.home):not(.front-page) .hth-horizon-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 50% 120%, transparent 0 20px, rgba(46,111,149,.18) 21px 22px, transparent 23px 38px),
    linear-gradient(to top, rgba(7,24,39,.78), transparent);
}

body:not(.home):not(.front-page) .hth-horizon-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: min(var(--hth-structural), calc(100% - 2rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hth-gutter);
  align-items: end;
}

body:not(.home):not(.front-page) .hth-horizon-hero .hth-field-label,
body:not(.home):not(.front-page) .hth-horizon-hero h1,
body:not(.home):not(.front-page) .hth-horizon-hero .hth-hero-premise {
  grid-column: 2 / span 8;
}

body:not(.home):not(.front-page) .hth-horizon-hero h1 {
  margin: 0;
  color: var(--hth-pearl);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}

body:not(.home):not(.front-page) .hth-hero-premise {
  max-width: 44rem;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.45;
}

body:not(.home):not(.front-page) .hth-field-brief,
body:not(.home):not(.front-page) .hth-species-intelligence,
body:not(.home):not(.front-page) .hth-structure-reading,
body:not(.home):not(.front-page) .hth-gear-system,
body:not(.home):not(.front-page) .hth-decision-point,
body:not(.home):not(.front-page) .hth-source-trust-block {
  border-top: 1px solid rgba(7,24,39,.16);
}

body:not(.home):not(.front-page) .hth-field-brief > h2,
body:not(.home):not(.front-page) .hth-structure-reading > h2,
body:not(.home):not(.front-page) .hth-gear-system > h2 {
  max-width: 16ch;
  font-size: clamp(1.9rem, 3.3vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -.016em;
}

body:not(.home):not(.front-page) .hth-field-rule,
body:not(.home):not(.front-page) .hth-privacy-note {
  padding: 1rem 1.25rem;
  border-left: .25rem solid var(--hth-coral);
  background: rgba(213,92,62,.08);
}

body:not(.home):not(.front-page) :where(.hth-data-grid,.hth-condition-grid,.hth-pattern-grid,.hth-readiness-grid,.hth-ledger-row) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: rgba(227,225,217,.22);
  border: 1px solid rgba(227,225,217,.22);
}

body:not(.home):not(.front-page) :where(.hth-data-grid,.hth-condition-grid,.hth-pattern-grid,.hth-readiness-grid,.hth-ledger-row) > * {
  grid-column: span 4;
  margin: 0;
  padding: 1.2rem;
  background: rgba(7,24,39,.96);
  color: var(--hth-pearl);
}

body:not(.home):not(.front-page) .hth-waterbody-profile,
body:not(.home):not(.front-page) .hth-pattern-breakdown,
body:not(.home):not(.front-page) .hth-trip-readiness,
body:not(.home):not(.front-page) .hth-catch-ledger {
  background: var(--hth-navy);
  color: var(--hth-pearl);
}

body:not(.home):not(.front-page) :where(.hth-waterbody-profile,.hth-pattern-breakdown,.hth-trip-readiness,.hth-catch-ledger) h2 {
  color: var(--hth-pearl);
}

body:not(.home):not(.front-page) .hth-conditions-board {
  background:
    linear-gradient(115deg, rgba(7,24,39,.98), rgba(46,111,149,.92)),
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(46,111,149,.1) 26px 27px);
  color: var(--hth-pearl);
  padding-inline: max(var(--hth-gutter), calc((100vw - 78rem) / 2));
}

body:not(.home):not(.front-page) .hth-conditions-board h2 {
  color: var(--hth-pearl);
  max-width: 12ch;
}

body:not(.home):not(.front-page) .hth-source-line,
body:not(.home):not(.front-page) .hth-readiness-status {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(227,225,217,.35);
  font-size: .9rem;
}

body:not(.home):not(.front-page) .hth-map-access {
  background: #071827;
  color: var(--hth-pearl);
  padding-inline: max(var(--hth-gutter), calc((100vw - 96rem) / 2));
}

body:not(.home):not(.front-page) .hth-map-stage {
  min-height: clamp(24rem, 55vw, 42rem);
  display: grid;
  place-items: center;
  border: 1px solid rgba(46,111,149,.4);
  background:
    radial-gradient(circle at 30% 30%, rgba(46,111,149,.35), transparent 34%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 30px, rgba(46,111,149,.22) 31px 32px, transparent 33px 48px),
    linear-gradient(135deg, #071827, #071827);
}

body:not(.home):not(.front-page) .hth-map-stage p {
  max-width: 28rem;
  padding: 1.25rem;
  background: rgba(7,24,39,.82);
}

body:not(.home):not(.front-page) .hth-technique-sequence {
  background: #071827;
  color: var(--hth-pearl);
  padding-inline: max(var(--hth-gutter), calc((100vw - 78rem) / 2));
}

body:not(.home):not(.front-page) .hth-technique-sequence h2 {
  color: var(--hth-pearl);
}

body:not(.home):not(.front-page) .hth-sequence-rail,
body:not(.home):not(.front-page) .hth-gear-chain {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .5rem;
}

body:not(.home):not(.front-page) :where(.hth-sequence-rail,.hth-gear-chain) > * {
  scroll-snap-align: start;
  margin: 0;
  min-height: 10rem;
  padding: 1.25rem;
  background: rgba(227,225,217,.08);
  border-top: .2rem solid var(--hth-gold);
}

body:not(.home):not(.front-page) .hth-field-adjustment,
body:not(.home):not(.front-page) .hth-field-note {
  margin-block: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #E3E1D9;
  border-left: .35rem solid var(--hth-coral);
  box-shadow: 0 1.5rem 4rem rgba(7,24,39,.08);
}

body:not(.home):not(.front-page) .hth-decision-point {
  background: linear-gradient(135deg, rgba(46,111,149,.2), transparent);
}

body:not(.home):not(.front-page) .hth-source-trust,
body:not(.home):not(.front-page) .hth-source-trust-block {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(7,24,39,.15);
  border: 1px solid rgba(7,24,39,.15);
}

body:not(.home):not(.front-page) .hth-source-trust > *,
body:not(.home):not(.front-page) .hth-source-trust-block > * {
  min-width: 0;
  padding: 1rem;
  background: var(--hth-pearl);
}

body:not(.home):not(.front-page) .hth-source-trust span,
body:not(.home):not(.front-page) .hth-page-intelligence__grid span,
body:not(.home):not(.front-page) .hth-final-field-read > span {
  display: block;
  margin-bottom: .3rem;
  color: var(--hth-teal);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body:not(.home):not(.front-page) .hth-page-intelligence {
  width: var(--hth-intelligence);
  margin: 0 auto clamp(2.5rem, 6vw, 5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: color-mix(in srgb,#2E6F95 14%,#E3E1D9);
  border-top: .35rem solid var(--hth-teal);
}

body:not(.home):not(.front-page) .hth-page-intelligence__label {
  margin: 0 0 .8rem;
  color: var(--hth-teal);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body:not(.home):not(.front-page) .hth-page-intelligence__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

body:not(.home):not(.front-page) .hth-page-intelligence__context {
  max-width: var(--hth-reading);
  margin: 1.5rem 0;
  font-size: 1.05rem;
}

body:not(.home):not(.front-page) .hth-final-field-read {
  background: var(--hth-navy);
  color: var(--hth-pearl);
  padding-inline: max(var(--hth-gutter), calc((100vw - 78rem) / 2));
}

body:not(.home):not(.front-page) .hth-final-field-read h2,
body:not(.home):not(.front-page) .hth-final-field-read p {
  max-width: 58rem;
  color: var(--hth-pearl);
}

body:not(.home):not(.front-page) .hth-final-field-read h2 {
  font-size: clamp(1.9rem, 3.3vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -.016em;
}

body:not(.home):not(.front-page) .wp-block-columns.alignwide {
  gap: clamp(1.5rem, 4vw, 4rem);
}

body:not(.home):not(.front-page) .archive-grid,
body:not(.home):not(.front-page) .wp-block-query .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

body:not(.home):not(.front-page) .archive-grid > *,
body:not(.home):not(.front-page) .wp-block-query .wp-block-post-template > * {
  grid-column: span 6;
}

body:not(.home):not(.front-page) .archive-grid > :nth-child(5n + 1),
body:not(.home):not(.front-page) .wp-block-query .wp-block-post-template > :nth-child(5n + 1) {
  grid-column: span 8;
}

body:not(.home):not(.front-page) .archive-grid > :nth-child(5n + 2),
body:not(.home):not(.front-page) .wp-block-query .wp-block-post-template > :nth-child(5n + 2) {
  grid-column: span 4;
}

@media (prefers-reduced-motion: no-preference) {
  body:not(.home):not(.front-page) .hth-horizon-hero .wp-block-cover__image-background {
    transform: scale(1.03);
    animation: hth-water-breathe 18s ease-in-out infinite alternate;
  }
  body:not(.home):not(.front-page) .hth-horizon-hero::after {
    animation: hth-horizon-shift 14s linear infinite;
  }
}

@keyframes hth-water-breathe {
  from { transform: scale(1.03) translate3d(0,0,0); }
  to { transform: scale(1.07) translate3d(0,-1%,0); }
}

@keyframes hth-horizon-shift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 40px 0, 0 0; }
}

@media (max-width: 782px) {
  body:not(.home):not(.front-page) {
    --hth-intelligence: calc(100vw - 1.25rem);
    --hth-structural: calc(100vw - 1rem);
  }

  body:not(.home):not(.front-page) .hth-breakout {
    width: calc(100% - 1.25rem);
    transform: none;
  }

  body:not(.home):not(.front-page) .hth-horizon-hero {
    min-height: 68vh !important;
  }

  body:not(.home):not(.front-page) .hth-horizon-hero .wp-block-cover__inner-container {
    display: block;
  }

  body:not(.home):not(.front-page) .hth-horizon-hero h1 {
    font-size: clamp(2.25rem, 9vw, 3.35rem);
  line-height: 1.08;
  }

  body:not(.home):not(.front-page) .hth-page-intelligence {
    position: relative;
    margin-bottom: 1rem;
  }

  body:not(.home):not(.front-page) .hth-page-intelligence__grid,
  body:not(.home):not(.front-page) .hth-source-trust,
  body:not(.home):not(.front-page) .hth-source-trust-block {
    grid-template-columns: 1fr 1fr;
  }

  body:not(.home):not(.front-page) :where(.hth-data-grid,.hth-condition-grid,.hth-pattern-grid,.hth-readiness-grid,.hth-ledger-row) > * {
    grid-column: 1 / -1;
  }

  body:not(.home):not(.front-page) .hth-map-access .wp-block-columns,
  body:not(.home):not(.front-page) .hth-field-brief .wp-block-columns,
  body:not(.home):not(.front-page) .hth-species-intelligence .wp-block-columns,
  body:not(.home):not(.front-page) .hth-structure-reading .wp-block-columns,
  body:not(.home):not(.front-page) .hth-decision-point .wp-block-columns {
    display: flex;
    flex-direction: column;
  }

  body:not(.home):not(.front-page) .hth-map-access .wp-block-column:nth-child(2),
  body:not(.home):not(.front-page) .hth-field-brief .wp-block-column:nth-child(2) {
    order: -1;
  }

  body:not(.home):not(.front-page) .archive-grid > *,
  body:not(.home):not(.front-page) .wp-block-query .wp-block-post-template > *,
  body:not(.home):not(.front-page) .archive-grid > :nth-child(5n + 1),
  body:not(.home):not(.front-page) .archive-grid > :nth-child(5n + 2),
  body:not(.home):not(.front-page) .wp-block-query .wp-block-post-template > :nth-child(5n + 1),
  body:not(.home):not(.front-page) .wp-block-query .wp-block-post-template > :nth-child(5n + 2) {
    grid-column: 1 / -1;
  }
}

@media print {
  body:not(.home):not(.front-page) .hth-horizon-hero,
  body:not(.home):not(.front-page) .hth-conditions-board,
  body:not(.home):not(.front-page) .hth-map-access,
  body:not(.home):not(.front-page) .hth-technique-sequence,
  body:not(.home):not(.front-page) .hth-final-field-read {
    background: #E3E1D9 !important;
    color: #071827 !important;
  }

  body:not(.home):not(.front-page) .hth-horizon-hero h1,
  body:not(.home):not(.front-page) .hth-conditions-board h2,
  body:not(.home):not(.front-page) .hth-technique-sequence h2,
  body:not(.home):not(.front-page) .hth-final-field-read h2,
  body:not(.home):not(.front-page) .hth-final-field-read p {
    color: #071827 !important;
  }

  body:not(.home):not(.front-page) .hth-source-trust,
  body:not(.home):not(.front-page) .hth-page-intelligence {
    break-inside: avoid;
  }
}
/* hook-the-horizon-editorial-prose */
/**
 * Hook the Horizon — Editorial Prose System v1
 * Gold-standard visual grammar for plain posts/pages.
 * Homepage excluded via body class gates.
 */

body.hth-editorial-system,
body.hth-article-template:not(.home):not(.front-page) {
  --ev-navy: #071827;
  --ev-pearl: #E3E1D9;
  --ev-blue: #2E6F95;
  --ev-teal: #176F78;
  --ev-charcoal: #424546;
  --ev-green: #355133;
  --ev-coral: #D55C3E;
  --ev-gold: #C7A257;
  --ev-mist: color-mix(in srgb,#2E6F95 14%,#E3E1D9);
  --ev-canvas: color-mix(in srgb,#C7A257 18%,#E3E1D9);
  --ev-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --ev-body: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Parent column is 80vw via style.css; children fill it. */
  --ev-measure: 100%;
  --ev-elev-low: 0 8px 22px rgba(7, 24, 39, 0.055);
}

body.hth-editorial-page .hth-route-main,
body.hth-editorial-page .hth-shell {
  background: var(--ev-navy);
  color: var(--ev-pearl);
}

.hth-editorial-prose {
  font-family: var(--ev-body);
  color: var(--ev-pearl);
}

.hth-editorial-prose > * {
  width: var(--ev-measure);
  max-width: var(--ev-measure) !important;
  margin-inline: auto;
}

.hth-editorial-prose > .hth-editorial-tactics,
.hth-editorial-prose > .hth-editorial-table,
.hth-editorial-prose > .wp-block-columns,
.hth-editorial-prose > .alignwide,
.hth-editorial-prose > .alignfull {
  width: min(100%, 80vw);
  max-width: min(100%, 80vw) !important;
}

/* Lede */
.hth-editorial-prose > p.hth-editorial-lede:nth-of-type(1) {
  max-width: var(--ev-measure) !important;
  margin: 0 auto 1.1rem;
  color: var(--ev-pearl);
  font-size: clamp(1.08rem, 1.35vw, 1.22rem);
  font-weight: 500;
  line-height: 1.68;
}

.hth-editorial-prose > p.hth-editorial-lede:nth-of-type(2) {
  max-width: var(--ev-measure) !important;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  color: var(--ev-pearl);
  font-size: clamp(1.02rem, 1.15vw, 1.12rem);
  line-height: 1.72;
}

/* Section display headers */
body.hth-editorial-system .hth-editorial-prose > h2.hth-editorial-section,
body.hth-article-template .hth-route-reading .wp-block-post-content > h2 {
  max-width: 18ch;
  margin: clamp(2.75rem, 5.5vw, 4.5rem) auto 1rem;
  color: var(--ev-pearl);
  font-family: var(--ev-display);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem) !important;
  font-weight: 400;
  letter-spacing: 0.02em !important;
  line-height: 0.95 !important;
  text-transform: uppercase;
  text-wrap: balance;
}

body.hth-editorial-system .hth-editorial-prose > h2.hth-editorial-sources-head {
  max-width: 22ch;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  color: var(--ev-charcoal);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
  letter-spacing: 0.08em !important;
  opacity: 0.88;
}

.hth-editorial-prose > h3.hth-editorial-subhead {
  max-width: var(--ev-measure) !important;
  margin: 1.75rem auto 0.55rem;
  color: var(--ev-navy);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
  font-weight: 700;
  line-height: 1.25 !important;
}

.hth-editorial-prose > p:not(.hth-editorial-lede):not(.hth-editorial-callout) {
  max-width: var(--ev-measure) !important;
  margin: 0 auto 1.05rem;
  color: var(--ev-charcoal);
  font-size: clamp(1.02rem, 0.98rem + 0.14vw, 1.12rem);
  line-height: 1.78;
}

.hth-editorial-prose a {
  color: var(--ev-navy);
  text-decoration-color: color-mix(in srgb, var(--ev-teal) 55%, transparent);
  text-underline-offset: 0.18em;
}

.hth-editorial-prose a:hover {
  color: var(--ev-teal);
}

.hth-editorial-prose a:focus-visible {
  outline: 3px solid var(--ev-gold);
  outline-offset: 3px;
}

/* Tactics lists */
.hth-editorial-prose > ul.hth-editorial-tactics,
.hth-editorial-prose > ol.hth-editorial-tactics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0.7rem;
  margin: 1.25rem auto 1.6rem;
  padding: 0;
  list-style: none;
  counter-reset: tactics;
}

.hth-editorial-prose > ul.hth-editorial-tactics > li,
.hth-editorial-prose > ol.hth-editorial-tactics > li {
  position: relative;
  margin: 0;
  padding: 1rem 1.05rem 1rem 1.15rem;
  border-left: 3px solid var(--ev-blue);
  background: rgba(46, 111, 149, 0.06);
  color: var(--ev-charcoal);
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
  list-style: none;
}

.hth-editorial-prose > ul.hth-editorial-tactics > li:nth-child(2),
.hth-editorial-prose > ol.hth-editorial-tactics > li:nth-child(2) {
  border-left-color: var(--ev-gold);
  background: rgba(199, 162, 87, 0.075);
}

.hth-editorial-prose > ul.hth-editorial-tactics > li:nth-child(3),
.hth-editorial-prose > ol.hth-editorial-tactics > li:nth-child(3) {
  border-left-color: var(--ev-teal);
  background: rgba(23, 111, 120, 0.07);
}

.hth-editorial-prose > ul.hth-editorial-tactics > li:nth-child(4),
.hth-editorial-prose > ol.hth-editorial-tactics > li:nth-child(4) {
  border-left-color: var(--ev-coral);
  background: rgba(213, 92, 62, 0.06);
}

.hth-editorial-prose > ul.hth-editorial-tactics > li:nth-child(5),
.hth-editorial-prose > ol.hth-editorial-tactics > li:nth-child(5) {
  border-left-color: var(--ev-green);
  background: rgba(53, 81, 51, 0.07);
}

.hth-editorial-prose > ol.hth-editorial-tactics > li {
  counter-increment: tactics;
  padding-left: 3rem;
}

.hth-editorial-prose > ol.hth-editorial-tactics > li::before {
  content: counter(tactics);
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  color: var(--ev-gold);
  font-family: var(--ev-display);
  font-size: 1.55rem;
  line-height: 1;
}

/* Pull quotes */
.hth-editorial-prose blockquote.hth-editorial-pullquote {
  position: relative;
  max-width: min(100%, 80vw) !important;
  margin: 1.75rem auto;
  padding: 1.35rem 1.35rem 1.35rem 1.6rem;
  border: 0;
  border-left: 4px solid var(--ev-gold);
  background: linear-gradient(125deg, rgba(7, 24, 39, 0.94), rgba(23, 111, 120, 0.88));
  color: var(--ev-pearl);
  box-shadow: var(--ev-elev-low);
}

.hth-editorial-prose blockquote.hth-editorial-pullquote::before {
  content: "\201C";
  position: absolute;
  top: 0.15rem;
  left: 0.55rem;
  color: var(--ev-gold);
  font-family: var(--ev-display);
  font-size: 3.2rem;
  line-height: 1;
  opacity: 0.85;
}

.hth-editorial-prose blockquote.hth-editorial-pullquote p {
  margin: 0;
  color: rgba(227, 225, 217, 0.94);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  font-style: italic;
  line-height: 1.55 !important;
}

/* Callouts */
.hth-editorial-prose > p.hth-editorial-callout {
  max-width: min(100%, 80vw) !important;
  margin: 1.35rem auto;
  padding: 1.1rem 1.2rem 1.1rem 1.4rem;
  border-left: 4px solid var(--ev-teal);
  background: linear-gradient(100deg, rgba(23, 111, 120, 0.09), rgba(227, 225, 217, 0.35));
  color: var(--ev-charcoal);
  font-size: 0.98rem !important;
  line-height: 1.62 !important;
}

.hth-editorial-prose > p.hth-editorial-callout--science {
  border-left-color: var(--ev-coral);
  background: linear-gradient(100deg, rgba(213, 92, 62, 0.08), rgba(227, 225, 217, 0.3));
}

.hth-editorial-prose > p.hth-editorial-callout--boundary {
  border: 1px solid rgba(213, 92, 62, 0.24);
  border-left: 4px solid var(--ev-coral);
  background: rgba(213, 92, 62, 0.06);
}

/* Tables */
.hth-editorial-prose table.hth-editorial-table,
.hth-editorial-prose .wp-block-table table {
  width: 100%;
  margin: 1.35rem 0;
  border-collapse: collapse;
  background: linear-gradient(145deg, #E3E1D9, #E3E1D9);
  box-shadow: var(--ev-elev-low);
}

.hth-editorial-prose table.hth-editorial-table th,
.hth-editorial-prose .wp-block-table th {
  padding: 0.75rem 0.9rem;
  border-bottom: 2px solid var(--ev-gold);
  color: var(--ev-navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}

.hth-editorial-prose table.hth-editorial-table td,
.hth-editorial-prose .wp-block-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(7, 24, 39, 0.1);
  color: var(--ev-charcoal);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Sources quiet close */
.hth-editorial-prose .hth-editorial-sources {
  max-width: var(--ev-measure) !important;
  margin-inline: auto;
  color: color-mix(in srgb, var(--ev-charcoal) 82%, var(--ev-pearl));
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}

.hth-editorial-prose > ul.hth-editorial-sources,
.hth-editorial-prose > ol.hth-editorial-sources {
  display: block;
  padding-left: 1.15rem;
  border: 0;
  background: transparent;
  list-style: disc;
}

.hth-editorial-prose > ul.hth-editorial-sources > li,
.hth-editorial-prose > ol.hth-editorial-sources > li {
  margin: 0.35rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.88rem !important;
}

.hth-editorial-prose figcaption,
.hth-editorial-prose .wp-element-caption {
  margin-top: 0.55rem;
  color: color-mix(in srgb, var(--ev-charcoal) 78%, var(--ev-pearl));
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.45 !important;
}

.hth-editorial-prose hr,
.hth-editorial-prose .wp-block-separator {
  width: min(12rem, 40%);
  max-width: none;
  margin: 2.25rem auto;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ev-gold) 55%, transparent);
  background: none;
}

/* Page hero parity */
body.hth-editorial-page .hth-route-hero--article {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(28rem, 62vh, 44rem);
  overflow: hidden;
  background: var(--ev-navy);
  color: var(--ev-pearl);
}

body.hth-editorial-page .hth-route-hero--article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  background:
    radial-gradient(ellipse at 105% 2%, transparent 0 18%, rgba(46,111,149, 0.28) 18.5% 19%, transparent 19.5% 28%, rgba(199, 162, 87, 0.16) 28.5% 29%, transparent 29.5% 39%),
    repeating-linear-gradient(170deg, transparent 0 27px, rgba(227,225,217, 0.025) 28px, transparent 30px);
}

body.hth-editorial-page .hth-route-hero--article::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 24, 39, 0.18), rgba(7, 24, 39, 0.78) 70%, rgba(7, 24, 39, 0.98)),
    linear-gradient(90deg, rgba(7, 24, 39, 0.72) 0%, rgba(7, 24, 39, 0.16) 60%, transparent 100%);
}

body.hth-editorial-page .hth-route-hero__inner {
  position: relative;
  z-index: 2;
}

body.hth-editorial-page .hth-route-hero--article h1.wp-block-post-title {
  max-width: 14ch;
  margin: 0.2rem 0 0;
  color: var(--ev-pearl);
  font-family: var(--ev-display);
  font-size: clamp(3rem, 6.5vw, 6.2rem) !important;
  font-weight: 400;
  letter-spacing: 0.015em !important;
  line-height: 0.9 !important;
  text-transform: uppercase;
  text-wrap: balance;
}

body.hth-editorial-page .hth-route-eyebrow {
  margin: 0;
  color: var(--ev-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.hth-editorial-system .hth-warning,
body.hth-article-template .hth-warning {
  width: min(100%, 80vw);
  max-width: min(100%, 80vw) !important;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(213, 92, 62, 0.24);
  background: rgba(213, 92, 62, 0.06);
  color: var(--ev-charcoal);
}

body.hth-editorial-system .hth-warning p {
  margin: 0;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .hth-editorial-prose > ul.hth-editorial-tactics > li,
  .hth-editorial-prose > ol.hth-editorial-tactics > li {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .hth-editorial-prose > ul.hth-editorial-tactics > li:hover,
  .hth-editorial-prose > ol.hth-editorial-tactics > li:hover {
    transform: translateY(-2px);
    box-shadow: var(--ev-elev-low);
  }
}

@media (max-width: 720px) {
  .hth-editorial-prose > ul.hth-editorial-tactics,
  .hth-editorial-prose > ol.hth-editorial-tactics {
    grid-template-columns: 1fr;
  }

  body.hth-editorial-page .hth-route-hero--article {
    min-height: clamp(22rem, 70vh, 34rem);
  }

  body.hth-editorial-page .hth-route-hero--article h1.wp-block-post-title {
    max-width: 11ch;
    font-size: clamp(2.6rem, 12vw, 3.6rem) !important;
  }
}

/* Canonical editorial measure — SINGLE SOURCE OF TRUTH for reading width.
 * hook-route-system.css owns the shell (88% bleed); this file owns the measure
 * inside it. Prose is held at 76ch so it stays readable without looking like a
 * thin ribbon in the widened rail; components fill the rail. Do not reintroduce
 * a competing measure in style.css, article-template.css or mobile-responsive.css. */
body.hth-editorial-system,
body.hth-article-template:not(.home):not(.front-page) {
  --wp--style--global--content-size: min(76ch, 100%);
  --wp--style--global--wide-size: 100%;
}

body.hth-editorial-system .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.hth-article-template:not(.home):not(.front-page) .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: min(76ch, 100%) !important;
}

body.hth-editorial-system .hth-route-reading .wp-block-post-content > :where(p,ul,ol,blockquote,h2,h3,h4,h5,h6),
body.hth-editorial-system .hth-editorial-prose > :where(p,ul,ol,blockquote,h2,h3,h4,h5,h6) {
  width:100%;
  max-width: min(76ch, 100%) !important;
  margin-inline:auto;
}

/* Visual and editorial modules take the full widened rail. Cards, tables,
 * grids and figures reading edge-to-edge against a held prose measure is what
 * stops the page from presenting as one flat column. */
body.hth-editorial-system .hth-route-reading .wp-block-post-content > :where(section,figure,.wp-block-table,.wp-block-columns,.wp-block-group,.alignwide),
body.hth-editorial-system .hth-editorial-prose > :where(section,figure,.wp-block-table,.wp-block-columns,.wp-block-group,.alignwide) {
  width:100%;
  max-width:100% !important;
  margin-inline:auto;
}

/* Button rows inside prose. Some stored content carries .wp-block-buttons
   without the is-layout-flex classes the block editor normally adds, so the
   container gets no flex/gap and adjacent buttons can crowd or collide
   (seen on /research-and-standards/). Give every prose button row the same
   layout the editor would have generated. Wrapping keeps pairs usable on
   narrow phones instead of forcing a side-by-side squeeze. */
.hth-editorial-prose .wp-block-buttons,
.hth-route-reading .wp-block-post-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  max-width: min(72ch, 100%);
  margin-inline: auto;
}

.hth-editorial-prose .wp-block-buttons .wp-block-button,
.hth-route-reading .wp-block-post-content .wp-block-buttons .wp-block-button {
  margin: 0;
  position: static;
  float: none;
}
/* hook-the-horizon-editorial-visual-program */
/* Hook the Horizon — Editorial Visual Program */
.hth-editorial-plate,
.hth-read-next,
.hth-five-routes {
  --hth-plate-navy:#071827;
  --hth-plate-ink:#071827;
  --hth-plate-paper:#E3E1D9;
  --hth-plate-gold:#c7a257;
  --hth-plate-teal:#176f78;
  --hth-plate-blue:#2e6f95;
  --hth-plate-coral:#d55c3e;
  width:min(72rem,100%);
  max-width:min(72rem,100%)!important;
  margin:clamp(2rem,5vw,3.5rem) auto;
}

.hth-editorial-plate {
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--hth-plate-gold) 28%,transparent);
  border-radius:16px;
  background:var(--hth-plate-navy);
  box-shadow:0 18px 42px rgba(7,24,39,.12);
}

.hth-editorial-plate__head {
  display:grid;
  grid-template-columns:minmax(8rem,.28fr) minmax(0,1fr);
  gap:1.25rem;
  align-items:end;
  padding:1.35rem clamp(1.1rem,3vw,2rem) 1.2rem;
  border-bottom:1px solid rgba(199,162,87,.24);
}

.hth-editorial-plate__head p {
  margin:0!important;
  color:var(--hth-plate-gold)!important;
  font-size:.68rem!important;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.35!important;
}

.hth-editorial-plate__head h2 {
  max-width:none!important;
  margin:0!important;
  color:#E3E1D9!important;
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif!important;
  font-size:clamp(1.75rem,3.6vw,2.8rem)!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
  line-height:.98!important;
  text-transform:uppercase;
}

.hth-editorial-plate__visual { padding:clamp(.75rem,2vw,1.25rem); }
.hth-editorial-plate__visual svg { display:block;width:100%;height:auto; }
.hth-editorial-plate figcaption {
  margin:0!important;
  padding:1rem clamp(1.1rem,3vw,2rem) 1.25rem;
  border-top:1px solid rgba(227,225,217,.12);
  color:rgba(227,225,217,.82)!important;
  font-size:.88rem!important;
  font-weight:500!important;
  letter-spacing:0!important;
  line-height:1.55!important;
}

.hth-editorial-plate svg text {
  fill:#e3e1d9;
  font-family:Montserrat,system-ui,sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:1px;
}
.hth-editorial-plate .plate-bg { fill:#071827; }
.hth-editorial-plate .water-fast { fill:#2e6f95;opacity:.78; }
.hth-editorial-plate .water-soft,.hth-editorial-plate .water-mid { fill:#176f78;opacity:.5; }
.hth-editorial-plate .seam-line,.hth-editorial-plate .surface-line,.hth-editorial-plate .food-lane,.hth-editorial-plate .current-break,.hth-editorial-plate .structure-line { fill:none;stroke:#c7a257;stroke-width:6;stroke-linecap:round; }
.hth-editorial-plate .flow-arrows path { fill:none;stroke:#e3e1d9;stroke-width:5;stroke-linecap:round;marker-end:url(#hth-arrow-current);opacity:.85; }
.hth-editorial-plate .fish-marks path,.hth-editorial-plate .fish-mark-large { fill:#c7a257;stroke:#E3E1D9;stroke-width:2; }
.hth-editorial-plate .bottom-fill { fill:#424546;opacity:.9; }
.hth-editorial-plate .presentation-path { fill:none;stroke:#d55c3e;stroke-width:7;stroke-dasharray:16 12;stroke-linecap:round; }
.hth-editorial-plate .lure-dot { fill:#c7a257;stroke:#E3E1D9;stroke-width:3; }
.hth-editorial-plate .depth-rule { stroke:#e3e1d9;stroke-width:3;stroke-dasharray:7 8;opacity:.65; }
.hth-editorial-plate .cover-shape { fill:#355133;stroke:#c7a257;stroke-width:4;opacity:.9; }
.hth-editorial-plate .food-lane { stroke:#e3e1d9;stroke-width:4;stroke-dasharray:14 10; }
.hth-editorial-plate .food-lane.muted { opacity:.45; }
.hth-editorial-plate .current-break { stroke:#d55c3e;stroke-width:5;stroke-dasharray:10 9; }
.hth-editorial-plate .chain-line { fill:none;stroke:#c7a257;stroke-width:5;stroke-linecap:round; }
.hth-editorial-plate .chain-box { fill:#071827;stroke:#2e6f95;stroke-width:3; }
.hth-editorial-plate .step-circle { fill:#071827;stroke:#c7a257;stroke-width:4; }
.hth-editorial-plate .silhouette { fill:#e3e1d9;stroke:#c7a257;stroke-width:3;stroke-linecap:round; }
.hth-editorial-plate .lake-shape { fill:#176f78;stroke:#2e6f95;stroke-width:5; }
.hth-editorial-plate .wind-arrow { fill:none;stroke:#e3e1d9;stroke-width:8;stroke-linecap:round;marker-end:url(#hth-arrow-wind); }
.hth-editorial-plate .windward-mark { fill:none;stroke:#d55c3e;stroke-width:10;stroke-linecap:round; }
.hth-editorial-plate .protected-mark { fill:none;stroke:#c7a257;stroke-width:10;stroke-linecap:round; }
.hth-editorial-plate .weed-mark { stroke:#355133;stroke-width:8;stroke-linecap:round; }

/* Safety and stewardship plates. Every fill below is dark enough to carry the
   #e3e1d9 plate text at 4.5:1 or better, or carries no text at all. */
.hth-editorial-plate .land-fill { fill:#355133;opacity:.94; }
.hth-editorial-plate .channel-bar { fill:#2e6f95;opacity:.8; }
.hth-editorial-plate .flow-down,
.hth-editorial-plate .flow-across { fill:none;stroke:#e3e1d9;stroke-width:5;stroke-linecap:butt;marker-end:url(#hth-arrow);opacity:.85; }
.hth-editorial-plate .ground-flow { fill:none;stroke:#c7a257;stroke-width:5;stroke-dasharray:12 10;stroke-linecap:round;opacity:.85; }
.hth-editorial-plate .warm-band { fill:none;stroke:#d55c3e;stroke-width:6;stroke-dasharray:18 12;stroke-linecap:round; }
.hth-editorial-plate .cold-flow { fill:none;stroke:#2E6F95;stroke-width:7;stroke-linecap:round; }
.hth-editorial-plate .barrier-mark { fill:#424546;stroke:#d55c3e;stroke-width:4; }
.hth-editorial-plate .passage-mark { fill:none;stroke:#c7a257;stroke-width:7;stroke-linejoin:round;stroke-linecap:round; }
.hth-editorial-plate .seawall-mark { fill:none;stroke:#d55c3e;stroke-width:10;stroke-linecap:square; }
.hth-editorial-plate .net-mark { fill:none;stroke:#e3e1d9;stroke-width:3;opacity:.72; }
.hth-editorial-plate .ghost-line { fill:none;stroke:#e3e1d9;stroke-width:4;stroke-linecap:round;opacity:.8; }
.hth-editorial-plate .lead-mark { fill:#424546;stroke:#071827;stroke-width:3; }
.hth-editorial-plate .load-bar { fill:#d55c3e;opacity:.88; }
.hth-editorial-plate .time-wedge { fill:#c7a257;opacity:.5; }
.hth-editorial-plate .rung-go { fill:#355133;stroke:#176F78;stroke-width:4; }
.hth-editorial-plate .rung-watch { fill:#C7A257;stroke:#c7a257;stroke-width:4; }
.hth-editorial-plate .rung-stop { fill:#D55C3E;stroke:#d55c3e;stroke-width:4; }

.hth-editorial-plate__photo-wrap { position:relative;overflow:hidden;border-radius:10px;aspect-ratio:16/9;background:#071827; }
.hth-editorial-plate__photo { display:block;width:100%;height:100%!important;object-fit:cover;filter:saturate(.86) contrast(1.04); }
.hth-editorial-plate__photo-grid {
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(199,162,87,.8) 50%,transparent 50.3%),
    linear-gradient(transparent 49.7%,rgba(199,162,87,.8) 50%,transparent 50.3%);
  opacity:.55;
}
.hth-editorial-plate__photo-grid::before,.hth-editorial-plate__photo-grid::after {
  content:"";position:absolute;width:34px;height:34px;border:2px solid #E3E1D9;border-radius:50%;box-shadow:0 0 0 5px rgba(7,24,39,.35);
}
.hth-editorial-plate__photo-grid::before { left:24%;top:27%; }
.hth-editorial-plate__photo-grid::after { right:23%;bottom:24%; }
.hth-editorial-plate__legend { display:flex;flex-wrap:wrap;gap:.55rem;padding:.85rem 0 .1rem; }
.hth-editorial-plate__legend span { display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .65rem;border:1px solid rgba(199,162,87,.35);border-radius:999px;color:#e3e1d9;font-size:.7rem;font-weight:700;letter-spacing:.08em; }
.hth-editorial-plate__legend b { display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:#c7a257;color:#071827;font-size:.65rem; }

.hth-read-next {
  padding:clamp(1.3rem,3vw,2rem);
  border-top:2px solid var(--hth-plate-gold);
  border-bottom:1px solid rgba(7,24,39,.14);
  background:linear-gradient(105deg,rgba(199,162,87,.09),rgba(46,111,149,.055));
}
.hth-read-next__label { margin:0 0 .35rem!important;color:#071827!important;font-size:.68rem!important;font-weight:800;letter-spacing:.14em; }
.hth-read-next h2 { max-width:none!important;margin:0 0 1rem!important;color:#071827!important;font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif!important;font-size:clamp(1.8rem,3vw,2.5rem)!important;font-weight:400!important;letter-spacing:.02em!important;line-height:1!important;text-transform:uppercase; }
.hth-read-next ul { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.7rem!important;max-width:none!important;margin:0!important;padding:0!important;list-style:none!important; }
.hth-read-next li { margin:0!important;padding:0!important;border:0!important;background:transparent!important; }
.hth-read-next a { display:flex;min-height:100%;align-items:center;padding:.9rem 1rem;border:1px solid rgba(7,24,39,.12);border-radius:10px;background:#E3E1D9;color:#071827!important;font-size:.9rem;font-weight:700;line-height:1.4;text-decoration:none; }
.hth-read-next a:hover { border-color:#176F78;color:#071827!important;text-decoration-color:#176F78!important; }

.hth-five-routes { padding:clamp(1.25rem,3vw,2rem) 0; }
.hth-five-routes > header { max-width:72ch;margin:0 auto 1.5rem; }
.hth-five-routes > header > p { margin:0 0 .35rem!important;color:#071827!important;font-size:.68rem!important;font-weight:800;letter-spacing:.14em; }
.hth-five-routes > header h2 { max-width:none!important;margin:0 0 .65rem!important;color:#071827!important;font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif!important;font-size:clamp(2rem,4vw,3.2rem)!important;font-weight:400!important;letter-spacing:.02em!important;line-height:.98!important;text-transform:uppercase; }
.hth-five-routes > header span { color:#424546;font-size:1rem;line-height:1.6; }
.hth-five-routes__grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem; }
.hth-five-routes article { padding:1rem;border-top:3px solid #c7a257;background:#E3E1D9; }
.hth-five-routes article:nth-child(2) { border-top-color:#2e6f95; }
.hth-five-routes article:nth-child(3) { border-top-color:#176f78; }
.hth-five-routes article:nth-child(4) { border-top-color:#d55c3e; }
.hth-five-routes article:nth-child(5) { border-top-color:#355133; }
.hth-five-routes h3 { margin:0 0 .75rem!important;color:#071827!important;font-size:1rem!important;line-height:1.3!important; }
.hth-five-routes ol { margin:0!important;padding-left:1.2rem!important; }
.hth-five-routes li { margin:.5rem 0!important;color:#424546;font-size:.84rem;line-height:1.4; }
.hth-five-routes a { color:#071827!important;font-weight:650;text-underline-offset:.16em; }

@media (max-width:960px) {
  .hth-five-routes__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .hth-editorial-plate__head { grid-template-columns:1fr;gap:.45rem; }
  .hth-editorial-plate__visual { padding:.55rem; }
  .hth-editorial-plate svg text { font-size:23px; }
  .hth-read-next ul { grid-template-columns:1fr!important; }
  .hth-five-routes__grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .hth-read-next a { transition:none; }
}

.hth-tool-identity {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.45rem 1rem;
  align-items:center;
  width:min(72rem,calc(100% - 2rem));
  margin:1rem auto 1.25rem;
  padding:.8rem 1rem;
  border:1px solid rgba(199,162,87,.3);
  border-radius:12px;
  background:#071827;
  color:#e3e1d9;
  font-size:.78rem;
  line-height:1.35;
}
.hth-tool-identity__brand,.hth-tool-identity__first { color:#c7a257!important;font-weight:800;text-decoration:none; }
.hth-tool-identity__descriptor { font-weight:700;color:#E3E1D9; }
.hth-tool-identity__privacy { grid-column:2;color:rgba(227,225,217,.78); }
.hth-tool-identity__first { grid-column:3;grid-row:1 / span 2;white-space:nowrap; }
.hth-tool-identity__review { grid-column:1;color:rgba(227,225,217,.58);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem; }
@media (max-width:760px) {
  .hth-tool-identity { grid-template-columns:1fr;gap:.5rem; }
  .hth-tool-identity__privacy,.hth-tool-identity__first,.hth-tool-identity__review { grid-column:1;grid-row:auto;white-space:normal; }
}
/* hth-hero-plates */
/* -----------------------------------------------------------------------------
 * Hero plates — generic section artwork for pages with no photograph.
 *
 * Painted on .hth-route-hero--article only when inc/hero-plates.php has added
 * body.hth-has-plate, which it does only when the post has no featured image.
 * Set a Featured Image, or replace the plate in Appearance -> Site Images, and
 * that wins — this is the floor, not a ceiling.
 *
 * Every plate is built from the theme palette: deep navy #071827, lake blue
 * #2E6F95, teal #176F78, champagne gold #C7A257, burnt coral #D55C3E,
 * pearl #E3E1D9, forest green #355133. The left of each plate stays dark so the
 * overlaid display headline keeps its contrast.
 * -------------------------------------------------------------------------- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media(max-width:760px){
  :root{
    --hth-layout-gutter:.85rem;
    --hth-layout-section:clamp(2.25rem,9vw,3.5rem);
  }
  body:not(.home) .hth-landing-page .hth-route-grid,
  .hth-landing-page .hth-route-grid,
  .hth-route-reading .hth-route-grid,
  .hth-knot-family__grid,
  .hth-knot-family__head,
  .hth-si-layer-grid,
  .hth-si-profile-grid,
  .hth-si-guide-grid,
  .hth-si-example-grid,
  .hth-si-hero__grid,
  .hth-si-section-head,
  .hth-si-subhead,
  .hth-si-governance,
  .hth-fm-grid,
  .hth-field-modules .hth-fm-grid,
  body.hth-knot-profile section[style*="repeat(auto-fit"],
  body.hth-knot-profile section[style*="grid-template-columns:minmax(0,1.3fr)"]{
    grid-template-columns:1fr!important;
  }
  .hth-knot-linked-library{
    width:calc(100% - .5rem);
    padding:1.1rem .85rem;
  }
  body:not(.home) .hth-landing-page .hth-route-card,
  body:not(.home) .hth-landing-page .hth-route-card.is-wide,
  .hth-landing-page .hth-route-card{
    padding-inline:0!important;
    background:transparent!important;
    min-height:0!important;
  }
  .hth-si-hero__rail{
    grid-template-columns:1fr!important;
  }
  .hth-si-guide-card > a{
    grid-template-columns:1fr!important;
  }
}
/* hook-the-horizon-landing-pages */
/* Hook the Horizon landing-page system. Excludes the front page by design.
 * Navy magazine interiors. Store/commerce (body.hth-pearl-canvas) keeps Pearl.
 * Mobile-first: no overflow clipping, no forced card min-heights, fluid type.
 */
body:not(.home) .hth-landing-page{
  --hth-ink:#071827;
  --hth-pearl:#E3E1D9;
  --hth-lake:#2E6F95;
  --hth-teal:#176F78;
  --hth-coral:#D55C3E;
  --hth-gold:#C7A257;
  --hth-mist:color-mix(in srgb,#2E6F95 14%,#E3E1D9);
  --hth-canvas:#071827;
  background:var(--hth-ink);
  color:var(--hth-pearl);
  overflow:visible;
  width:100%;
  max-width:none;
}
body:not(.home) .hth-landing-page .hth-landing-hero{
  min-height:clamp(22rem,52vh,38rem);
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
}
body:not(.home) .hth-landing-page .hth-landing-hero .wp-block-cover__inner-container{
  width:min(1240px,calc(100% - 2rem));
  margin:0 auto;
  padding:clamp(4rem,9vw,8rem) 0 clamp(2.25rem,5vw,4.5rem);
}
body:not(.home) .hth-landing-page .hth-landing-kicker{
  font-family:Montserrat,sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.76rem;
  font-weight:800;
  margin-bottom:1rem;
  color:var(--hth-gold);
}
body:not(.home) .hth-landing-page .hth-landing-hero .hth-landing-kicker,
body:not(.home) .hth-landing-page .hth-landing-band.is-dark .hth-landing-kicker,
body:not(.home) .hth-landing-page .hth-landing-band.is-blue .hth-landing-kicker,
body:not(.home) .hth-landing-page .hth-landing-band.is-canvas .hth-landing-kicker,
body:not(.home) .hth-landing-page .hth-final-route .hth-landing-kicker{color:#C7A257}

body:not(.home) .hth-landing-page .hth-landing-band.is-dark,
body:not(.home) .hth-landing-page .hth-landing-band.is-dark :is(h1,h2,h3,h4,h5,h6,strong){color:var(--hth-pearl)}
body:not(.home) .hth-landing-page .hth-landing-band.is-dark :is(p,li){color:rgba(227,225,217,.92)}
body:not(.home) .hth-landing-page .hth-landing-band.is-dark .hth-route-card :is(h1,h2,h3,h4,h5,h6,strong){color:#E3E1D9}
body:not(.home) .hth-landing-page .hth-landing-band.is-dark .hth-route-card :is(p,li){color:rgba(227,225,217,.92)}
body:not(.home) .hth-landing-page .hth-landing-band.is-dark .hth-route-card a,
body:not(.home) .hth-landing-page .hth-landing-band.is-blue .hth-route-card a{color:#C7A257}
body:not(.home) .hth-landing-page .hth-landing-band.is-canvas .hth-route-card a{
  color:#071827;
  text-decoration-color:#C7A257;
}

/* is-canvas is the explicit Pearl field inside the Navy magazine canvas. */
body:not(.home) .hth-landing-page .hth-landing-band.is-canvas,
body:not(.home) .hth-landing-page .hth-landing-band.is-canvas :is(h1,h2,h3,h4,h5,h6,strong){color:var(--hth-ink)}
body:not(.home) .hth-landing-page .hth-landing-band.is-canvas :is(p,li){color:#424546}
body:not(.home) .hth-landing-page .hth-landing-hero .hth-landing-deck{color:rgba(227,225,217,.95)}
body:not(.home) .hth-landing-page .wp-block-cover.has-background-dim .wp-block-cover__inner-container{color:#E3E1D9}
body:not(.home) .hth-landing-page :is(.wp-block-button__link,.wp-element-button){
  color:#071827;
  background:#D55C3E;
}
body:not(.home) .hth-landing-page .hth-landing-band.is-dark .wp-block-button__link,
body:not(.home) .hth-landing-page .hth-final-route .wp-block-button__link{color:#071827;background:#C7A257}

body:not(.home) .hth-landing-page .hth-landing-hero h1,
body:not(.home) .hth-landing-page .hth-landing-hero h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2.6rem,10vw,6.5rem);
  line-height:.9;
  max-width:18ch;
  margin:0;
  color:#E3E1D9;
  text-wrap:balance;
}
body:not(.home) .hth-landing-page .hth-landing-hero .hth-landing-deck{
  font-family:Montserrat,sans-serif;
  font-size:clamp(1.02rem,2vw,1.35rem);
  line-height:1.55;
  max-width:40rem;
  margin:1.25rem 0 0;
  color:#E3E1D9;
}

body:not(.home) .hth-landing-page .hth-landing-band{
  padding:clamp(2.5rem,6vw,5.5rem) max(1rem,calc((100vw - 1240px)/2));
  position:relative;
  overflow:visible;
  background:transparent;
  color:var(--hth-pearl);
}
body:not(.home) .hth-landing-page .hth-landing-band :is(h1,h2,h3,h4,h5,h6,strong){color:var(--hth-pearl)}
body:not(.home) .hth-landing-page .hth-landing-band :is(p,li){color:rgba(227,225,217,.92)}
body:not(.home) .hth-landing-page .hth-landing-band.is-dark{background:var(--hth-ink);color:var(--hth-pearl)}
body:not(.home) .hth-landing-page .hth-landing-band.is-blue{background:var(--hth-ink);box-shadow:inset 0 .35rem 0 var(--hth-lake);color:#E3E1D9}
body:not(.home) .hth-landing-page .hth-landing-band.is-canvas{background:#E3E1D9;color:#424546}
body:not(.home) .hth-landing-page .hth-landing-band h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2rem,7vw,4.5rem);
  line-height:.95;
  margin:0 0 1rem;
  max-width:18ch;
  text-wrap:balance;
}

/* Free grid: auto-fit cards, never locked 12-col spans or min-height boxes */
body:not(.home) .hth-landing-page .hth-route-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:1.15rem 1.35rem;
  margin-top:2rem;
  width:100%;
  max-width:none;
}
body:not(.home) .hth-landing-page .hth-route-card,
body:not(.home) .hth-landing-page .hth-route-card.is-wide{
  grid-column:auto;
  min-width:0;
  min-height:0;
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.65rem;
  padding:1.15rem 0 0;
  border-top:3px solid var(--hth-gold);
  border-left:0;
  border-right:0;
  border-bottom:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body:not(.home) .hth-landing-page .hth-landing-band.is-dark .hth-route-card,
body:not(.home) .hth-landing-page .hth-landing-band.is-blue .hth-route-card,
body:not(.home) .hth-landing-page .hth-landing-band.is-canvas .hth-route-card{
  padding:1.15rem 1.1rem 1.2rem;
  background:rgba(227,225,217,.06);
  border-top-width:3px;
}
body:not(.home) .hth-landing-page .hth-route-card h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.35rem,3.5vw,1.85rem);
  line-height:1.12;
  margin:0;
  color:#E3E1D9;
}
body:not(.home) .hth-landing-page .hth-route-card p{
  font-family:Montserrat,sans-serif;
  line-height:1.65;
  margin:0;
  font-size:clamp(.98rem,1.5vw,1.05rem);
  max-width:none;
  width:auto;
  color:rgba(227,225,217,.92);
}
body:not(.home) .hth-landing-page .hth-route-card a{
  font-family:Montserrat,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  text-decoration:none;
  margin-top:.35rem;
  display:inline-block;
  color:#C7A257;
}
body:not(.home) .hth-landing-page .hth-route-card img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:cover;
  border-radius:2px;
  margin-bottom:.35rem;
}

body:not(.home) .hth-landing-page .hth-editorial-split{
  gap:clamp(1.5rem,5vw,4rem);
  align-items:center;
}
body:not(.home) .hth-landing-page .hth-editorial-split img{
  min-height:0;
  max-height:none;
  width:100%;
  height:auto;
  object-fit:cover;
}
body:not(.home) .hth-landing-page .hth-field-rule{
  border-left:5px solid var(--hth-coral);
  padding:1.1rem 1.25rem;
  background:rgba(227,225,217,.08);
  font-family:Montserrat,sans-serif;
  color:var(--hth-pearl);
}
body:not(.home) .hth-landing-page .wp-block-button__link{
  font-family:Montserrat,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
body:not(.home) .hth-landing-page .hth-final-route{
  padding:clamp(3rem,8vw,6.5rem) max(1rem,calc((100vw - 1240px)/2));
  background:linear-gradient(135deg,#071827,#176F78);
  color:#E3E1D9;
  overflow:visible;
}
body:not(.home) .hth-landing-page .hth-final-route h2{color:#E3E1D9}

@media (max-width:900px){
  body:not(.home) .hth-landing-page .hth-route-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }
  body:not(.home) .hth-landing-page .hth-route-card,
  body:not(.home) .hth-landing-page .hth-route-card.is-wide{
    grid-column:auto;
  }
  .hth-editorial-split{display:block!important}
  .hth-editorial-split>.wp-block-column{margin-bottom:1.25rem;width:100%!important}
}

@media (max-width:620px){
  body:not(.home) .hth-landing-page .hth-landing-hero{
    min-height:clamp(18rem,48vh,28rem);
  }
  body:not(.home) .hth-landing-page .hth-landing-hero h1,
  body:not(.home) .hth-landing-page .hth-landing-hero h2{
    font-size:clamp(2.35rem,12vw,3.4rem);
    max-width:12ch;
  }
  body:not(.home) .hth-landing-page .hth-landing-band{
    padding-inline:1rem;
  }
  body:not(.home) .hth-landing-page .hth-landing-band h2{
    font-size:clamp(1.85rem,9vw,2.6rem);
    max-width:14ch;
  }
  body:not(.home) .hth-landing-page .hth-route-card,
  body:not(.home) .hth-landing-page .hth-landing-band.is-dark .hth-route-card,
  body:not(.home) .hth-landing-page .hth-landing-band.is-blue .hth-route-card,
  body:not(.home) .hth-landing-page .hth-landing-band.is-canvas .hth-route-card{
    padding:1rem .15rem 0;
    background:transparent;
    min-height:0;
  }
  body:not(.home) .hth-landing-page .hth-landing-band.is-dark .hth-route-card,
  body:not(.home) .hth-landing-page .hth-landing-band.is-blue .hth-route-card,
  body:not(.home) .hth-landing-page .hth-landing-band.is-canvas .hth-route-card{
    padding:1rem 0 0;
    border-top:2px solid var(--hth-gold);
    background:transparent;
  }
}

@media (prefers-reduced-motion:reduce){
  body:not(.home) .hth-landing-page *{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}

@media print{
  body:not(.home) .hth-landing-page .hth-landing-hero{
    min-height:auto;
    background:#E3E1D9!important;
    color:#071827!important;
  }
  .hth-landing-page .wp-block-cover__image-background,
  .hth-landing-page .wp-block-cover__background{display:none}
  .hth-landing-page .hth-landing-hero h1,
  .hth-landing-page .hth-landing-hero .hth-landing-deck{color:#071827!important}
}

/* ------------------------------------------------------------------ */
/* Field Desk / commerce keeps Pearl. Do not navy-lock the store.     */
/* ------------------------------------------------------------------ */
body.hth-pearl-canvas .hth-landing-page{
  background:#E3E1D9;
  color:#424546;
}
body.hth-pearl-canvas .hth-landing-page .hth-landing-kicker{color:#071827}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band{
  color:#071827;
}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band :is(h1,h2,h3,h4,h5,h6,strong){color:#071827}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band :is(p,li){color:#424546}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-canvas{
  background:color-mix(in srgb,#C7A257 18%,#E3E1D9);
  color:#071827;
}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-canvas :is(h1,h2,h3,h4,h5,h6,strong){color:#071827}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-canvas :is(p,li){color:#424546}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-canvas .hth-landing-kicker{color:#071827}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-canvas .hth-route-card a{color:#071827}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-dark,
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-dark :is(h1,h2,h3,h4,h5,h6,strong){color:#E3E1D9}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-dark :is(p,li){color:rgba(227,225,217,.92)}
body.hth-pearl-canvas .hth-landing-page .hth-route-card h3{color:#071827}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-dark .hth-route-card h3,
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-blue .hth-route-card h3{color:#E3E1D9}
body.hth-pearl-canvas .hth-landing-page .hth-route-card p{color:#424546}
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-dark .hth-route-card p,
body.hth-pearl-canvas .hth-landing-page .hth-landing-band.is-blue .hth-route-card p{color:rgba(227,225,217,.92)}
body.hth-pearl-canvas .hth-landing-page .hth-route-card a{color:#071827}
body.hth-pearl-canvas .hth-landing-page .hth-field-rule{
  background:rgba(7,24,39,.06);
  color:#071827;
}
body.hth-pearl-canvas .hth-landing-page .hth-landing-hero .wp-block-cover__background{
  background-color:#071827!important;
  opacity:.58!important;
}
body.hth-pearl-canvas .hth-landing-page .hth-landing-hero h1,
body.hth-pearl-canvas .hth-landing-page .hth-landing-hero h2,
body.hth-pearl-canvas .hth-landing-page .hth-landing-hero .hth-landing-deck{
  color:#E3E1D9!important;
  text-shadow:0 1px 12px rgba(7,24,39,.45);
}
/* hook-mobile-responsive */
/**
 * Hook the Horizon — Global Mobile Responsive System
 * Auto-converts all pages, posts, archives, and templates for small viewports.
 * Loads site-wide (homepage included for shared chrome; reading rules exclude home).
 *
 * Breakpoints:
 *   1100px  tablet landscape / small laptop
 *    900px  tablet portrait
 *    767px  phone landscape / large phone
 *    480px  compact phone
 */

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

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

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

body {
  overflow-x: clip;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:is(.hth-rs-hero__copy,.hth-rs-marquee,.hth-rs-evidence,.hth-rs-closing,.hth-rs-condition-card,.hth-rs-dest-card,.hth-compat-hero,.hth-si-hero,.hth-si-toolbar,.hth-sp-remember){
  color:var(--hth-contrast-light)!important;
}
:is(.hth-rs-hero__copy,.hth-rs-marquee,.hth-rs-evidence,.hth-rs-closing,.hth-rs-condition-card,.hth-rs-dest-card,.hth-compat-hero,.hth-si-hero,.hth-si-toolbar,.hth-sp-remember)
:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,blockquote,figcaption,a:not(.hth-rs-button):not(.wp-element-button):not(.wp-block-button__link)){
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   TOKENS
     --hth-bleed-full      front page. Edge to edge, no page gutter.
     --hth-bleed-interior  interior pages. 90% of the viewport.
     --hth-shell-max       the interior shell, capped so a line of text
                           does not run absurdly wide on a big display.
     --hth-shell-gutter    the real margin outside the shell.
     --hth-measure         the centre reading measure. 86ch at the body
                           size lands around 1040px, which reads as a
                           designed page instead of a narrow blog column.
                           65ch is not a law; 75-90 characters reads fine.
     --hth-wide-max        wide rail: figures, grids, tables, pull-outs.
                           This is 100% ON PURPOSE. The 90% bleed is applied
                           exactly ONCE, at the outermost content box (the
                           shell on articles, .hth-field-modules on landing
                           pages). A second viewport-relative width nested
                           inside an already-inset shell compounds the inset:
                           at 375px that produced a 270px column and a 22ch
                           line. Inner rails fill the rail they are in.

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

:root {
  --hth-bleed-full: 100%;
  /* 90%, not 90vw: vw counts the classic scrollbar and clientWidth does not,
     so a 90vw shell measured 90.9% of the page at 1440. A percentage of a
     full-width parent measures exactly 90%. */
  --hth-bleed-interior: 90%;
  /* No px cap. The house contract is --bleed-max: none — the 1720px ceiling
     put the page back to 67% at 2560, which is the narrow-column look the
     contract exists to remove. Long lines are handled by growing the type
     (--bleed-prose-size in house-bleed.css), not by starving the column. */
  --hth-shell-max: var(--hth-bleed-interior);
  --hth-shell-gutter: clamp(1rem, 4vw, 3rem);
  --hth-measure: 86ch;
  --hth-wide-max: 100%;
  --hth-prose-max: var(--hth-measure);
  --hth-tap-min: 44px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

main {
  overflow-wrap: break-word;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

html {
  background: #071827;
}

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

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

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

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

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

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

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

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

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

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

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

body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-warning,
body.fleet-bleed-interior:not(.hth-pearl-canvas) .hth-route-main .hth-warning {
  background: rgba(199, 162, 87, 0.12);
  color: #E3E1D9;
  border-left-color: #C7A257;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

body.hth-navy-canvas .hth-landing-page .hth-landing-band.is-canvas a {
  color: #071827 !important;
  text-decoration-color: #C7A257;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Approved Pearl inline blocks own dark foregrounds. */
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
){
  background:#E3E1D9!important;
  color:#424546!important;
  -webkit-text-fill-color:#424546!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
) :is(h1,h2,h3,h4,h5,h6,strong,[data-hth-contrast-fix="dark"]){
  color:#071827!important;
  -webkit-text-fill-color:#071827!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
) :is(p,li,dt,dd,figcaption,blockquote){
  color:#424546!important;
  -webkit-text-fill-color:#424546!important;
}
body main :is(.wp-block-group,section,article,aside,div):is(
  [style*="background:#E3E1D9" i],
  [style*="background-color:#E3E1D9" i]
) a{
  color:#071827!important;
  -webkit-text-fill-color:#071827!important;
  text-decoration-color:#C7A257;
}
/* hook-the-horizon-a11y-contrast */
/* Hook the Horizon — palette-native contrast remediation
   Accent colors stay decorative on light surfaces; readable text uses Deep Navy.
   Dark surfaces use Pearl or Champagne Gold. No automatic OS color-mode swap.
   2026-08-30 */

:root {
  --hth-gold-on-light: #071827;
  --hth-gold-bright: #C7A257;
  --hth-coral-on-light: #071827;
  --hth-coral-bright: #D55C3E;
  --hth-muted-on-dark: rgba(227, 225, 217, 0.92);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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