/*
 * KG Design System — the shared stylesheet for graceyrealestate.com.
 *
 * Loaded site-wide by mu-plugins/kg-design.php. EVERY rule is scoped under
 * .kg, so this file changes nothing until a page wraps its content in
 * <div class="kg">. Pages are converted one at a time; unconverted pages keep
 * their own inline <style> and are unaffected.
 *
 * Tokens are --kg-* and live on .kg, not :root. Older pages declare
 * :root { --navy; --gold; … } inline, and those must not collide with these.
 *
 * Source of truth is the repo (theme/); deploy with `npm run deploy:design`.
 */

/* ---------- Tokens & base ---------- */

.kg {
  --kg-navy: #002244;
  --kg-navy-deep: #001a35;
  --kg-gold: #f4b400;
  --kg-gold-text: #8a6400;   /* gold that passes 4.5:1 on white */
  --kg-ink: #1b2433;
  --kg-body: #3a4556;
  --kg-muted: #556070;
  --kg-paper: #f5f7fa;
  --kg-tint: #e8eef6;
  --kg-line: #e3e7ec;
  --kg-line-strong: #d5dce5;
  --kg-on-navy: #dbe3ee;
  --kg-radius: 14px;
  --kg-radius-lg: 18px;
  --kg-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --kg-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  font-family: var(--kg-sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--kg-ink);
  margin: 0 auto;
  max-width: 1200px;
  overflow-wrap: break-word;
}
.kg *, .kg *::before, .kg *::after { box-sizing: border-box; }

.kg p { margin: 0 0 1em; }
.kg p:last-child { margin-bottom: 0; }
.kg strong { font-weight: 700; color: inherit; }

.kg a { color: var(--kg-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kg a:hover { color: #0a3a6e; text-decoration-thickness: 2px; }

.kg h1, .kg h2, .kg h3, .kg h4 {
  font-family: var(--kg-serif);
  font-weight: 500;
  color: var(--kg-navy);
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
.kg h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
.kg h2 { font-size: clamp(28px, 3vw, 34px); line-height: 1.2; }
.kg h3 { font-size: 24px; line-height: 1.25; }
.kg h4 { font-family: var(--kg-sans); font-size: 18px; font-weight: 700; letter-spacing: 0; }

.kg ul, .kg ol { margin: 0 0 1em; padding-left: 1.3em; }
.kg li { margin-bottom: 0.4em; }

/* ---------- Small parts ---------- */

.kg-eyebrow {
  display: block;
  font-family: var(--kg-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kg-gold-text);
  margin-bottom: 12px;
}
.kg-lede { font-size: 21px; line-height: 1.5; color: var(--kg-body); max-width: 720px; }
.kg-intro { font-family: var(--kg-serif); font-size: 24px; line-height: 1.55; color: var(--kg-ink); }
.kg-fineprint { font-size: 14px; line-height: 1.6; color: var(--kg-muted); }
.kg-tag {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kg-navy); background: var(--kg-tint);
  padding: 5px 10px; border-radius: 6px; line-height: 1.4;
}

/* Pill links, e.g. the "Part of Kevin's Buyer Toolkit" ribbon */
.kg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.kg .kg-chip {
  display: inline-flex; align-items: center; min-height: 36px;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--kg-navy); background: #fff;
  border: 1px solid var(--kg-line-strong); border-radius: 999px;
  padding: 7px 14px; text-decoration: none;
}
.kg .kg-chip:hover { border-color: var(--kg-navy); }

/* Buttons */
.kg .kg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13px 26px; border-radius: 999px;
  font-family: var(--kg-sans); font-size: 16px; font-weight: 700; line-height: 1.3;
  text-decoration: none; text-align: center;
  background: var(--kg-navy); color: #fff; border: 1px solid var(--kg-navy);
}
.kg .kg-btn:hover { background: #0a3a6e; color: #fff; }
.kg .kg-btn--gold { background: var(--kg-gold); border-color: var(--kg-gold); color: var(--kg-navy); }
.kg .kg-btn--gold:hover { background: #ffc629; color: var(--kg-navy); }
.kg .kg-btn--ghost { background: transparent; color: var(--kg-navy); border-color: #b8c4d3; }
.kg .kg-btn--ghost:hover { background: var(--kg-paper); color: var(--kg-navy); }

/* ---------- Page header band ---------- */

/* Full-bleed without 100vw (which adds a horizontal scrollbar on Windows):
   border-image with an outset paints the colour out to both edges in one
   layer, so there is no seam where the band meets its extension, and
   border-image outsets never create scrollable overflow. */
.kg-band {
  border-image: conic-gradient(var(--kg-paper) 0 0) fill 0 / 0 / 0 100vmax;
  box-shadow: inset 0 -1px 0 var(--kg-line);
  padding: 56px 0 64px;
  margin-bottom: 64px;
}
.kg-band--navy { border-image: conic-gradient(var(--kg-navy) 0 0) fill 0 / 0 / 0 100vmax; box-shadow: none; color: #fff; }
.kg-band--navy h1, .kg-band--navy h2 { color: #fff; }
.kg-band--navy .kg-lede { color: #c9d3e0; }
.kg-band--navy .kg-eyebrow { color: var(--kg-gold); }
.kg-band h1 { max-width: 880px; }

.kg-byline { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; color: var(--kg-muted); }
.kg-byline strong { color: var(--kg-ink); }
.kg-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kg-navy); color: #fff; font-weight: 700; font-size: 14px;
}

/* ---------- Article layout: contents rail + reading column ---------- */

.kg-layout { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.kg-article { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.kg-article > * + * { margin-top: 48px; }
.kg-article > section > h2 { margin-bottom: 14px; }
.kg-article section[id] { scroll-margin-top: 24px; }

/* Contents: a <details>. Open beside the article on desktop; kg-design.js
   closes it on phones so it collapses to one tap-to-expand button. */
.kg-toc { flex: 1 1 220px; min-width: 0; max-width: 260px; font-size: 15px; line-height: 1.4; }
.kg-toc > summary {
  list-style: none; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kg-muted); padding: 0 0 10px 18px; border-left: 2px solid var(--kg-line);
}
.kg-toc > summary::-webkit-details-marker { display: none; }
.kg-toc nav { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--kg-line); padding-left: 18px; }
.kg .kg-toc nav a { color: var(--kg-body); text-decoration: none; padding: 6px 0; }
.kg .kg-toc nav a:hover { color: var(--kg-navy); text-decoration: underline; }

/* ---------- Boxes ---------- */

.kg-callout {
  background: var(--kg-navy); color: var(--kg-on-navy);
  border-radius: 16px; padding: 36px 40px; font-size: 19px; line-height: 1.6;
}
.kg-callout .kg-eyebrow { color: var(--kg-gold); }
.kg-callout h2, .kg-callout h3 { color: #fff; }
.kg-callout strong { color: #fff; }
.kg .kg-callout a:not(.kg-btn) { color: #fff; }

.kg-note {
  background: var(--kg-paper); border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius); padding: 22px 26px;
  font-size: 15px; line-height: 1.6; color: var(--kg-body);
}

/* ---------- Tables: always inside .kg-table-wrap so they scroll on phones ---------- */

.kg-table-wrap { overflow-x: auto; border: 1px solid var(--kg-line); border-radius: var(--kg-radius); }
/* A wide table must scroll INSIDE its box. Without this, Astra's flex post
   layout sizes the column to the table's min-width and the whole page
   scrolls sideways on phones. inline-size containment stops the table's
   width from propagating to its ancestors. */
.kg-table-wrap, .kg-embed { contain: inline-size; min-width: 0; max-width: 100%; }
.kg, .kg-audit, .kg-article { min-width: 0; }
.kg .kg-table { width: 100%; min-width: 520px; border-collapse: collapse; border: 0; margin: 0; font-size: 16px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.kg .kg-table th, .kg .kg-table td { padding: 16px 20px; border: 0; border-top: 1px solid var(--kg-line); text-align: left; vertical-align: top; background: transparent; }
.kg .kg-table thead th {
  border-top: 0; background: var(--kg-paper); color: var(--kg-navy);
  font-family: var(--kg-sans); font-weight: 700; text-transform: none; letter-spacing: 0;
}
.kg .kg-table thead th:first-child { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kg-muted); }
.kg .kg-table tbody th { font-weight: 600; color: var(--kg-ink); }
.kg .kg-table .kg-num { text-align: right; }

/* ---------- Media (audio/video briefing) ---------- */

.kg-media {
  background: var(--kg-paper); border: 1px solid var(--kg-line);
  border-radius: 16px; padding: 28px;
}
.kg-media h3 { font-family: var(--kg-sans); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.kg-media p { font-size: 16px; line-height: 1.5; color: var(--kg-body); }
.kg-media video, .kg-media audio { display: block; width: 100%; margin-top: 18px; border-radius: 10px; background: var(--kg-navy); }
.kg-media video { aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Cards ---------- */

.kg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kg-card {
  border: 1px solid var(--kg-line); border-radius: var(--kg-radius);
  padding: 24px; background: #fff;
}
.kg-card h3, .kg-card h4 { font-family: var(--kg-sans); font-size: 18px; font-weight: 700; color: var(--kg-navy); margin-bottom: 6px; letter-spacing: 0; }
.kg-card p { font-size: 16px; line-height: 1.55; color: var(--kg-body); }
.kg a.kg-card { display: block; text-decoration: none; color: inherit; }
.kg a.kg-card:hover { border-color: var(--kg-navy); }

/* ---------- Closing call to action ---------- */

.kg-cta {
  background: var(--kg-paper); border-radius: 20px; padding: 56px 48px; margin-top: 56px;
  display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center; justify-content: space-between;
}
.kg-cta > div { flex: 999 1 460px; min-width: 0; }
.kg-cta h2 { font-size: 36px; line-height: 1.15; margin-bottom: 12px; }
.kg-cta p { color: var(--kg-body); max-width: 640px; }
.kg-cta .kg-btn { flex: 0 1 auto; }

/* Resource tiles: a.kg-card with a bold call-to-action line at the bottom */
.kg a.kg-card { display: flex; flex-direction: column; gap: 6px; }
.kg-card .kg-card-link { margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 700; color: var(--kg-navy); }
.kg-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Section head: a heading with a one-line subtitle under it */
.kg-section-head { margin-bottom: 24px; }
.kg-section-head h2 { margin-bottom: 6px; }
.kg-section-head p { color: var(--kg-muted); font-size: 16px; }

/* Wide sections that sit outside the reading column (toolkits, tile grids) */
.kg-wide { margin-top: 72px; }
.kg-wide[id] { scroll-margin-top: 24px; }

/* Numbered steps: <ol class="kg-steps"><li><h3>…</h3><p>…</p></li></ol> */
.kg .kg-steps { list-style: none; counter-reset: kg-step; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 28px; }
.kg .kg-steps > li { counter-increment: kg-step; position: relative; padding-left: 64px; margin: 0; }
.kg .kg-steps > li::before {
  content: counter(kg-step, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--kg-navy); color: #fff; font-weight: 700; font-size: 15px;
  border-radius: 50% !important;
}
.kg .kg-steps > li > h3 { margin-bottom: 8px; }
/* When the heading text already carries its own number ("01. Finding Your
   Edge"), use .kg-steps--plain so the number is not shown twice. */
.kg .kg-steps--plain > li { padding-left: 0; padding-top: 24px; border-top: 1px solid var(--kg-line); }
.kg .kg-steps--plain > li::before { display: none; }

/* Figure: an image with an optional label above and caption below */
.kg-figure { margin: 0; }
.kg-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--kg-line); border-radius: 10px !important; }
.kg-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--kg-muted); }
.kg-figure .kg-figure-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kg-muted); }

/* Takeaway: pale gold box for "The Practical Takeaway"-style asides */
.kg-takeaway {
  background: #fff8e6; border: 1px solid #f3dfa6; border-radius: var(--kg-radius) !important;
  padding: 26px 28px; font-size: 17px; line-height: 1.6; color: var(--kg-body);
}
.kg-takeaway h3, .kg-takeaway h4 { font-family: var(--kg-sans); font-size: 17px; font-weight: 700; color: var(--kg-navy); margin-bottom: 8px; letter-spacing: 0; }

/* Plain bordered list of points (checklists, "what to look for") */
.kg .kg-points { list-style: none; padding: 0; margin: 0; }
.kg .kg-points > li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--kg-line); margin: 0; }
.kg .kg-points > li:first-child { border-top: 0; }
.kg .kg-points > li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 8px; height: 8px; background: var(--kg-gold); border-radius: 50% !important; }

/* Glossary / definition lists */
.kg .kg-terms { margin: 0; }
.kg .kg-terms dt { font-family: var(--kg-serif); font-size: 22px; font-weight: 500; color: var(--kg-navy); padding-top: 22px; border-top: 1px solid var(--kg-line); }
.kg .kg-terms dt:first-child { border-top: 0; padding-top: 0; }
.kg .kg-terms dd { margin: 6px 0 22px; color: var(--kg-body); }

.kg .kg-terms dd .kg-note { margin-top: 12px; }

/* A–Z jump bar (glossary): one wrapping row of letter links */
.kg-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 40px; }
.kg .kg-letters a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  font-weight: 700; font-size: 16px; color: var(--kg-navy);
  background: #fff; border: 1px solid var(--kg-line-strong);
  border-radius: 10px !important; text-decoration: none !important;
}
.kg .kg-letters a:hover { background: var(--kg-navy); border-color: var(--kg-navy); color: #fff; }
.kg-article section[id], .kg-terms dt[id] { scroll-margin-top: 24px; }

/* FAQ: native <details>, keyboard accessible, no script needed.
   <div class="kg-faq"><details><summary>Question?</summary><div>Answer…</div></details>…</div> */
.kg-faq { border-top: 1px solid var(--kg-line); }
.kg-faq details { border-bottom: 1px solid var(--kg-line); }
.kg-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 44px 20px 0; min-height: 44px;
  font-family: var(--kg-serif); font-size: 22px; line-height: 1.3; color: var(--kg-navy);
}
.kg-faq summary::-webkit-details-marker { display: none; }
.kg-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--kg-navy); border-bottom: 2px solid var(--kg-navy);
  transform: rotate(45deg); transition: transform .15s; border-radius: 1px !important;
}
.kg-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.kg-faq details > div { padding: 0 0 22px; color: var(--kg-body); }

/* Two columns that stack on phones */
.kg-split { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.kg-split > * { flex: 1 1 300px; min-width: 0; }

/* Small badge logos (REALTOR®, Equal Housing); the theme forces img height:auto */
.kg img.kg-logo { height: 30px !important; width: auto !important; display: inline-block; vertical-align: middle; margin-right: 12px; }

/* Tall embeds (PDF viewers): the iframe gets a real height */
.kg-embed--tall iframe { height: 800px; }
@media (max-width: 760px) { .kg-embed--tall iframe { height: 500px; } }

/* Logos on a light background: dark versions of the white marks */
.kg-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 40px; }
.kg img.kg-logo--invert { filter: invert(1); opacity: 0.8; height: 40px !important; }

/* Plain vertical stack with even spacing */
.kg-stack > * + * { margin-top: 32px; }

/* Stacked items in a split column get breathing room */
.kg-split > * > * + * { margin-top: 20px; }

/* Figure emphasis in market commentary: blue for strength, red for risk */
.kg strong.kg-stat { color: #1f5a99; }
.kg strong.kg-risk { color: #b42318; }

/* Closing "related reading" line */
.kg-related { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--kg-line); font-size: 16px; color: var(--kg-body); }

/* Embedded third-party widgets (maps, IDX, charts, forms): keep them inside the column */
.kg-embed { border: 1px solid var(--kg-line); border-radius: var(--kg-radius) !important; overflow-x: auto; overflow-y: hidden; background: #fff; }
/* Charts that render late (market_graph shortcodes): reserve their height so the page does not jump */
.kg-embed--chart { min-height: 400px; }
.kg-embed iframe { display: block; width: 100%; border: 0; }

/* ---------- Stats row (market pages) ---------- */

.kg-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--kg-line); border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius); overflow: hidden;
}
.kg-stat { background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 2px; }
.kg-stat b { font-size: 34px; font-weight: 700; line-height: 1.2; color: var(--kg-navy); font-variant-numeric: tabular-nums; }
.kg-stat span { font-size: 14px; line-height: 1.4; color: var(--kg-muted); }
.kg-band--navy .kg-stats { background: #23405f; border-color: #23405f; }
.kg-band--navy .kg-stat { background: var(--kg-navy); }
.kg-band--navy .kg-stat b { color: #fff; }
.kg-band--navy .kg-stat span { color: #c9d3e0; }

/* ---------- Market-audit posts (scripts/render-audits.mjs) ---------- */

/* Astra gives posts a 750px "narrow container"; the eight-column audit table
   needs ~820px, so converted posts get a wider column. Header/footer use
   their own containers and are unaffected. */
body.ast-narrow-container.single-post #content .ast-container:has(.kg) { max-width: 1040px; }
.entry-content > .kg.kg-audit { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Astra caps .entry-content > * at 750px */
.kg-audit > * + * { margin-top: 32px; }
.kg-audit > h2 { margin-top: 48px; margin-bottom: 0; }
.kg-audit > p + p { margin-top: 14px; }
.kg-audit .kg-note h4 { font-family: var(--kg-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--kg-navy); margin-bottom: 8px; }
.kg .kg-audit .kg-table { min-width: 820px; }
.kg-audit .kg-callout h3 { font-family: var(--kg-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kg-gold); margin-bottom: 10px; }
.kg-audit .kg-callout p { color: #fff; font-family: var(--kg-serif); font-size: 22px; line-height: 1.5; }

/* ---------- Homepage pieces ---------- */

.kg-hero { padding: 96px 0 104px; }
.kg-hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.02; max-width: 900px; }
.kg-hero .kg-lede { font-size: 21px; max-width: 620px; }
.kg-hero .kg-lede strong { color: #fff; }
.kg-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.kg .kg-btn--outline-light { background: transparent; color: #fff; border-color: #5a7394; }
.kg .kg-btn--outline-light:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: #fff; }

.kg-features { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; }
.kg-feature { border-top: 3px solid var(--kg-navy); padding-top: 22px; }
.kg-feature h3 { font-family: var(--kg-sans); font-size: 21px; font-weight: 700; letter-spacing: 0; margin-bottom: 10px; }
.kg-feature p { font-size: 16px; color: var(--kg-body); margin-bottom: 12px; }
.kg .kg-feature a { font-weight: 700; font-size: 15px; text-decoration: none !important; }
.kg .kg-feature a:hover { text-decoration: underline !important; }

.kg .kg-card--image { padding: 0; overflow: hidden; }
.kg .kg-card--image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 8px; border-radius: 0 !important; }
.kg .kg-card--image > :not(img) { margin-left: 22px; margin-right: 22px; }
.kg .kg-card--image .kg-tag { align-self: flex-start; }
.kg .kg-card--image h3 { font-family: var(--kg-serif); font-size: 23px; font-weight: 500; line-height: 1.2; }
.kg .kg-card--image .kg-card-link { padding-bottom: 22px; }

.kg-advisor { align-items: center; gap: 56px; }
.kg-advisor > .kg-figure { flex: 1 1 300px; max-width: 420px; }
.kg-advisor > div { flex: 999 1 420px; }
.kg-advisor .kg-figure img { width: 100%; border-radius: var(--kg-radius-lg) !important; border: 0; }
.kg-quote { margin: 8px 0 24px; padding: 0; border: 0; font-family: var(--kg-serif); font-style: italic; font-size: 28px; line-height: 1.35; color: var(--kg-navy); }
.kg-home-license { text-align: center; margin-top: 72px; }

@media (max-width: 760px) {
  .kg-hero { padding: 56px 0 64px; }
  .kg-actions .kg-btn { width: 100%; }
  .kg-quote { font-size: 23px; }
}

/* ---------- Site header and footer (Astra), on every page ----------
 * These are the theme's own elements, not page content, so they are styled
 * here directly. Typography and colour only: layout, menus and the mobile
 * toggle stay Astra's. */

#masthead { border-bottom: 1px solid #e3e7ec; background: #fff; }
#masthead .site-title, #masthead .site-title a {
  font-family: 'Newsreader', Georgia, serif !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: -0.01em !important; color: #002244 !important;
}
#masthead .main-header-menu .menu-link, #masthead .ast-builder-menu .menu-link {
  font-family: 'Public Sans', system-ui, sans-serif !important; font-size: 15px !important;
  font-weight: 500 !important; color: #1b2433 !important; letter-spacing: 0 !important;
}
#masthead .main-header-menu .menu-link:hover, #masthead .main-header-menu .current-menu-item > .menu-link {
  color: #002244 !important; text-decoration: underline !important; text-decoration-color: #f4b400 !important;
  text-decoration-thickness: 2px !important; text-underline-offset: 6px !important;
}
#masthead .sub-menu { border-top: 2px solid #f4b400 !important; box-shadow: 0 12px 32px rgba(0, 34, 68, 0.12) !important; }
#masthead .sub-menu .menu-link { font-size: 14px !important; }

#colophon, #colophon * { font-family: 'Public Sans', system-ui, sans-serif; }
#colophon h1, #colophon h2, #colophon h3, #colophon h4 {
  font-family: 'Public Sans', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #f4b400 !important;
}
#colophon a { text-decoration: none; }
#colophon a:hover { text-decoration: underline; }

/* ---------- The theme's own page title, on converted pages only ----------
 * Most pages hide Astra's title and carry their own <h1>; a few (the neighborhood
 * pages) show it. Restyle it to match when the page uses .kg. */
article:has(.kg) .entry-header .entry-title {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500; text-transform: none; letter-spacing: -0.02em;
  font-size: clamp(34px, 4.5vw, 52px); line-height: 1.1; color: #002244; max-width: 1200px; margin: 48px auto 8px;
}

/* ---------- Holding our ground against site-wide overrides ----------
 *
 * The site carries a head <style> ("Enforces the Grounded Advocate look") with
 * `* { border-radius: 0 !important }` and `.kg-card { border: none !important }`,
 * and Astra underlines every link in post content via
 * `.ast-single-post .entry-content a` (specificity 0,2,1). Both still govern
 * the unconverted pages, so they stay; inside .kg we win with !important.
 */
.kg .kg-chip, .kg .kg-btn { border-radius: 999px !important; }
.kg .kg-avatar { border-radius: 50% !important; }
.kg .kg-tag { border-radius: 6px !important; }
.kg .kg-table-wrap, .kg .kg-note, .kg .kg-stats { border-radius: var(--kg-radius) !important; }
.kg .kg-card { border-radius: var(--kg-radius) !important; border: 1px solid var(--kg-line) !important; }
.kg a.kg-card:hover { border-color: var(--kg-navy) !important; }
.kg .kg-callout, .kg .kg-media { border-radius: 16px !important; }
.kg .kg-cta { border-radius: 20px !important; }
.kg .kg-media video, .kg .kg-media audio { border-radius: 10px !important; }
.kg .kg-chip, .kg .kg-btn, .kg .kg-toc nav a, .kg a.kg-card { text-decoration: none !important; }

/* ---------- Phones ---------- */

@media (max-width: 760px) {
  .kg { font-size: 17px; }
  .kg-band { padding: 36px 0 40px; margin-bottom: 40px; }
  .kg-lede { font-size: 19px; }
  .kg-intro { font-size: 21px; }
  .kg-layout { gap: 32px; }
  .kg-article > * + * { margin-top: 40px; }

  .kg-toc { max-width: none; flex-basis: 100%; }
  .kg-toc > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; padding: 0 18px; border: 1px solid var(--kg-line-strong); border-radius: 12px !important;
    background: var(--kg-paper); color: var(--kg-navy);
    font-size: 15px; letter-spacing: 0; text-transform: none;
  }
  .kg-toc > summary::after {
    content: ""; width: 9px; height: 9px; margin-top: -4px; border-radius: 1px !important;
    border-right: 2px solid var(--kg-navy); border-bottom: 2px solid var(--kg-navy);
    transform: rotate(45deg); transition: transform .15s;
  }
  .kg-toc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .kg-toc nav { margin-top: 10px; }

  .kg-callout { padding: 28px 24px; font-size: 18px; }
  .kg-media { padding: 22px; }
  .kg-cta { padding: 36px 24px; }
  .kg-cta h2 { font-size: 30px; }
  .kg-cta .kg-btn { width: 100%; }
}