/*
Theme Name: Humanity in the Balance — child
Theme URI: https://humanityinthebalance.com/
Template: kadence
Author: Flashcloud
Author URI: https://flashcloud.com/
Description: Long-form non-fiction child theme for "Humanity in the Balance" by Geoff Fielding. Editorial register, single-column reading layout, Source Serif Pro + Inter, paper background, blue accent (#2563EB) as the only graphic element.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: humanity-child
*/

/* ============================================================================
   1. BRAND TOKENS  (source of truth; mirrored in deliverables/brand-tokens.css)
   ============================================================================ */
:root {
  --hf-ink:           #0D1B2A;
  --hf-ink-soft:      #1F2937;
  --hf-paper:         #F4EFE3;
  --hf-paper-card:    #FAF6EC;
  --hf-paper-deep:    #EFE9D9;
  --hf-rule:          #D9D2C0;
  --hf-stone:         #6B7280;
  --hf-stone-light:   #94A3B8;
  --hf-signal:        #2563EB;
  --hf-signal-hover:  #1E40AF;
  --hf-signal-soft:   rgba(37, 99, 235, 0.10);
  --hf-warn:          #B45309;

  --hf-font-serif:    "Source Serif Pro", "Source Serif", Georgia, "Times New Roman", serif;
  --hf-font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hf-font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --hf-fs-xxs:        0.75rem;
  --hf-fs-xs:         0.8125rem;
  --hf-fs-sm:         0.875rem;
  --hf-fs-base:       1.0625rem;
  --hf-fs-md:         1.1875rem;
  --hf-fs-lg:         clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --hf-fs-xl:         clamp(1.75rem, 1.45rem + 1vw, 2.125rem);
  --hf-fs-xxl:        clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  --hf-fs-display:    clamp(2.625rem, 1.9rem + 2.8vw, 3.875rem);

  --hf-lh-tight:      1.15;
  --hf-lh-snug:       1.3;
  --hf-lh-body:       1.7;
  --hf-lh-loose:      1.85;

  --hf-ls-tight:      -0.01em;
  --hf-ls-normal:     0;
  --hf-ls-wide:       0.04em;
  --hf-ls-eyebrow:    0.18em;

  --hf-fw-regular:    400;
  --hf-fw-medium:     500;
  --hf-fw-semibold:   600;
  --hf-fw-bold:       700;

  --hf-space-1:       0.25rem;
  --hf-space-2:       0.5rem;
  --hf-space-3:       0.75rem;
  --hf-space-4:       1rem;
  --hf-space-5:       1.5rem;
  --hf-space-6:       2rem;
  --hf-space-7:       3rem;
  --hf-space-8:       4rem;
  --hf-space-9:       6rem;
  --hf-space-10:      8rem;

  --hf-measure:       65ch;
  --hf-measure-wide:  80ch;
  --hf-measure-full:  1180px;

  --hf-header-h:      72px;
  --hf-header-h-mobile: 60px;

  --hf-radius-sm:     2px;
  --hf-radius-md:     6px;
  --hf-radius-lg:     10px;
  --hf-radius-xl:     16px;

  --hf-shadow-sm:     0 1px 2px rgba(13, 27, 42, 0.04);
  --hf-shadow-md:     0 8px 24px -10px rgba(13, 27, 42, 0.12);
  --hf-shadow-image:  0 30px 60px -30px rgba(13, 27, 42, 0.25), 0 0 0 1px var(--hf-rule);

  --hf-ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --hf-dur:           220ms;

  --hf-rule-h:        2px;
  --hf-rule-w-sm:     40px;
  --hf-rule-w-md:     80px;
  --hf-rule-w-lg:     120px;
}

/* ============================================================================
   2. FRAME KILLERS — Kadence's defaults assume white frame + light theme.
   ============================================================================ */
html, body { background: var(--hf-paper) !important; color: var(--hf-ink); }
html body .wp-site-blocks,
html body .site,
html body .site-container,
html body .content-container,
html body #content,
html body .content-area,
html body .entry-content,
html body .site-content,
html body .content-bg,
html body .hfeed.site-main,
html body .entry-content-wrap,
html body .content-style-unboxed .entry-content { background: var(--hf-paper) !important; color: var(--hf-ink); }
html body .content-container.site-container { padding: 0 !important; max-width: 100% !important; }
html body .entry-content { margin: 0 !important; }
/* Sticky-footer pattern: main grows to fill viewport on short pages,
   keeping the dark footer flush to the bottom. */
html, body, html body .wp-site-blocks { min-height: 100vh; }
html body .wp-site-blocks { display: flex !important; flex-direction: column !important; }
html body .wp-site-blocks > main,
html body .wp-site-blocks > .site-content,
html body main.site-main { flex: 1 0 auto !important; }
html body .site-footer { flex-shrink: 0 !important; margin-top: auto !important; }
html body .content-area { margin: 0 !important; }
html body .entry-hero.page-hero-section { display: none; }
html body .page .entry-title,
html body .single .entry-title { display: none; }
html body .navigation.post-navigation,
html body .nav-links,
html body .post-navigation-sub { display: none !important; }

/* ============================================================================
   3. BASE TYPOGRAPHY
   ============================================================================ */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  line-height: var(--hf-lh-body);
  color: var(--hf-ink);
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hf-font-serif);
  color: var(--hf-ink);
  line-height: var(--hf-lh-snug);
  letter-spacing: var(--hf-ls-tight);
  font-weight: var(--hf-fw-semibold);
  margin: 0 0 var(--hf-space-4);
}
h1, .hf-title { font-size: var(--hf-fs-xxl); }
h2, .hf-h2 { font-size: var(--hf-fs-xl); }
h3, .hf-h3 { font-size: var(--hf-fs-lg); }
h4 { font-size: var(--hf-fs-md); font-weight: var(--hf-fw-semibold); }
h5 { font-size: var(--hf-fs-base); font-weight: var(--hf-fw-semibold); }
h6 { font-size: var(--hf-fs-sm); font-weight: var(--hf-fw-semibold); letter-spacing: var(--hf-ls-wide); text-transform: uppercase; color: var(--hf-stone); }
p, ul, ol, blockquote, table { margin: 0 0 var(--hf-space-5); }
strong, b { font-weight: var(--hf-fw-semibold); }
em, i { font-style: italic; }

a { color: var(--hf-signal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--hf-dur) var(--hf-ease); }
a:hover, a:focus { color: var(--hf-signal-hover); text-decoration-thickness: 2px; }

abbr[title] { text-decoration: underline dotted var(--hf-signal); text-underline-offset: 4px; cursor: help; }
sup, sub { font-size: 0.65em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.6em; }
sub { bottom: -0.25em; }
sup a, sup a:visited { color: var(--hf-signal); text-decoration: none; padding: 0 2px; border-radius: 2px; font-weight: var(--hf-fw-semibold); }
sup a:hover { background: var(--hf-signal-soft); }

blockquote {
  margin: var(--hf-space-6) 0;
  padding: var(--hf-space-2) var(--hf-space-5);
  border-left: 2px solid var(--hf-signal);
  font-style: italic;
  color: var(--hf-ink-soft);
}
blockquote p:last-child { margin-bottom: 0; }
hr { border: 0; height: 1px; background: var(--hf-rule); margin: var(--hf-space-7) 0; }

/* ============================================================================
   4. THE BALANCE RULE — the single graphic element across the brand
   ============================================================================ */
.hf-rule {
  display: block;
  width: var(--hf-rule-w-md);
  height: var(--hf-rule-h);
  background: var(--hf-signal);
  border: 0;
  margin: var(--hf-space-5) auto;
}
.hf-rule--sm { width: var(--hf-rule-w-sm); }
.hf-rule--lg { width: var(--hf-rule-w-lg); }
.hf-rule--left { margin-left: 0; margin-right: auto; }

/* Eyebrow — the only ALL-CAPS use case on the site */
.hf-eyebrow {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  font-weight: var(--hf-fw-medium);
  letter-spacing: var(--hf-ls-eyebrow);
  text-transform: uppercase;
  color: var(--hf-stone);
  margin: 0 0 var(--hf-space-3);
}

/* ============================================================================
   5. LAYOUT — single-column reading-first
   ============================================================================ */
.hf-container { max-width: var(--hf-measure-full); margin: 0 auto; padding: 0 var(--hf-space-5); }
.hf-measure   { max-width: var(--hf-measure); margin-left: auto; margin-right: auto; }
.hf-measure-wide { max-width: var(--hf-measure-wide); margin-left: auto; margin-right: auto; }

.hf-section { padding: var(--hf-space-8) 0; }
.hf-section--tight { padding: var(--hf-space-6) 0; }
.hf-section--hero { padding: var(--hf-space-10) 0 var(--hf-space-8); text-align: center; }
.hf-section--paper-deep { background: var(--hf-paper-deep); }

/* ============================================================================
   6. BUTTONS — calm outline button only. No solid fills.
   ============================================================================ */
.hf-btn, .hf-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--hf-space-2);
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-sm);
  font-weight: var(--hf-fw-medium);
  letter-spacing: 0.02em;
  color: var(--hf-signal);
  background: transparent;
  border: 1px solid var(--hf-signal);
  border-radius: var(--hf-radius-md);
  padding: 0.625rem 1.125rem;
  text-decoration: none;
  transition: all var(--hf-dur) var(--hf-ease);
  cursor: pointer;
}
.hf-btn:hover, .hf-btn:focus { background: var(--hf-signal); color: var(--hf-paper); border-color: var(--hf-signal); text-decoration: none; }
.hf-btn--solid { background: var(--hf-ink); color: var(--hf-paper); border-color: var(--hf-ink); }
.hf-btn--solid:hover { background: var(--hf-signal); border-color: var(--hf-signal); }
.hf-btn--ghost { border-color: var(--hf-rule); color: var(--hf-ink); }
.hf-btn--ghost:hover { border-color: var(--hf-signal); color: var(--hf-signal); background: transparent; }
.hf-btn .hf-btn__arrow { transition: transform var(--hf-dur) var(--hf-ease); }
.hf-btn:hover .hf-btn__arrow { transform: translateX(3px); }

/* ============================================================================
   7. HEADER — sticky, paper-paper, hairline rule
   ============================================================================ */
html body #wrapper,
html body #page,
html body .site,
html body .site-content { overflow: visible !important; }

html body #main-header,
html body #mobile-header,
html body .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--hf-paper) !important;
  border-bottom: 1px solid var(--hf-rule) !important;
  backdrop-filter: saturate(160%);
}
html body #main-header .site-container,
html body #mobile-header .site-container { max-width: var(--hf-measure-full); padding: 0 var(--hf-space-5); }

/* Mobile: keep header on one row within viewport, hamburger visible on the right */
@media (max-width: 1024px) {
  html body #mobile-header .site-container { padding: 0 var(--hf-space-4) !important; max-width: 100% !important; }
  html body #mobile-header,
  html body #mobile-header .site-mobile-header-wrap,
  html body #mobile-header .site-header-inner-wrap,
  html body #mobile-header .site-header-upper-wrap,
  html body #mobile-header .site-header-row-container-inner { max-width: 100vw !important; overflow: visible !important; }
  html body #mobile-header .site-main-header-inner-wrap { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: var(--hf-space-3); width: 100%; }
  html body #mobile-header .site-header-section-left { flex: 1 1 auto; min-width: 0; }
  html body #mobile-header .site-header-section-right { flex: 0 0 auto; }
  html body #mobile-header img.custom-logo { height: 36px !important; max-height: 36px !important; }
  html body #mobile-header #mobile-toggle,
  html body #mobile-header .menu-toggle-open {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: transparent !important;
    border: 1px solid var(--hf-rule) !important;
    border-radius: var(--hf-radius-md);
    color: var(--hf-ink) !important;
    padding: 0 !important;
  }
  html body #mobile-header #mobile-toggle:hover,
  html body #mobile-header #mobile-toggle:focus { border-color: var(--hf-signal) !important; color: var(--hf-signal) !important; }
  html body #mobile-header #mobile-toggle svg { width: 22px !important; height: 22px !important; fill: currentColor !important; color: inherit !important; }
}

/* Mobile drawer (the slide-in popup when hamburger is clicked) — brand it */
html body #mobile-drawer .drawer-inner,
html body .popup-drawer-mobile .drawer-inner {
  background: var(--hf-paper) !important;
  color: var(--hf-ink) !important;
}
html body #mobile-drawer .drawer-content { background: var(--hf-paper) !important; padding: var(--hf-space-5) !important; }
html body #mobile-drawer .menu-toggle-close { color: var(--hf-ink) !important; }
html body #mobile-drawer ul.menu,
html body #mobile-drawer .mobile-navigation ul {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
html body #mobile-drawer ul.menu li.menu-item,
html body #mobile-drawer .mobile-navigation li.menu-item { border-bottom: 1px solid var(--hf-rule); }
html body #mobile-drawer ul.menu li.menu-item > a,
html body #mobile-drawer .mobile-navigation li.menu-item > a {
  display: block !important;
  font-family: var(--hf-font-serif) !important;
  font-size: var(--hf-fs-lg) !important;
  font-weight: var(--hf-fw-semibold) !important;
  color: var(--hf-ink) !important;
  padding: var(--hf-space-4) 0 !important;
  text-decoration: none !important;
}
html body #mobile-drawer ul.menu li.menu-item > a:hover,
html body #mobile-drawer ul.menu li.menu-item.current-menu-item > a { color: var(--hf-signal) !important; }
html body #mobile-drawer ul.menu .sub-menu li.menu-item > a,
html body #mobile-drawer .mobile-navigation .sub-menu li.menu-item > a {
  font-size: var(--hf-fs-base) !important;
  padding: var(--hf-space-3) 0 var(--hf-space-3) var(--hf-space-5) !important;
  color: var(--hf-ink-soft) !important;
}
/* Drawer parent-with-children rows (Resources▾) — Kadence styles them white,
   we need ink */
html body #mobile-drawer .menu-item-has-children > a,
html body #mobile-drawer .menu-item-has-children .nav-drop-title-wrap,
html body #mobile-drawer .dropdown-nav-special-toggle,
html body #mobile-drawer .dropdown-nav-toggle,
html body #mobile-drawer .dropdown-nav-special-toggle svg,
html body #mobile-drawer .dropdown-nav-toggle svg { color: var(--hf-ink) !important; fill: currentColor !important; }
html body #mobile-drawer .menu-item-has-children > a:hover { color: var(--hf-signal) !important; }
html body #mobile-drawer .search-toggle-open { color: var(--hf-ink) !important; padding: var(--hf-space-3) 0 !important; }
html body #mobile-drawer .search-toggle-open svg { width: 22px !important; height: 22px !important; fill: currentColor !important; }

/* Catch-all: every <a> in the drawer is ink + serif at the same size */
html body #mobile-drawer a,
html body #mobile-drawer .drawer-nav-drop-wrap a,
html body #mobile-drawer .drawer-nav-drop-wrap {
  color: var(--hf-ink) !important;
  font-family: var(--hf-font-serif) !important;
  font-size: var(--hf-fs-lg) !important;
  font-weight: var(--hf-fw-semibold) !important;
}
/* Kill the 11px left padding Kadence injects on the drop-wrap for items-with-children
   so "Resources" lines up flush-left with Home/Chapters/About. */
html body #mobile-drawer .drawer-nav-drop-wrap,
html body #mobile-drawer .drawer-nav-drop-wrap a,
html body #mobile-drawer .drawer-nav-drop-wrap > a { padding-left: 0 !important; margin-left: 0 !important; }
html body #mobile-drawer a:hover { color: var(--hf-signal) !important; }
/* Sub-menu items stay smaller, slightly muted */
html body #mobile-drawer .sub-menu a {
  font-size: var(--hf-fs-base) !important;
  font-weight: var(--hf-fw-regular) !important;
  color: var(--hf-ink-soft) !important;
}

/* Brand — keep the SVG wordmark image as the brand mark. Hide the
   duplicate site-title text Kadence injects when both are present. */
html body .site-branding .custom-logo,
html body .site-branding .site-logo-image,
html body .site-branding img.custom-logo {
  display: block !important;
  width: auto !important;
  height: 56px !important;
  max-height: 56px !important;
  max-width: none !important;
}
@media (max-width: 900px) {
  html body .site-branding .custom-logo,
  html body .site-branding img.custom-logo { height: 44px !important; max-height: 44px !important; }
}
html body .site-branding .site-title-wrap,
html body .site-branding .site-title,
html body .site-branding p.site-title { display: none !important; }
html body .site-branding .brand { display: flex !important; align-items: center !important; gap: 0 !important; }

/* Nav */
html body .main-navigation .primary-menu-container > ul > li.menu-item > a,
html body #mobile-navigation .menu > li.menu-item > a {
  font-family: var(--hf-font-sans) !important;
  font-size: var(--hf-fs-sm) !important;
  font-weight: var(--hf-fw-medium) !important;
  letter-spacing: var(--hf-ls-wide) !important;
  color: var(--hf-ink) !important;
  text-transform: none !important;
}
html body .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
html body .main-navigation .primary-menu-container > ul > li.current-menu-item > a {
  color: var(--hf-signal) !important;
}
/* Kadence already injects its own SVG caret inside .dropdown-nav-toggle —
   don't add a second one via ::after. Just style theirs. */
html body .main-navigation .dropdown-nav-toggle svg { width: 12px !important; height: 12px !important; color: var(--hf-stone) !important; margin-left: 2px; }

/* Submenu (Resources dropdown) */
html body .main-navigation .sub-menu {
  background: var(--hf-paper-card) !important;
  border: 1px solid var(--hf-rule) !important;
  box-shadow: var(--hf-shadow-md) !important;
  border-radius: var(--hf-radius-md);
  padding: var(--hf-space-2) 0;
  min-width: 220px;
}
html body .main-navigation .sub-menu li.menu-item a,
html body .main-navigation .sub-menu li.menu-item.current-menu-item a,
html body .main-navigation .sub-menu li.menu-item.current-page-ancestor a,
html body .main-navigation .sub-menu li.menu-item.current-menu-parent a {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-sm);
  color: var(--hf-ink) !important;
  background: transparent !important;
  padding: var(--hf-space-2) var(--hf-space-4) !important;
}
html body .main-navigation .sub-menu li.menu-item a:hover,
html body .main-navigation .sub-menu li.menu-item a:focus {
  background: var(--hf-signal-soft) !important;
  color: var(--hf-signal) !important;
}
html body .main-navigation .sub-menu li.menu-item.current-menu-item > a,
html body .main-navigation .sub-menu li.menu-item.current-page-item > a {
  color: var(--hf-signal) !important;
  background: transparent !important;
}

/* Header search icon */
html body .site-header-item .header-search-icon-wrap .search-toggle-open-button,
html body .header-search .search-toggle-open-button {
  color: var(--hf-ink) !important;
  background: transparent !important;
}
html body .header-search .search-toggle-open-button:hover { color: var(--hf-signal) !important; }

/* Search overlay/modal — Kadence renders an overlay panel when search icon is clicked.
   Brand it: paper bg, ink text, blue accent on focus and submit. */
html body .header-search-bar-modal,
html body .search-toggle-open-container,
html body .header-search-bar,
html body .search-bar-modal,
html body .header-search-form-wrap,
html body .header-search-bar-wrap {
  background: var(--hf-paper) !important;
  color: var(--hf-ink) !important;
}
html body .header-search-bar-modal .search-form,
html body .search-toggle-open-container .search-form,
html body .header-search-bar .search-form,
html body .header-search-bar-wrap .search-form {
  background: var(--hf-paper) !important;
}
html body .header-search-bar-modal input[type="search"],
html body .search-toggle-open-container input[type="search"],
html body .header-search-bar input[type="search"],
html body .header-search-bar-wrap input[type="search"],
html body input.search-field {
  background: var(--hf-paper-card) !important;
  color: var(--hf-ink) !important;
  border: 1px solid var(--hf-rule) !important;
  border-radius: var(--hf-radius-md) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--hf-font-serif) !important;
  font-size: var(--hf-fs-md) !important;
}
html body input.search-field:focus { outline: 2px solid var(--hf-signal) !important; border-color: var(--hf-signal) !important; }
html body input.search-field::placeholder { color: var(--hf-stone) !important; }
html body .header-search-bar-modal button[type="submit"],
html body .search-toggle-open-container button[type="submit"],
html body .header-search-bar button[type="submit"],
html body .search-form button[type="submit"] {
  background: var(--hf-ink) !important;
  color: var(--hf-paper) !important;
  border: 1px solid var(--hf-ink) !important;
  border-radius: var(--hf-radius-md) !important;
  padding: 0.625rem 1.25rem !important;
  font-family: var(--hf-font-sans) !important;
}
html body .header-search-bar-modal .close-toggle,
html body .search-toggle-open-container .close-toggle,
html body .header-modal-close { color: var(--hf-ink) !important; }

/* Kadence "drawer" overlay used for the search popup — paper background, ink text */
html body .popup-drawer .drawer-inner,
html body .search-toggle-open-container .drawer-inner,
html body .popup-drawer-layout-fullwidth .drawer-inner {
  background: var(--hf-paper) !important;
  color: var(--hf-ink) !important;
}
html body .popup-drawer .drawer-overlay,
html body .popup-drawer-layout-fullwidth .drawer-overlay {
  background: rgba(13, 27, 42, 0.4) !important;
}
html body .popup-drawer .drawer-content { background: var(--hf-paper) !important; }
html body .popup-drawer .search-toggle-close,
html body .popup-drawer .drawer-header .drawer-toggle { color: var(--hf-ink) !important; }
html body .popup-drawer .search-toggle-close:hover { color: var(--hf-signal) !important; }

/* ============================================================================
   8. LANDING PAGE SECTIONS
   ============================================================================ */
.hf-hero-banner { padding: var(--hf-space-5) 0 0; }
.hf-hero-banner__frame {
  max-width: var(--hf-measure-full);
  margin: 0 auto;
  padding: 0 var(--hf-space-5);
}
.hf-hero-banner__frame img {
  width: 100%; height: auto; display: block;
  border-radius: var(--hf-radius-xl);
  box-shadow: var(--hf-shadow-image);
}
.hf-hero-banner__caption {
  max-width: var(--hf-measure-full);
  margin: var(--hf-space-3) auto 0;
  padding: 0 var(--hf-space-5);
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  letter-spacing: var(--hf-ls-wide);
  text-transform: uppercase;
  color: var(--hf-stone);
  text-align: center;
}
@media (max-width: 600px) {
  .hf-hero-banner__frame img { border-radius: var(--hf-radius-lg); }
  .hf-hero-banner__frame { padding: 0 var(--hf-space-4); }
}


.hf-hero-statement {
  text-align: center;
  padding: var(--hf-space-9) 0 var(--hf-space-7);
}
.hf-hero-statement__wordmark {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-display);
  line-height: var(--hf-lh-tight);
  font-weight: var(--hf-fw-semibold);
  letter-spacing: var(--hf-ls-tight);
  margin: 0 0 var(--hf-space-5);
  color: var(--hf-ink);
}
.hf-hero-statement__eyebrow { margin-bottom: var(--hf-space-5); }
.hf-hero-statement__tagline {
  font-family: var(--hf-font-serif);
  font-style: italic;
  font-size: var(--hf-fs-md);
  color: var(--hf-ink-soft);
  max-width: 36rem;
  margin: var(--hf-space-5) auto 0;
}

/* Four questions panel */
.hf-questions {
  text-align: center;
  padding: var(--hf-space-7) 0;
}
.hf-questions__list {
  list-style: none; padding: 0; margin: var(--hf-space-5) auto;
  font-family: var(--hf-font-serif);
  font-style: italic;
  font-size: var(--hf-fs-md);
  line-height: 2;
  color: var(--hf-ink);
  max-width: 36rem;
}
.hf-questions__list li { margin: 0; }
.hf-questions__tagline {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  color: var(--hf-ink-soft);
  margin-top: var(--hf-space-5);
  max-width: 36rem;
  margin-left: auto; margin-right: auto;
}

/* Featured intro + chapter previews */
.hf-feature {
  padding: var(--hf-space-7) 0;
  max-width: var(--hf-measure);
  margin: 0 auto;
}
.hf-feature__eyebrow { margin-bottom: var(--hf-space-3); }
.hf-feature__title {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-xl);
  font-weight: var(--hf-fw-semibold);
  line-height: var(--hf-lh-snug);
  letter-spacing: var(--hf-ls-tight);
  margin: 0 0 var(--hf-space-4);
}
.hf-feature__title a { color: var(--hf-ink); text-decoration: none; }
.hf-feature__title a:hover { color: var(--hf-signal); }
.hf-feature__excerpt { color: var(--hf-ink-soft); margin-bottom: var(--hf-space-5); }
.hf-feature__meta {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  color: var(--hf-stone);
  letter-spacing: var(--hf-ls-wide);
  text-transform: uppercase;
  margin: 0 0 var(--hf-space-3);
}
.hf-feature__cta { margin-top: var(--hf-space-4); }
.hf-feature--pinned { background: var(--hf-paper-card); border-radius: var(--hf-radius-lg); padding: var(--hf-space-7); border: 1px solid var(--hf-rule); }
.hf-feature--pinned .hf-feature__eyebrow { color: var(--hf-signal); font-weight: var(--hf-fw-semibold); }
.hf-feature + .hf-feature { border-top: 1px solid var(--hf-rule); }

/* Share row */
.hf-share { display: flex; gap: var(--hf-space-2); align-items: center; flex-wrap: wrap; margin-top: var(--hf-space-4); }
.hf-share__label {
  font-family: var(--hf-font-sans); font-size: var(--hf-fs-xs); color: var(--hf-stone);
  letter-spacing: var(--hf-ls-wide); text-transform: uppercase;
  flex: 0 0 auto;
}
.hf-share a {
  color: var(--hf-stone);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--hf-radius-sm);
  font-family: var(--hf-font-sans); font-size: var(--hf-fs-sm);
  white-space: nowrap;
}
.hf-share a:hover { color: var(--hf-signal); background: var(--hf-signal-soft); }
@media (max-width: 500px) {
  .hf-share { gap: var(--hf-space-1); }
  .hf-share a { padding: 4px 6px; font-size: var(--hf-fs-xs); }
}

/* ============================================================================
   9. CHAPTER POST — the single most important layout on the site
   ============================================================================ */
.hf-chapter-header {
  text-align: center;
  padding: var(--hf-space-9) 0 var(--hf-space-7);
  max-width: var(--hf-measure-wide);
  margin: 0 auto;
}
.hf-chapter-header__eyebrow { color: var(--hf-signal); }
.hf-chapter-header__title {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-display);
  font-weight: var(--hf-fw-semibold);
  line-height: var(--hf-lh-tight);
  letter-spacing: var(--hf-ls-tight);
  margin: 0 0 var(--hf-space-4);
}
.hf-chapter-header__meta {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  color: var(--hf-stone);
  letter-spacing: var(--hf-ls-wide);
  text-transform: uppercase;
  margin: 0 0 var(--hf-space-5);
}
.hf-chapter-header__meta > * + * { margin-left: var(--hf-space-2); }
.hf-chapter-header__meta .sep { color: var(--hf-stone-light); }

.hf-tts-button {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  font-weight: var(--hf-fw-medium);
  color: var(--hf-signal);
  background: transparent;
  border: 1px solid var(--hf-signal);
  border-radius: var(--hf-radius-md);
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--hf-dur) var(--hf-ease);
}
.hf-tts-button:hover { background: var(--hf-signal); color: var(--hf-paper); }
.hf-tts-button svg { width: 12px; height: 12px; }
.hf-tts-button.is-playing { background: var(--hf-signal); color: var(--hf-paper); }

.hf-chapter-body {
  max-width: var(--hf-measure);
  margin: 0 auto;
  padding: var(--hf-space-6) var(--hf-space-5) var(--hf-space-9);
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  line-height: var(--hf-lh-body);
}
.hf-chapter-body p,
.hf-chapter-body ul,
.hf-chapter-body ol,
.hf-chapter-body blockquote { margin-bottom: var(--hf-space-5); }
.hf-chapter-body h2, .hf-chapter-body h3 { margin-top: var(--hf-space-7); }
.hf-chapter-body ul, .hf-chapter-body ol { padding-left: var(--hf-space-5); }
.hf-chapter-body ul li, .hf-chapter-body ol li { margin-bottom: var(--hf-space-3); }
.hf-chapter-body img { max-width: 100%; height: auto; border-radius: var(--hf-radius-lg); margin: var(--hf-space-6) 0; box-shadow: var(--hf-shadow-image); }

.hf-chapter-footer {
  max-width: var(--hf-measure);
  margin: 0 auto;
  padding: var(--hf-space-6) var(--hf-space-5);
  border-top: 1px solid var(--hf-rule);
}
.hf-chapter-footer__refs-link {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Previous / Next chapter nav */
.hf-chapter-nav {
  max-width: var(--hf-measure);
  margin: var(--hf-space-7) auto 0;
  padding: var(--hf-space-5) var(--hf-space-5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--hf-space-4);
  align-items: start;
  border-top: 1px solid var(--hf-rule);
  font-family: var(--hf-font-sans);
}
.hf-chapter-nav__item a {
  text-decoration: none;
  display: block;
  color: var(--hf-ink);
}
.hf-chapter-nav__item a:hover { color: var(--hf-signal); }
.hf-chapter-nav__item .hf-chapter-nav__direction {
  font-size: var(--hf-fs-xs);
  letter-spacing: var(--hf-ls-wide);
  text-transform: uppercase;
  color: var(--hf-stone);
  margin-bottom: 4px;
}
.hf-chapter-nav__item .hf-chapter-nav__title {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  font-weight: var(--hf-fw-semibold);
}
.hf-chapter-nav__item--prev { text-align: left; }
.hf-chapter-nav__item--next { text-align: right; }
.hf-chapter-nav__edge {
  display: flex; flex-direction: column; gap: 4px; font-size: var(--hf-fs-xs);
  color: var(--hf-stone); text-align: center;
}
.hf-chapter-nav__edge a { color: var(--hf-stone); text-decoration: none; }
.hf-chapter-nav__edge a:hover { color: var(--hf-signal); }

/* ============================================================================
   10. CHAPTER INDEX
   ============================================================================ */
.hf-chapter-index { max-width: var(--hf-measure-wide); margin: 0 auto; padding: var(--hf-space-7) var(--hf-space-5); }
.hf-chapter-index__head { text-align: center; margin-bottom: var(--hf-space-8); }
.hf-chapter-index__entry {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: var(--hf-space-5);
  align-items: start;
  padding: var(--hf-space-5) 0;
  border-bottom: 1px solid var(--hf-rule);
  text-decoration: none;
  color: var(--hf-ink);
  transition: background var(--hf-dur) var(--hf-ease);
}
.hf-chapter-index__entry:hover { background: var(--hf-signal-soft); color: var(--hf-ink); }
.hf-chapter-index__entry:hover .hf-chapter-index__title { color: var(--hf-signal); }
.hf-chapter-index__number {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xl);
  font-weight: var(--hf-fw-medium);
  color: var(--hf-stone-light);
  letter-spacing: var(--hf-ls-tight);
}
.hf-chapter-index__body { padding-right: var(--hf-space-4); }
.hf-chapter-index__title {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-lg);
  font-weight: var(--hf-fw-semibold);
  margin: 0 0 var(--hf-space-2);
  color: var(--hf-ink);
}
.hf-chapter-index__desc {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  color: var(--hf-ink-soft);
  margin: 0;
}
.hf-chapter-index__arrow {
  color: var(--hf-signal);
  font-size: var(--hf-fs-lg);
  align-self: center;
  transition: transform var(--hf-dur) var(--hf-ease);
}
.hf-chapter-index__entry:hover .hf-chapter-index__arrow { transform: translateX(4px); }

/* ============================================================================
   11. RESOURCES INDEX
   ============================================================================ */
.hf-resources { max-width: var(--hf-measure-full); margin: 0 auto; padding: var(--hf-space-7) var(--hf-space-5); }
.hf-resources__head { text-align: center; margin-bottom: var(--hf-space-8); }
.hf-resources__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hf-space-5);
  max-width: var(--hf-measure-wide);
  margin: 0 auto;
}
.hf-resources__card {
  display: block;
  background: var(--hf-paper-card);
  border: 1px solid var(--hf-rule);
  border-radius: var(--hf-radius-lg);
  padding: var(--hf-space-5) var(--hf-space-6);
  text-decoration: none;
  color: var(--hf-ink);
  position: relative;
  transition: all var(--hf-dur) var(--hf-ease);
}
.hf-resources__card:hover {
  border-color: var(--hf-signal);
  transform: translateY(-2px);
  box-shadow: var(--hf-shadow-md);
  color: var(--hf-ink);
}
.hf-resources__card-title {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-lg);
  font-weight: var(--hf-fw-semibold);
  margin: 0 0 var(--hf-space-3);
  color: var(--hf-ink);
  border-bottom: 2px solid var(--hf-signal);
  padding-bottom: var(--hf-space-2);
  display: inline-block;
}
.hf-resources__card-desc {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  color: var(--hf-ink-soft);
  margin: 0;
}
.hf-resources__card-arrow {
  position: absolute; top: var(--hf-space-5); right: var(--hf-space-6);
  color: var(--hf-signal); font-size: 1.25rem;
}

/* ============================================================================
   12. REFERENCES PAGE — chapter-grouped list with anchors
   ============================================================================ */
.hf-references { max-width: var(--hf-measure-wide); margin: 0 auto; padding: var(--hf-space-7) var(--hf-space-5); }
.hf-references__head { text-align: center; margin-bottom: var(--hf-space-8); }
.hf-references__chapter { margin: var(--hf-space-7) 0; }
.hf-references__chapter-title {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-xl);
  font-weight: var(--hf-fw-semibold);
  margin: 0 0 var(--hf-space-3);
  padding-bottom: var(--hf-space-3);
  border-bottom: 1px solid var(--hf-rule);
}
.hf-references__chapter-title a { color: var(--hf-ink); text-decoration: none; }
.hf-references__chapter-title a:hover { color: var(--hf-signal); }
.hf-references__list { list-style: none; padding: 0; margin: var(--hf-space-5) 0; counter-reset: ref-counter; }
.hf-references__list > li {
  counter-increment: ref-counter;
  position: relative;
  padding-left: 2.5rem;
  margin: var(--hf-space-4) 0;
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  line-height: var(--hf-lh-snug);
  color: var(--hf-ink);
  scroll-margin-top: 100px;
}
.hf-references__list > li::before {
  content: counter(ref-counter) ".";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--hf-font-sans);
  font-weight: var(--hf-fw-medium);
  color: var(--hf-signal);
  width: 2rem;
  text-align: right;
}
.hf-references__list > li:target { background: var(--hf-signal-soft); padding-top: var(--hf-space-2); padding-bottom: var(--hf-space-2); border-radius: var(--hf-radius-md); }

/* ============================================================================
   13. ABBREVIATIONS TABLE
   ============================================================================ */
.hf-abbreviations { max-width: var(--hf-measure-wide); margin: 0 auto; padding: var(--hf-space-7) var(--hf-space-5); }
.hf-abbreviations__head { text-align: center; margin-bottom: var(--hf-space-8); }
.hf-abbreviations__table { width: 100%; border-collapse: collapse; font-family: var(--hf-font-serif); }
.hf-abbreviations__table th {
  text-align: left;
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  font-weight: var(--hf-fw-medium);
  letter-spacing: var(--hf-ls-wide);
  text-transform: uppercase;
  color: var(--hf-stone);
  padding: var(--hf-space-3) var(--hf-space-4);
  border-bottom: 1px solid var(--hf-rule);
}
.hf-abbreviations__table td {
  padding: var(--hf-space-3) var(--hf-space-4);
  border-bottom: 1px solid var(--hf-rule);
  font-size: var(--hf-fs-base);
  vertical-align: top;
}
.hf-abbreviations__short { font-family: var(--hf-font-sans); font-weight: var(--hf-fw-semibold); color: var(--hf-signal); width: 30%; }
.hf-abbreviations__full { color: var(--hf-ink); }

/* ============================================================================
   14. PROSE BAND (About page, prose-heavy supplementary pages)
   ============================================================================ */
.hf-prose { max-width: var(--hf-measure); margin: 0 auto; padding: var(--hf-space-7) var(--hf-space-5); }
.hf-prose__head { text-align: center; margin-bottom: var(--hf-space-7); }
.hf-prose__body { font-family: var(--hf-font-serif); font-size: var(--hf-fs-base); line-height: var(--hf-lh-body); }
.hf-prose__body p { margin-bottom: var(--hf-space-5); }
.hf-prose__body h2 { margin-top: var(--hf-space-7); }

/* ============================================================================
   15. QUOTE BAND
   ============================================================================ */
.hf-quote {
  max-width: var(--hf-measure);
  margin: var(--hf-space-7) auto;
  padding: var(--hf-space-6) var(--hf-space-5);
  text-align: center;
  border-left: none;
  font-style: italic;
}
.hf-quote__text {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-md);
  line-height: var(--hf-lh-snug);
  color: var(--hf-ink);
  font-style: italic;
  margin: 0 0 var(--hf-space-3);
}
.hf-quote__attribution {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  letter-spacing: var(--hf-ls-wide);
  text-transform: uppercase;
  color: var(--hf-stone);
  font-style: normal;
}

/* ============================================================================
   16. PREFOOTER BAND — replaces the sidebar, on every page
   ============================================================================ */
.hf-prefooter {
  background: var(--hf-paper-deep);
  border-top: 1px solid var(--hf-rule);
  border-bottom: 1px solid var(--hf-rule);
  padding: var(--hf-space-8) var(--hf-space-5);
}
.hf-prefooter__inner {
  max-width: var(--hf-measure-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hf-space-8);
  align-items: start;
}
.hf-prefooter__block { text-align: left; }
.hf-prefooter__eyebrow { color: var(--hf-stone); }
.hf-prefooter__lede {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-md);
  line-height: var(--hf-lh-snug);
  color: var(--hf-ink);
  margin: 0 0 var(--hf-space-4);
}
.hf-prefooter__form { display: flex; gap: var(--hf-space-3); flex-wrap: wrap; }
.hf-prefooter__form input[type=email] {
  flex: 1; min-width: 0;
  background: var(--hf-paper);
  border: 1px solid var(--hf-rule);
  border-radius: var(--hf-radius-md);
  padding: 0.625rem 0.875rem;
  font-family: var(--hf-font-sans); font-size: var(--hf-fs-sm);
  color: var(--hf-ink);
}
.hf-prefooter__form input[type=email]:focus { outline: 2px solid var(--hf-signal); border-color: var(--hf-signal); }

/* Override MailPoet form chrome to match */
.hf-prefooter .mailpoet_form { padding: 0 !important; background: none !important; }
.hf-prefooter .mailpoet_form .mailpoet_paragraph { margin-bottom: var(--hf-space-3); }
.hf-prefooter .mailpoet_form input.mailpoet_text {
  width: 100% !important;
  background: var(--hf-paper) !important;
  border: 1px solid var(--hf-rule) !important;
  border-radius: var(--hf-radius-md) !important;
  padding: 0.625rem 0.875rem !important;
  font-family: var(--hf-font-sans) !important;
  font-size: var(--hf-fs-sm) !important;
  color: var(--hf-ink) !important;
}
.hf-prefooter .mailpoet_form input.mailpoet_submit {
  background: var(--hf-ink) !important;
  color: var(--hf-paper) !important;
  border: 1px solid var(--hf-ink) !important;
  border-radius: var(--hf-radius-md) !important;
  padding: 0.625rem 1.25rem !important;
  font-family: var(--hf-font-sans) !important;
  font-size: var(--hf-fs-sm) !important;
  font-weight: var(--hf-fw-medium) !important;
  cursor: pointer !important;
  transition: all var(--hf-dur) var(--hf-ease) !important;
}
.hf-prefooter .mailpoet_form input.mailpoet_submit:hover { background: var(--hf-signal) !important; border-color: var(--hf-signal) !important; }
.hf-prefooter .mailpoet_validate_success { color: var(--hf-signal); font-family: var(--hf-font-serif); font-style: italic; }

/* ============================================================================
   17. FOOTER — 4 column + bottom row with Flashcloud attribution + CC.
   Kadence applies its own backgrounds to multiple nested wrappers; we need to
   force every nested wrapper to ink so there are no paper gaps. */
html body .site-footer,
html body .site-footer-wrap,
html body .site-top-footer-wrap,
html body .site-bottom-footer-wrap,
html body .site-footer .site-footer-row-container,
html body .site-footer .site-footer-row-container-inner,
html body .site-footer .site-container,
html body .site-footer .site-footer-row,
html body .site-footer .site-footer-section,
html body .site-footer .footer-widget-area,
html body .site-footer .footer-widget-area-inner {
  background: var(--hf-ink) !important;
  color: var(--hf-paper);
}
html body .site-footer, html body .site-footer-wrap { padding: 0 !important; }
html body .site-footer * { color: var(--hf-paper); }
html body .site-footer a { color: var(--hf-paper); text-decoration: none; }
html body .site-footer a:hover { color: var(--hf-signal); text-decoration: underline; }
html body .site-footer h4, html body .site-footer h3 {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  letter-spacing: var(--hf-ls-eyebrow);
  text-transform: uppercase;
  color: var(--hf-stone-light);
  margin: 0 0 var(--hf-space-4);
  font-weight: var(--hf-fw-medium);
}
html body .site-footer .footer-widget-area-inner ul { list-style: none; padding: 0; margin: 0; }
html body .site-footer .footer-widget-area-inner ul li { margin-bottom: var(--hf-space-2); }
html body .site-footer .footer-widget-area-inner p { font-family: var(--hf-font-serif); font-size: var(--hf-fs-sm); margin: 0; color: rgba(244, 239, 227, 0.7); }
html body .site-footer-row-container-inner .site-footer-row { padding: var(--hf-space-7) 0 var(--hf-space-6) !important; }
html body .site-bottom-footer-wrap .site-footer-row-container-inner { padding: var(--hf-space-4) 0 !important; border-top: 1px solid rgba(244, 239, 227, 0.1); }
html body .site-bottom-footer-wrap .site-footer-row-container-inner p {
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xs);
  color: rgba(244, 239, 227, 0.55);
  margin: 0;
}
/* Footer bottom row layout — desktop side-by-side, mobile stacked */
html body .site-bottom-footer-wrap div[style*="justify-content"] { gap: var(--hf-space-4); }
@media (max-width: 600px) {
  html body .site-bottom-footer-wrap div[style*="justify-content"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: var(--hf-space-2) !important;
  }
  html body .site-bottom-footer-wrap span { display: inline-block; }
}
/* Keep CC BY-NC-SA 4.0 + the Flashcloud word as a single unbreakable unit
   so the bottom row reads as TWO neat lines instead of three. */
html body .site-bottom-footer-wrap a { white-space: nowrap; }
html body .site-bottom-footer-wrap .site-footer-row-container-inner p,
html body .site-bottom-footer-wrap span { text-wrap: balance; }
html body .site-bottom-footer-wrap a { color: rgba(244, 239, 227, 0.85); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body .site-bottom-footer-wrap a:hover { color: var(--hf-paper); }
html body .hf-cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hf-font-sans);
  font-size: var(--hf-fs-xxs);
  letter-spacing: 0.02em;
  color: rgba(244, 239, 227, 0.7);
  border: 1px solid rgba(244, 239, 227, 0.2);
  padding: 4px 8px;
  border-radius: var(--hf-radius-sm);
}

/* ============================================================================
   18. COMMENTS — calm, threaded, prose-friendly
   ============================================================================ */
.hf-comments { max-width: var(--hf-measure); margin: 0 auto; padding: var(--hf-space-7) var(--hf-space-5); }
.hf-comments__head { margin-bottom: var(--hf-space-6); }
.hf-comments__title {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-lg);
  font-weight: var(--hf-fw-semibold);
  margin: 0 0 var(--hf-space-2);
}
.hf-comments__lede {
  font-family: var(--hf-font-serif);
  font-style: italic;
  color: var(--hf-stone);
  font-size: var(--hf-fs-sm);
}
.hf-comments .comment-list { list-style: none; padding: 0; margin: 0; }
.hf-comments .comment-list .comment { padding: var(--hf-space-5) 0; border-bottom: 1px solid var(--hf-rule); }
.hf-comments .comment-list .comment .comment-meta {
  font-family: var(--hf-font-sans); font-size: var(--hf-fs-xs); color: var(--hf-stone);
  letter-spacing: var(--hf-ls-wide); text-transform: uppercase;
  margin: 0 0 var(--hf-space-3);
}
.hf-comments .comment-list .comment .comment-content,
.hf-comments .comment-list .comment .comment-text { font-family: var(--hf-font-serif); font-size: var(--hf-fs-base); line-height: var(--hf-lh-body); }
.hf-comments .comment-list .comment .reply { margin-top: var(--hf-space-3); }
.hf-comments .comment-list .comment .comment-reply-link {
  font-family: var(--hf-font-sans); font-size: var(--hf-fs-xs); color: var(--hf-signal);
  text-decoration: none; letter-spacing: var(--hf-ls-wide); text-transform: uppercase;
}
.hf-comments .comment-list .children { list-style: none; padding-left: var(--hf-space-5); border-left: 1px solid var(--hf-rule); margin-top: var(--hf-space-4); }
.hf-comments .comment-respond { margin-top: var(--hf-space-7); padding-top: var(--hf-space-6); border-top: 2px solid var(--hf-rule); }
.hf-comments .comment-respond .comment-reply-title { font-family: var(--hf-font-serif); font-size: var(--hf-fs-lg); margin-bottom: var(--hf-space-3); }
.hf-comments .comment-respond label { font-family: var(--hf-font-sans); font-size: var(--hf-fs-xs); letter-spacing: var(--hf-ls-wide); text-transform: uppercase; color: var(--hf-stone); display: block; margin-bottom: 4px; }
.hf-comments .comment-respond input[type=text],
.hf-comments .comment-respond input[type=email],
.hf-comments .comment-respond input[type=url],
.hf-comments .comment-respond textarea {
  width: 100%;
  background: var(--hf-paper-card);
  border: 1px solid var(--hf-rule);
  border-radius: var(--hf-radius-md);
  padding: 0.625rem 0.875rem;
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  color: var(--hf-ink);
  margin-bottom: var(--hf-space-4);
}
.hf-comments .comment-respond input[type=text]:focus,
.hf-comments .comment-respond input[type=email]:focus,
.hf-comments .comment-respond input[type=url]:focus,
.hf-comments .comment-respond textarea:focus { outline: 2px solid var(--hf-signal); border-color: var(--hf-signal); }
.hf-comments .comment-respond textarea { min-height: 140px; line-height: var(--hf-lh-snug); }
.hf-comments .comment-respond .submit, .hf-comments .comment-respond input[type=submit] {
  background: var(--hf-ink) !important;
  color: var(--hf-paper) !important;
  border: 1px solid var(--hf-ink) !important;
  border-radius: var(--hf-radius-md) !important;
  padding: 0.625rem 1.25rem !important;
  font-family: var(--hf-font-sans) !important;
  font-size: var(--hf-fs-sm) !important;
  cursor: pointer !important;
  transition: all var(--hf-dur) var(--hf-ease) !important;
}
.hf-comments .comment-respond .submit:hover { background: var(--hf-signal) !important; border-color: var(--hf-signal) !important; }
.hf-comments-rss {
  font-family: var(--hf-font-sans); font-size: var(--hf-fs-xs);
  letter-spacing: var(--hf-ls-wide); text-transform: uppercase;
  color: var(--hf-stone); margin: var(--hf-space-5) 0;
}
.hf-comments-rss a { color: var(--hf-signal); text-decoration: none; }
.hf-comments-rss a:hover { text-decoration: underline; }

/* ============================================================================
   19. SEARCH RESULTS
   ============================================================================ */
.hf-search-results { max-width: var(--hf-measure); margin: 0 auto; padding: var(--hf-space-7) var(--hf-space-5); }
.hf-search-results h1 { text-align: center; margin-bottom: var(--hf-space-7); }
.hf-search-results .post {
  padding: var(--hf-space-5) 0;
  border-bottom: 1px solid var(--hf-rule);
}
.hf-search-results .post .entry-title {
  display: block !important;
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-lg);
  font-weight: var(--hf-fw-semibold);
  margin: 0 0 var(--hf-space-2);
}
.hf-search-results .post .entry-title a { color: var(--hf-ink); text-decoration: none; }
.hf-search-results .post .entry-title a:hover { color: var(--hf-signal); }
.hf-search-results .post .entry-summary { color: var(--hf-ink-soft); font-size: var(--hf-fs-base); }

/* ============================================================================
   20. RESPONSIVE — mobile-first per the playbook
   ============================================================================ */
@media (max-width: 900px) {
  :root { --hf-fs-base: 1rem; }
  .hf-prefooter__inner { grid-template-columns: 1fr; gap: var(--hf-space-7); }
  .hf-resources__grid { grid-template-columns: 1fr; }
  .hf-section { padding: var(--hf-space-7) 0; }
  .hf-section--hero { padding: var(--hf-space-8) 0 var(--hf-space-6); }
  .hf-feature--pinned { padding: var(--hf-space-5); }
  .hf-chapter-header { padding: var(--hf-space-7) 0 var(--hf-space-5); }
  .hf-chapter-body { padding: var(--hf-space-5) var(--hf-space-4) var(--hf-space-7); }
  .hf-chapter-nav { grid-template-columns: 1fr; gap: var(--hf-space-3); text-align: center; }
  .hf-chapter-nav__item--prev, .hf-chapter-nav__item--next { text-align: center; }
  .hf-chapter-index__entry { grid-template-columns: 40px 1fr; gap: var(--hf-space-3); }
  .hf-chapter-index__arrow { display: none; }
}

@media (max-width: 600px) {
  :root { --hf-header-h: var(--hf-header-h-mobile); }
  .hf-hero-statement { padding: var(--hf-space-7) 0 var(--hf-space-5); }
  .hf-questions { padding: var(--hf-space-5) 0; }
  .hf-questions__list { font-size: var(--hf-fs-base); line-height: 1.85; }
  .hf-chapter-header__title, .hf-hero-statement__wordmark { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .hf-abbreviations__table th, .hf-abbreviations__table td { padding: var(--hf-space-2) var(--hf-space-3); font-size: var(--hf-fs-sm); }
  .hf-references__list > li { padding-left: 2rem; }
  .hf-prefooter { padding: var(--hf-space-7) var(--hf-space-4); }
}

/* ============================================================================
   DEFINITIONS LIST (Definitions page — canonical glossary store)
   ============================================================================ */
.hf-definitions { max-width: var(--hf-measure); margin: 0 auto; padding: var(--hf-space-7) var(--hf-space-5); }
.hf-definitions__head { text-align: center; margin-bottom: var(--hf-space-8); }
.hf-definitions__list { margin: 0; }
.hf-definitions__item {
  padding: var(--hf-space-5) 0;
  border-bottom: 1px solid var(--hf-rule);
  scroll-margin-top: 6rem;
}
.hf-definitions__item:first-child { padding-top: 0; }
.hf-definitions__item:last-child { border-bottom: none; }
.hf-definitions__term {
  font-family: var(--hf-font-sans);
  font-weight: var(--hf-fw-semibold);
  font-size: var(--hf-fs-md);
  color: var(--hf-signal);
  margin: 0 0 var(--hf-space-2);
}
.hf-definitions__body {
  font-family: var(--hf-font-serif);
  font-size: var(--hf-fs-base);
  line-height: var(--hf-lh-body);
  color: var(--hf-ink);
  margin: 0;
}
.hf-definitions__body p { margin: 0 0 var(--hf-space-3); }
.hf-definitions__body p:last-child { margin-bottom: 0; }
/* Highlight a definition when a chapter links straight to it (#slug) */
.hf-definitions__item:target {
  background: var(--hf-signal-soft);
  border-radius: var(--hf-radius, 8px);
  padding-left: var(--hf-space-4);
  padding-right: var(--hf-space-4);
  margin: 0 calc(-1 * var(--hf-space-4));
}

/* In-chapter definition links (auto-inserted from the central glossary tool) */
.hf-deflink {
  color: var(--hf-ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--hf-signal);
  cursor: help;
}
.hf-deflink:hover { color: var(--hf-signal); border-bottom-style: solid; }

/* Citation superscript markers (inserted by the editor Citation button) */
a.hf-ref-marker, .hf-ref-marker { font-size: 0.7em; line-height: 0; vertical-align: super; color: var(--hf-signal); text-decoration: none; padding: 0 1px; }
a.hf-ref-marker:hover { text-decoration: underline; }
.hf-chapter-link { color: var(--hf-signal); text-decoration: none; border-bottom: 1px solid var(--hf-signal-soft); }
.hf-chapter-link:hover { border-bottom-color: var(--hf-signal); }