/* ls_grid.css — DG4 directory/grid pages: /states + /topics hubs
   and the 25 topic directory pages (ChaosToOrder CO-3). */
  /* Hide the Source theme chrome + injected site furniture on this page only,
     so the DG4 block renders full-bleed with its own header/nav.
     Deliberately NOT hidden: .hw-notice-bar (the sticky "not legal advice"
     bar) — it should appear on this page like everywhere else.
     .hw-footer-note is hidden because the DG4 block has its own footer with
     the same copyright line. */
  .gh-navigation, .gh-footer,
  .gh-article-header, .gh-article-image,
  .hw-article-note, .hw-footer-note, .site-copyright-notice,
  #hw-toc, .last-updated { display: none !important; }

  body { background: #0b0e14; }

  /* The legal disclaimer bar's skin USED TO BE OVERRIDDEN HERE. Deleted
     2026-08-19: it now has exactly ONE home, website/assets/css/ls_notice.css,
     which the build links into every served page — including this family's.
     That file also owns the FREEZE (position:sticky), which no family sheet
     ever set. Do not re-add .hw-notice-bar rules here. */
  .gh-main, .gh-article { padding: 0 !important; margin: 0 !important; }
  .gh-content.gh-canvas {
    display: block !important;
    max-width: none !important;
    padding: 0 !important; margin: 0 !important;
  }
  .gh-content.gh-canvas > * { margin: 0 !important; max-width: none !important; }
/* ============ HW DG4 TOPIC PAGE ============ */
#hw-topic, #hw-topic * { box-sizing: border-box; margin: 0; padding: 0; }
#hw-topic {
  --bg: #0b0e14;
  --bg-deep: #080a0f;
  --bg-panel: rgba(19, 24, 34, 0.82);
  --gold: #ac7d46;
  --gold-bright: #e0a04c;
  --gold-dim: rgba(172, 125, 70, 0.55);
  --ink: #f4f1e9;
  --ink-dim: #aab1bd;
  --ink-faint: #7e8694;
  --hairline: rgba(255, 255, 255, 0.08);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#hw-topic a { text-decoration: none; color: inherit; }
#hw-topic .hw-wrap { max-width: 1480px; margin: 0 auto; padding: 0 44px; }
#hw-topic .hw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); display: inline-block; flex: none;
  box-shadow: 0 0 6px rgba(172, 125, 70, 0.8);
}

/* ---------- header ---------- */
#hw-topic .hw-header {
  display: flex; align-items: center;
  padding-top: 22px; padding-bottom: 22px;
}
#hw-topic .hw-logo { display: flex; align-items: baseline; gap: 10px; }
#hw-topic .hw-logo .hw-logo-hoa {
  font-family: var(--serif); font-weight: 700;
  font-size: 34px; letter-spacing: 0.01em; color: #fff; line-height: 1;
}
#hw-topic .hw-logo .hw-logo-weekly {
  font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
#hw-topic .hw-nav {
  display: flex; gap: 38px; margin-left: 92px;
  font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500;
}
#hw-topic .hw-nav a { color: rgba(244, 241, 233, 0.92); padding: 6px 0; }
#hw-topic .hw-nav a:hover { color: var(--gold-bright); }
#hw-topic .hw-nav a.hw-nav-here { color: var(--gold); }
#hw-topic .hw-header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
#hw-topic .hw-search-btn { display: inline-flex; color: rgba(244, 241, 233, 0.9); cursor: pointer; }
#hw-topic .hw-signin { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500; color: rgba(244, 241, 233, 0.92); }
#hw-topic .hw-header-div { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.22); }
#hw-topic .hw-btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold); color: #fff;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 12px 24px; border-radius: 4px; border: none; cursor: pointer;
  font-family: var(--sans);
}
#hw-topic .hw-btn-gold:hover { background: var(--gold-bright); }

/* ---------- page hero ---------- */
#hw-topic .hw-hero {
  position: relative;
  background:
    radial-gradient(ellipse 900px 420px at 78% -10%, rgba(172, 125, 70, 0.07), rgba(172, 125, 70, 0) 60%),
    var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#hw-topic .hw-hero-body { padding-top: 40px; padding-bottom: 46px; }
#hw-topic .hw-eyebrow {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
#hw-topic .hw-eyebrow-rule { width: 54px; height: 2px; background: var(--gold); margin-top: 14px; }
#hw-topic .hw-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 47px; line-height: 1.15; letter-spacing: 0.002em;
  color: #fbf9f4; margin-top: 22px;
}
#hw-topic .hw-intro p + p { margin-top: 12px; }
#hw-topic .hw-intro {
  font-size: 17.5px; line-height: 1.62; color: var(--ink-dim);
  max-width: 880px; margin-top: 20px;
}

/* ---------- section header (shared by the directory h2) ---------- */
#hw-topic .hw-updates-head { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
#hw-topic .hw-updates-title {
  font-size: 13.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
#hw-topic h2.hw-updates-title { border: 0; }
#hw-topic .hw-updates-rule { width: 62px; height: 1px; background: rgba(172, 125, 70, 0.6); }
/* ---------- state directory (map + grid) ---------- */
#hw-topic .hw-section { background: #0a0c10; padding: 50px 0 56px; }
#hw-topic .hw-states-lay { display: grid; grid-template-columns: 43% 1fr; gap: 52px; align-items: center; }
#hw-topic .hw-states-map .hw-map-svg { width: 100%; height: auto; display: block; }
#hw-topic .hw-map-svg circle { fill: #ac7d46; transition: opacity 0.35s ease; }
#hw-topic .hw-map-svg g { transition: filter 0.3s ease; }
/* the lit state blazes brighter — the rest of the country stays lit as-is */
#hw-topic .hw-map-svg g.hw-lit { filter: drop-shadow(0 0 7px rgba(240, 198, 116, 1)) drop-shadow(0 0 18px rgba(224, 160, 76, 0.55)); }
#hw-topic .hw-map-svg g.hw-lit circle {
  fill: #ffe6ad;
  animation: hw-ignite 0.55s ease-out both;
}
#hw-topic .hw-map-svg g.hw-lit circle:nth-child(2n) { animation-delay: 0.05s; }
#hw-topic .hw-map-svg g.hw-lit circle:nth-child(3n) { animation-delay: 0.1s; }
#hw-topic .hw-map-svg g.hw-lit circle:nth-child(5n) { animation-delay: 0.16s; }
@keyframes hw-ignite {
  0%   { opacity: 0.15; }
  25%  { opacity: 1; }
  40%  { opacity: 0.4; }
  60%  { opacity: 1; }
  78%  { opacity: 0.75; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #hw-topic .hw-map-svg g.hw-lit circle { animation: none; opacity: 1; }
}
#hw-topic .hw-states-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; }
#hw-topic .hw-state-link {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 11px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14.5px; color: rgba(244, 241, 233, 0.92);
}
#hw-topic .hw-state-link svg { flex: none; color: var(--gold); opacity: 0.85; }
#hw-topic .hw-state-link:hover { color: var(--gold-bright); }

/* ---------- footer ---------- */
#hw-topic .hw-footer {
  background: #07090d; border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 42px 0 26px; text-align: center;
}
#hw-topic .hw-footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px;
  font-size: 13.5px; font-weight: 500; color: rgba(244, 241, 233, 0.9);
}
#hw-topic .hw-footer-nav a:hover { color: var(--gold-bright); }
/* footer wordmark: identical to the header logo (same font, size, kerning) */
#hw-topic .hw-footer-logo { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 34px; }
#hw-topic .hw-footer-tag { font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); max-width: 620px; margin: 14px auto 0; }
#hw-topic .hw-footer-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 430px; margin: 24px auto 0; }
#hw-topic .hw-footer-form input {
  flex: 1; min-width: 0;
  background: #0d1118; color: rgba(244, 241, 233, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px;
  font-family: var(--sans); font-size: 14.5px; padding: 12px 16px;
}
#hw-topic .hw-footer-form input::placeholder { color: var(--ink-faint); }
#hw-topic .hw-footer-form input:focus { outline: 2px solid var(--gold-dim); outline-offset: 1px; }
#hw-topic .hw-form-msg { display: none; font-size: 13px; margin-top: 10px; width: 100%; }
#hw-topic form.success .hw-form-success { display: block; color: var(--gold); }
#hw-topic form.error .hw-form-error { display: block; color: #e0876a; }
#hw-topic .hw-footer-legal { font-size: 13px; line-height: 1.6; color: var(--ink-faint); margin-top: 26px; }
#hw-topic .hw-footer-legal a { text-decoration: underline; text-underline-offset: 2px; }
#hw-topic .hw-footer-legal a:hover { color: var(--gold-bright); }
#hw-topic .hw-footer-copy { font-size: 12.5px; color: #67707e; margin-top: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  #hw-topic .hw-nav { margin-left: 48px; gap: 26px; }
  #hw-topic .hw-h1 { font-size: 40px; }
}
@media (max-width: 980px) {
  #hw-topic .hw-nav { display: none; }
  #hw-topic .hw-states-lay { grid-template-columns: 1fr; gap: 34px; }
  #hw-topic .hw-states-map { max-width: 560px; margin: 0 auto; }
  #hw-topic .hw-states-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  #hw-topic .hw-wrap { padding: 0 22px; }
  #hw-topic .hw-h1 { font-size: 31px; }
  #hw-topic .hw-hero-body { padding-top: 30px; padding-bottom: 36px; }
  #hw-topic .hw-header-div { display: none; }
  #hw-topic .hw-header-right .hw-signin { display: none; }
  #hw-topic .hw-header-right { gap: 14px; }
  #hw-topic .hw-header .hw-btn-gold { padding: 11px 16px; }
  #hw-topic .hw-states-grid { grid-template-columns: repeat(2, 1fr); }
  #hw-topic .hw-footer-nav { gap: 12px 22px; }
}
/* ============ HW DG4 ALL STATES ============ */
#hw-states, #hw-states * { box-sizing: border-box; margin: 0; padding: 0; }
#hw-states {
  --bg: #0b0e14;
  --bg-deep: #080a0f;
  --bg-panel: rgba(19, 24, 34, 0.82);
  --gold: #ac7d46;
  --gold-bright: #e0a04c;
  --gold-dim: rgba(172, 125, 70, 0.55);
  --ink: #f4f1e9;
  --ink-dim: #aab1bd;
  --ink-faint: #7e8694;
  --hairline: rgba(255, 255, 255, 0.08);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#hw-states a { text-decoration: none; color: inherit; }
#hw-states .hw-wrap { max-width: 1480px; margin: 0 auto; padding: 0 44px; }
#hw-states .hw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); display: inline-block; flex: none;
  box-shadow: 0 0 6px rgba(172, 125, 70, 0.8);
}

/* ---------- header ---------- */
#hw-states .hw-header {
  display: flex; align-items: center;
  padding-top: 22px; padding-bottom: 22px;
}
#hw-states .hw-logo { display: flex; align-items: baseline; gap: 10px; }
#hw-states .hw-logo .hw-logo-hoa {
  font-family: var(--serif); font-weight: 700;
  font-size: 34px; letter-spacing: 0.01em; color: #fff; line-height: 1;
}
#hw-states .hw-logo .hw-logo-weekly {
  font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
#hw-states .hw-nav {
  display: flex; gap: 38px; margin-left: 92px;
  font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500;
}
#hw-states .hw-nav a { color: rgba(244, 241, 233, 0.92); padding: 6px 0; }
#hw-states .hw-nav a:hover { color: var(--gold-bright); }
#hw-states .hw-nav a.hw-nav-here { color: var(--gold); }
#hw-states .hw-header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
#hw-states .hw-search-btn { display: inline-flex; color: rgba(244, 241, 233, 0.9); cursor: pointer; }
#hw-states .hw-signin { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500; color: rgba(244, 241, 233, 0.92); }
#hw-states .hw-header-div { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.22); }
#hw-states .hw-btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold); color: #fff;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 12px 24px; border-radius: 4px; border: none; cursor: pointer;
  font-family: var(--sans);
}
#hw-states .hw-btn-gold:hover { background: var(--gold-bright); }

/* ---------- page hero ---------- */
#hw-states .hw-hero {
  position: relative;
  background:
    radial-gradient(ellipse 900px 420px at 78% -10%, rgba(172, 125, 70, 0.07), rgba(172, 125, 70, 0) 60%),
    var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#hw-states .hw-hero-body { padding-top: 40px; padding-bottom: 46px; }
#hw-states .hw-eyebrow {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
#hw-states .hw-eyebrow-rule { width: 54px; height: 2px; background: var(--gold); margin-top: 14px; }
#hw-states .hw-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 47px; line-height: 1.15; letter-spacing: 0.002em;
  color: #fbf9f4; margin-top: 22px;
}
#hw-states .hw-intro {
  font-size: 17.5px; line-height: 1.62; color: var(--ink-dim);
  max-width: 880px; margin-top: 20px;
}

/* ---------- coverage stats ---------- */
#hw-states .hw-statstrip { background: #0a0c10; padding: 44px 0 10px; }
#hw-states .hw-updates-head { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
#hw-states .hw-updates-title {
  font-size: 13.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
#hw-states .hw-updates-rule { width: 62px; height: 1px; background: rgba(172, 125, 70, 0.6); }
#hw-states .hw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
#hw-states .hw-stat {
  padding: 20px 18px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#hw-states .hw-stat-num {
  font-family: var(--serif); font-size: 34px; line-height: 1; color: #f5f2ea;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#hw-states .hw-stat-num svg { color: var(--gold); opacity: 0.85; flex: none; }
#hw-states .hw-stat-suffix { font-size: 19px; color: var(--ink-dim); margin-left: -2px; align-self: flex-end; }
#hw-states .hw-stat-numwrap { display: inline-flex; align-items: baseline; gap: 5px; }
#hw-states .hw-stat-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-top: 9px;
}
#hw-states .hw-stat-desc { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); margin-top: 8px; }

/* ---------- state directory (map + grid) ---------- */
#hw-states .hw-section { background: #0a0c10; padding: 50px 0 56px; }
#hw-states .hw-states-lay { display: grid; grid-template-columns: 43% 1fr; gap: 52px; align-items: center; }
#hw-states .hw-states-map .hw-map-svg { width: 100%; height: auto; display: block; }
#hw-states .hw-map-svg circle { fill: #ac7d46; transition: opacity 0.35s ease; }
#hw-states .hw-map-svg g { transition: filter 0.3s ease; }
/* the lit state blazes brighter — the rest of the country stays lit as-is */
#hw-states .hw-map-svg g.hw-lit { filter: drop-shadow(0 0 7px rgba(240, 198, 116, 1)) drop-shadow(0 0 18px rgba(224, 160, 76, 0.55)); }
#hw-states .hw-map-svg g.hw-lit circle {
  fill: #ffe6ad;
  animation: hw-ignite 0.55s ease-out both;
}
#hw-states .hw-map-svg g.hw-lit circle:nth-child(2n) { animation-delay: 0.05s; }
#hw-states .hw-map-svg g.hw-lit circle:nth-child(3n) { animation-delay: 0.1s; }
#hw-states .hw-map-svg g.hw-lit circle:nth-child(5n) { animation-delay: 0.16s; }
@keyframes hw-ignite {
  0%   { opacity: 0.15; }
  25%  { opacity: 1; }
  40%  { opacity: 0.4; }
  60%  { opacity: 1; }
  78%  { opacity: 0.75; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #hw-states .hw-map-svg g.hw-lit circle { animation: none; opacity: 1; }
}
#hw-states .hw-states-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; }
#hw-states .hw-state-link {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 11px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14.5px; color: rgba(244, 241, 233, 0.92);
}
#hw-states .hw-state-link svg { flex: none; color: var(--gold); opacity: 0.85; }
#hw-states .hw-state-link:hover { color: var(--gold-bright); }

/* ---------- footer ---------- */
#hw-states .hw-footer {
  background: #07090d; border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 42px 0 26px; text-align: center;
}
#hw-states .hw-footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px;
  font-size: 13.5px; font-weight: 500; color: rgba(244, 241, 233, 0.9);
}
#hw-states .hw-footer-nav a:hover { color: var(--gold-bright); }
/* footer wordmark: identical to the header logo (same font, size, kerning) */
#hw-states .hw-footer-logo { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 34px; }
#hw-states .hw-footer-tag { font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); max-width: 620px; margin: 14px auto 0; }
#hw-states .hw-footer-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 430px; margin: 24px auto 0; }
#hw-states .hw-footer-form input {
  flex: 1; min-width: 0;
  background: #0d1118; color: rgba(244, 241, 233, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px;
  font-family: var(--sans); font-size: 14.5px; padding: 12px 16px;
}
#hw-states .hw-footer-form input::placeholder { color: var(--ink-faint); }
#hw-states .hw-footer-form input:focus { outline: 2px solid var(--gold-dim); outline-offset: 1px; }
#hw-states .hw-form-msg { display: none; font-size: 13px; margin-top: 10px; width: 100%; }
#hw-states form.success .hw-form-success { display: block; color: var(--gold); }
#hw-states form.error .hw-form-error { display: block; color: #e0876a; }
#hw-states .hw-footer-legal { font-size: 13px; line-height: 1.6; color: var(--ink-faint); margin-top: 26px; }
#hw-states .hw-footer-legal a { text-decoration: underline; text-underline-offset: 2px; }
#hw-states .hw-footer-legal a:hover { color: var(--gold-bright); }
#hw-states .hw-footer-copy { font-size: 12.5px; color: #67707e; margin-top: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  #hw-states .hw-nav { margin-left: 48px; gap: 26px; }
  #hw-states .hw-h1 { font-size: 40px; }
}
@media (max-width: 980px) {
  #hw-states .hw-nav { display: none; }
  #hw-states .hw-states-lay { grid-template-columns: 1fr; gap: 34px; }
  #hw-states .hw-states-map { max-width: 560px; margin: 0 auto; }
  #hw-states .hw-states-grid { grid-template-columns: repeat(3, 1fr); }
  #hw-states .hw-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  #hw-states .hw-wrap { padding: 0 22px; }
  #hw-states .hw-h1 { font-size: 31px; }
  #hw-states .hw-hero-body { padding-top: 30px; padding-bottom: 36px; }
  #hw-states .hw-header-div { display: none; }
  #hw-states .hw-header-right .hw-signin { display: none; }
  #hw-states .hw-header-right { gap: 14px; }
  #hw-states .hw-header .hw-btn-gold { padding: 11px 16px; }
  #hw-states .hw-states-grid { grid-template-columns: repeat(2, 1fr); }
  #hw-states .hw-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #hw-states .hw-stat-num { font-size: 28px; }
  #hw-states .hw-footer-nav { gap: 12px 22px; }
}
/* ============ HW DG4 TOPICS ============ */
#hw-topics, #hw-topics * { box-sizing: border-box; margin: 0; padding: 0; }
#hw-topics {
  --bg: #0b0e14;
  --bg-deep: #080a0f;
  --bg-panel: rgba(19, 24, 34, 0.82);
  --gold: #ac7d46;
  --gold-bright: #e0a04c;
  --gold-dim: rgba(172, 125, 70, 0.55);
  --ink: #f4f1e9;
  --ink-dim: #aab1bd;
  --ink-faint: #7e8694;
  --hairline: rgba(255, 255, 255, 0.08);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#hw-topics a { text-decoration: none; color: inherit; }
#hw-topics .hw-wrap { max-width: 1480px; margin: 0 auto; padding: 0 44px; }
#hw-topics .hw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); display: inline-block; flex: none;
  box-shadow: 0 0 6px rgba(172, 125, 70, 0.8);
}

/* ---------- header ---------- */
#hw-topics .hw-header {
  display: flex; align-items: center;
  padding-top: 22px; padding-bottom: 22px;
}
#hw-topics .hw-logo { display: flex; align-items: baseline; gap: 10px; }
#hw-topics .hw-logo .hw-logo-hoa {
  font-family: var(--serif); font-weight: 700;
  font-size: 34px; letter-spacing: 0.01em; color: #fff; line-height: 1;
}
#hw-topics .hw-logo .hw-logo-weekly {
  font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
#hw-topics .hw-nav {
  display: flex; gap: 38px; margin-left: 92px;
  font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500;
}
#hw-topics .hw-nav a { color: rgba(244, 241, 233, 0.92); padding: 6px 0; }
#hw-topics .hw-nav a:hover { color: var(--gold-bright); }
#hw-topics .hw-nav a.hw-nav-here { color: var(--gold); }
#hw-topics .hw-header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
#hw-topics .hw-search-btn { display: inline-flex; color: rgba(244, 241, 233, 0.9); cursor: pointer; }
#hw-topics .hw-signin { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 500; color: rgba(244, 241, 233, 0.92); }
#hw-topics .hw-header-div { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.22); }
#hw-topics .hw-btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold); color: #fff;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 12px 24px; border-radius: 4px; border: none; cursor: pointer;
  font-family: var(--sans);
}
#hw-topics .hw-btn-gold:hover { background: var(--gold-bright); }

/* ---------- page hero ---------- */
#hw-topics .hw-hero {
  position: relative;
  background:
    radial-gradient(ellipse 900px 420px at 78% -10%, rgba(172, 125, 70, 0.07), rgba(172, 125, 70, 0) 60%),
    var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#hw-topics .hw-hero-body { padding-top: 34px; padding-bottom: 56px; }
#hw-topics .hw-hero-lay {
  display: grid; grid-template-columns: 1fr 43%;
  grid-template-areas: "intro sky" "groups sky";
  column-gap: 56px; align-items: start;
}
#hw-topics .hw-hero-intro { grid-area: intro; }
#hw-topics .hw-topics-sky { grid-area: sky; position: sticky; top: 64px; }
#hw-topics .hw-topic-groups { grid-area: groups; margin-top: 36px; }
#hw-topics .hw-eyebrow {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
#hw-topics .hw-eyebrow-rule { width: 54px; height: 2px; background: var(--gold); margin-top: 14px; }
#hw-topics .hw-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 47px; line-height: 1.15; letter-spacing: 0.002em;
  color: #fbf9f4; margin-top: 22px;
}
#hw-topics .hw-intro {
  font-size: 17.5px; line-height: 1.62; color: var(--ink-dim);
  max-width: 880px; margin-top: 20px;
}
#hw-topics .hw-intro a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
#hw-topics .hw-intro a:hover { color: var(--gold-bright); }

/* ---------- the community of lights (dot-matrix skyline) ----------
   Same visual language as the homepage/states dot-map: gold circles,
   r 2.1/2.4, random opacity. Hovering a topic ignites its floor's
   windows; hovering a category header ignites the whole building —
   identical blaze to the map's state hover. */
#hw-topics .hw-topics-sky .hw-sky-svg { width: 100%; height: auto; display: block; }
#hw-topics .hw-sky-svg circle { fill: #ac7d46; }
#hw-topics .hw-sky-svg .hw-skydot { animation: hw-twinkle 6.5s ease-in-out infinite; }
@keyframes hw-twinkle {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.08; }
}
#hw-topics .hw-sky-svg .hw-floor { transition: filter 0.3s ease; }
#hw-topics .hw-sky-svg .hw-floor-hit { fill: none; pointer-events: all; }
#hw-topics .hw-sky-svg .hw-floor.hw-lit { filter: drop-shadow(0 0 7px rgba(240, 198, 116, 1)) drop-shadow(0 0 18px rgba(224, 160, 76, 0.55)); }
#hw-topics .hw-sky-svg .hw-floor.hw-lit circle {
  fill: #ffe6ad;
  animation: hw-ignite 0.55s ease-out both;
}
#hw-topics .hw-sky-svg .hw-floor.hw-lit circle:nth-child(2n) { animation-delay: 0.05s; }
#hw-topics .hw-sky-svg .hw-floor.hw-lit circle:nth-child(3n) { animation-delay: 0.1s; }
#hw-topics .hw-sky-svg .hw-floor.hw-lit circle:nth-child(5n) { animation-delay: 0.16s; }
#hw-topics .hw-sky-svg .hw-blabel {
  font-family: var(--sans); font-size: 9px; letter-spacing: 0.14em;
  font-weight: 600; fill: rgba(172, 125, 70, 0.55);
  transition: fill 0.3s ease;
}
#hw-topics .hw-sky-svg .hw-bldg.hw-lit-b .hw-blabel { fill: rgba(240, 198, 116, 0.95); }
@keyframes hw-ignite {
  0%   { opacity: 0.15; }
  25%  { opacity: 1; }
  40%  { opacity: 0.4; }
  60%  { opacity: 1; }
  78%  { opacity: 0.75; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #hw-topics .hw-sky-svg .hw-skydot { animation: none; }
  #hw-topics .hw-sky-svg .hw-floor.hw-lit circle { animation: none; opacity: 1; }
}

/* ---------- section headers (stat strip) ---------- */
#hw-topics .hw-updates-head { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
#hw-topics .hw-updates-title {
  font-size: 13.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
#hw-topics .hw-updates-rule { width: 62px; height: 1px; background: rgba(172, 125, 70, 0.6); }

#hw-topics .hw-tgroup { margin-bottom: 26px; }
#hw-topics .hw-tgroup:last-child { margin-bottom: 0; }
#hw-topics .hw-tgroup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
#hw-topics .hw-tgroup-label {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
#hw-topics .hw-tgroup-count {
  font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-faint); font-weight: 600;
}
#hw-topics .hw-tgroup-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 30px; }
#hw-topics .hw-topic-link {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14.5px; color: rgba(244, 241, 233, 0.92);
}
#hw-topics .hw-topic-link svg { flex: none; color: var(--gold); opacity: 0.85; }
#hw-topics .hw-topic-link:hover { color: var(--gold-bright); }
#hw-topics .hw-topic-link.hw-hot { color: var(--gold); }

/* ---------- coverage at a glance (figures from the page content) ---------- */
#hw-topics .hw-statstrip { background: #0a0c10; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 44px 0 52px; }
#hw-topics .hw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
#hw-topics .hw-stat {
  padding: 20px 18px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#hw-topics .hw-stat-num {
  font-family: var(--serif); font-size: 34px; line-height: 1; color: #f5f2ea;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#hw-topics .hw-stat-num svg { color: var(--gold); opacity: 0.85; flex: none; }
#hw-topics .hw-stat-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-top: 9px;
}
#hw-topics .hw-stat-desc { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); margin-top: 8px; }

/* ---------- footer ---------- */
#hw-topics .hw-footer {
  background: #07090d; border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 42px 0 26px; text-align: center;
}
#hw-topics .hw-footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px;
  font-size: 13.5px; font-weight: 500; color: rgba(244, 241, 233, 0.9);
}
#hw-topics .hw-footer-nav a:hover { color: var(--gold-bright); }
/* footer wordmark: identical to the header logo (same font, size, kerning) */
#hw-topics .hw-footer-logo { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 34px; }
#hw-topics .hw-footer-tag { font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); max-width: 620px; margin: 14px auto 0; }
#hw-topics .hw-footer-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 430px; margin: 24px auto 0; }
#hw-topics .hw-footer-form input {
  flex: 1; min-width: 0;
  background: #0d1118; color: rgba(244, 241, 233, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px;
  font-family: var(--sans); font-size: 14.5px; padding: 12px 16px;
}
#hw-topics .hw-footer-form input::placeholder { color: var(--ink-faint); }
#hw-topics .hw-footer-form input:focus { outline: 2px solid var(--gold-dim); outline-offset: 1px; }
#hw-topics .hw-form-msg { display: none; font-size: 13px; margin-top: 10px; width: 100%; }
#hw-topics form.success .hw-form-success { display: block; color: var(--gold-bright); }
#hw-topics form.error .hw-form-error { display: block; color: #e0876a; }
#hw-topics .hw-footer-legal { font-size: 13px; line-height: 1.6; color: var(--ink-faint); margin-top: 26px; }
#hw-topics .hw-footer-legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
#hw-topics .hw-footer-legal a:hover { color: var(--gold-bright); }
#hw-topics .hw-footer-copy { font-size: 12.5px; color: #67707e; margin-top: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  #hw-topics .hw-nav { margin-left: 48px; gap: 26px; }
  #hw-topics .hw-h1 { font-size: 40px; }
  #hw-topics .hw-hero-lay { column-gap: 38px; grid-template-columns: 1fr 42%; }
}
@media (max-width: 980px) {
  #hw-topics .hw-nav { display: none; }
  #hw-topics .hw-hero-lay { grid-template-columns: 1fr; grid-template-areas: "intro" "sky" "groups"; }
  #hw-topics .hw-topics-sky { position: static; max-width: 560px; margin: 30px auto 0; width: 100%; }
  #hw-topics .hw-topic-groups { margin-top: 30px; }
  #hw-topics .hw-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  #hw-topics .hw-wrap { padding: 0 22px; }
  #hw-topics .hw-h1 { font-size: 31px; }
  #hw-topics .hw-hero-body { padding-top: 30px; padding-bottom: 36px; }
  #hw-topics .hw-header-div { display: none; }
  #hw-topics .hw-header-right .hw-signin { display: none; }
  #hw-topics .hw-header-right { gap: 14px; }
  #hw-topics .hw-header .hw-btn-gold { padding: 11px 16px; }
  #hw-topics .hw-tgroup-grid { grid-template-columns: 1fr; }
  #hw-topics .hw-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  #hw-topics .hw-stat-num { font-size: 28px; }
  #hw-topics .hw-footer-nav { gap: 12px 22px; }
}
.hw-ticker-mirror {
  background: #050608;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #f4f1e9;
}
/* margin/padding carry !important so this snippet survives inside any
   page's `#hw-<page> *` reset (ID specificity beats these class rules) */
.hw-ticker-mirror .hw-ticker-in {
  display: flex; align-items: center; gap: 0;
  min-height: 40px;
  max-width: 1480px; margin: 0 auto !important; padding: 0 44px !important;
}
.hw-ticker-mirror .hw-ticker-seg { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hw-ticker-mirror .hw-ticker-seg + .hw-ticker-seg {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  margin-left: 22px !important; padding-left: 22px !important;
}
.hw-ticker-mirror .hw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ac7d46; display: inline-block; flex: none;
  box-shadow: 0 0 6px rgba(172, 125, 70, 0.8);
}
.hw-ticker-mirror .hw-gold-caps { color: #ac7d46; text-transform: uppercase; font-weight: 600; }
.hw-ticker-mirror .hw-date { color: rgba(244, 241, 233, 0.85); text-transform: uppercase; }
.hw-ticker-mirror .hw-sep { color: rgba(244, 241, 233, 0.35); }
.hw-ticker-mirror .hw-ticker-news { color: rgba(244, 241, 233, 0.75); letter-spacing: 0.015em; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.hw-ticker-mirror .hw-ticker-spacer { flex: 1; min-width: 20px; }
/* link color also carries !important: pages set `#hw-<page> a { color:
   inherit }` (ID specificity), which would turn this gold link white */
.hw-ticker-mirror .hw-arrow-link { color: #ac7d46 !important; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.hw-ticker-mirror .hw-arrow-link:hover { color: #e0a04c !important; }
.hw-ticker-mirror .hw-arrow-link svg { flex: none; }
@media (max-width: 980px) {
  .hw-ticker-mirror .hw-ticker-seg.hw-ticker-newswrap,
  .hw-ticker-mirror .hw-ticker-seg.hw-ticker-view { display: none; }
}
@media (max-width: 720px) {
  .hw-ticker-mirror .hw-ticker-in { padding: 0 22px !important; }
}