/* =========================================================================
   ARTICLE, ARCHIVE & BLOG COMPONENTS
   =========================================================================
   Loaded on posts, archives, search and the blog index only.
   Every value here resolves to a token from style.css. If you find yourself
   typing a hex code in this file, add a token instead.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Reclaim the content width from Astra
   -------------------------------------------------------------------------
   Astra applies its own content-width setting to #content.site-content
   (760px with a large auto left margin on single posts). These templates
   manage their own measure via .kg-shell and .kg-prose, so the outer wrapper
   needs to get out of the way -- otherwise the article column collapses to
   ~330px once the table-of-contents rail takes its 260px.

   Scoped to the templates this stylesheet serves, so page layouts built in
   the editor keep Astra's behaviour.
   ---------------------------------------------------------------------- */

.single-post #content.site-content,
.archive #content.site-content,
.search #content.site-content,
.blog #content.site-content,
.error404 #content.site-content {
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

.single-post #content > .ast-container,
.archive #content > .ast-container,
.search #content > .ast-container,
.blog #content > .ast-container,
.error404 #content > .ast-container {
  max-width: 100%;
  display: block;
  padding-inline: 0;
}

/* -------------------------------------------------------------------------
   Layout shell
   ---------------------------------------------------------------------- */

/* .kg-shell now lives in style.css - it is a sitewide primitive and the
   header needs it on every page, including ones this stylesheet skips. */

.kg-article-layout {
  display: grid;
  /* minmax(0, 1fr), never the implicit `auto`: a grid track's default
     minimum is min-content, which previously blew this out to 453px inside a
     335px container and clipped the contents list off-screen on every phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kg-flow);
  padding-block: var(--kg-space-10) var(--kg-section-y);
}

.kg-article-layout > * { min-width: 0; }

/* Mobile reading order. The rail is `display: contents` below the breakpoint,
   so its children join this single column and can be ordered individually:
   summary first, then contents, then the article, then the offer. */
@media (max-width: 1079px) {
  /* Both wrappers dissolve so every block becomes a grid item and can be
     ordered individually for reading on a phone. */
  .kg-article-main,
  .kg-rail { display: contents; }
  .kg-article__header { order: 1; }
  .kg-article__hero   { order: 2; }
  .kg-takeaways       { order: 3; }
  .kg-article-layout .kg-toc { order: 4; }
  .kg-article-body    { order: 5; }
  /* The rail's own card. Renamed from .kg-rail__cta when the commercial
     block moved into the column and a newsletter note took its place - the
     order was left pointing at a class that no longer exists, so the new card
     fell back to order 0 and rendered above the article title. */
  .kg-rail__news      { order: 6; }

  /* Below the breakpoint the gap owns the vertical rhythm, and nothing else
     may contribute to it.

     `display: contents` above promotes each block to a grid item, which has
     two consequences that are easy to miss: margins stop collapsing, and the
     grid's row-gap is added on top of whatever margin survives. So the flow
     margin from `.kg-article-main > * + *` landed on top of the 40px gap, and
     a component's own margin landed on top of that again:

       header -> hero      40 gap + 40 flow            =  80px
       hero   -> contents  40 gap + 32 component       =  72px
       contents -> body    32 + 40 gap + 40 flow       = 112px
       body   -> newsletter          40 gap            =  40px

     Only the last one was ever intended. The rhythm read as broken because it
     varied, not because any single value was large - which is why zeroing the
     children and letting the one gap speak fixes every instance at once.

     Specificity is deliberate: these rules sit earlier in the file than the
     component rules they override, so a bare `.kg-toc` would lose the cascade. */
  .kg-article-layout .kg-article-main > *,
  .kg-article-layout .kg-rail > * { margin-block: 0; }

  /* The layout already opens with 40px above the header. The header's own
     padding stacked a second helping on top, so a one-line breadcrumb sat
     over a 64px void before the category. */
  .kg-article-layout .kg-article__header { padding-block: 0; }
}

/* Two columns once there is genuinely room for both.
   1080px, not 1024px: at 1024 the reading column drops under 660px and the
   measure gets too tight to be worth the rail. */
@media (min-width: 1080px) {
  .kg-article-layout {
    grid-template-columns: minmax(0, var(--kg-col)) var(--kg-rail);
    column-gap: var(--kg-rail-gap);
    align-items: start;
  }
  .kg-article-main { grid-column: 1; min-width: 0; }

  /* The rail spans both rows and sticks, so it never leaves a dead column
     below it. The previous layout put a 347px contents box beside 11,389px
     of prose - 11,042px of empty rail, which is what made articles feel
     hollow on the right. */
  .kg-rail {
    grid-column: 2;
    /* One row, two independent columns - the rail no longer spans rows.
       While it did, CSS Grid sized the rows to fit the spanning element: the
       header row was stretched to the rail's full 704px against a 279px
       header, leaving 488px of dead space under the title. A spanning item
       forcing row heights is the mechanism behind every version of that gap,
       so the structure now makes it impossible rather than tuning it away. */
    grid-row: 1;
    display: grid;
    gap: var(--kg-space-6);

    /*
     * Sticky again, as a group.
     *
     * It was sticky before with max-height:100vh and overflow-y:auto, which
     * grew a second scrollbar inside the page because its contents came to
     * 951px against a 709px cap. The fix then was to move sticky onto the
     * contents list alone - which stopped the scrollbar but left the card
     * below it standing still, so it slid off the top of the screen within
     * one flick of the wheel.
     *
     * The rail now holds a contents list and a short newsletter note, roughly
     * 450px together. That fits any laptop viewport with room to spare, so it
     * can stick as one block with no height cap and no inner scrolling: both
     * things stay with the reader for the whole article.
     *
     * align-self: start is what keeps it that height - the layout sets
     * align-items: start, and without this the rail would stretch to the
     * article and sticky would have nothing to do.
     */
    position: sticky;
    top: var(--kg-space-8);
    align-self: start;
  }
}

/* Everything in the article column shares one edge and one width. */
.kg-article__header,
.kg-article__hero { max-width: var(--kg-col); }

.kg-article-main > * + * { margin-top: var(--kg-flow); }
.kg-article-body > * + * { margin-top: var(--kg-flow); }

/* The author box used to sit in a second, nested .kg-shell, which gave it
   double padding and a 1072px width against 703px for its neighbours - it
   ran 370px past the prose and under the rail. It is now a normal child of
   the article column and cannot escape it. */
.kg-article-body > .kg-share,
.kg-article-body > .kg-cta,
.kg-article-body > .kg-author,
.kg-article-body > .kg-postnav,
.kg-article-body > .kg-related { max-width: 100%; }

/* ---- Consulting card in the rail --------------------------------------
   The rail needs a second block or it empties out on short posts. This is
   the standing offer, not a per-post CTA. */
.kg-rail__cta {
  background: var(--kg-dark);
  color: var(--kg-paper);
  border-radius: var(--kg-radius);
  padding: var(--kg-space-6);
}
.kg-rail__cta-eyebrow {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Brand orange, not accent-text: on this dark panel the darker orange
     loses contrast and the brand one gains it. */
  color: var(--kg-accent);
  margin: 0 0 var(--kg-space-3);
}
.kg-rail__cta-title {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-xl);
  font-weight: 700;
  line-height: var(--kg-leading-tight);
  color: var(--kg-paper);
  margin: 0 0 var(--kg-space-3);
}
.kg-rail__cta p {
  font-size: var(--kg-text-sm);
  line-height: var(--kg-leading-normal);
  color: #D8D3CB;
  margin: 0 0 var(--kg-space-5);
}
.kg-rail__cta .kg-btn { width: 100%; justify-content: center; }

@media (max-width: 1079px) {
  .kg-rail__cta { max-width: var(--kg-col); margin-inline: auto; }
}

/* -------------------------------------------------------------------------
   Breadcrumbs
   ---------------------------------------------------------------------- */

.kg-breadcrumbs { padding-block: var(--kg-space-5) 0; }

.kg-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kg-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--kg-text-sm);
  color: var(--kg-muted);
}
.kg-breadcrumbs__list li + li::before {
  /* U+203A, pointing right. This was U+2039 - the left-pointing twin - so the
     trail read backwards: "Home < Guides" looks like Guides contains Home. */
  content: "\203A";
  margin-right: var(--kg-space-2);
  color: var(--kg-sand);
}
.kg-breadcrumbs__list a { color: var(--kg-muted); text-decoration: none; }
.kg-breadcrumbs__list a:hover { color: var(--kg-accent-text); text-decoration: underline; }
.kg-breadcrumbs__list [aria-current="page"] { color: var(--kg-ink); font-weight: 500; }

/* On a phone the last crumb is dropped from the visible trail.

   It is the post title, and every title on this site runs 40 to 56 characters.
   At 375px that wraps onto two or three lines directly above an H1 that says
   exactly the same thing, which is what made the block read as broken rather
   than as a trail. "Home > Category" is at most about 24 characters and holds
   one line down to 320px.

   Hidden by clipping, not by display:none, so the step is still in the
   accessibility tree and screen readers announce the full path. The separator
   goes with it, being a pseudo-element of the same li.

   The row keeps flex-wrap:wrap on purpose. With the title gone it has nothing
   left to wrap at any supported width, but wrapping degrades better than
   overflow if a category name ever grows. */
@media (max-width: 767px) {
  .kg-breadcrumbs .kg-breadcrumbs__list li[aria-current="page"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------------
   Article header
   ---------------------------------------------------------------------- */

.kg-article__header {
  max-width: var(--kg-content-width);
  /* No bottom padding.
     The 32px that used to sit here stacked on top of the 64px flow margin
     that separates the header from the featured image, so the image had 96px
     of air above it and 64px below - close enough to read as a mistake rather
     than a rhythm. The flow margin alone puts the same 64px on both sides,
     and the image sits in even air at every width. */
  padding-block: var(--kg-space-6) 0;
}

.kg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--kg-space-2);
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kg-accent-text);
}

.kg-article__title {
  font-size: var(--kg-text-5xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: var(--kg-space-4) 0 var(--kg-space-5);
}

.kg-article__standfirst {
  font-size: var(--kg-text-xl);
  line-height: var(--kg-leading-normal);
  color: var(--kg-muted);
  max-width: var(--kg-measure);
  margin-bottom: var(--kg-space-6);
}

.kg-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kg-space-3);
  padding-top: var(--kg-space-5);
  border-top: 1px solid var(--kg-sand);
  font-size: var(--kg-text-sm);
  color: var(--kg-muted);
}
.kg-article__meta strong { color: var(--kg-ink); font-weight: 600; }

.kg-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--kg-space-1) var(--kg-space-3);
  border-radius: var(--kg-radius-full);
  background: var(--kg-accent-soft);
  color: var(--kg-accent-strong);
  font-size: var(--kg-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.kg-pill:hover { background: var(--kg-accent-text); color: #fff; }

/* -------------------------------------------------------------------------
   Key takeaways
   -------------------------------------------------------------------------
   Doubles as the passage answer engines quote, so it sits high in the
   document and states conclusions rather than teasing them.
   ---------------------------------------------------------------------- */

.kg-takeaways {
  max-width: var(--kg-measure);
  margin-block: var(--kg-space-8);
  padding: var(--kg-space-6);
  background: var(--kg-surface);
  border: 1px solid var(--kg-sand);
  border-left: 4px solid var(--kg-accent);
  border-radius: var(--kg-radius);
  box-shadow: var(--kg-shadow-sm);
}
.kg-takeaways__title {
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kg-muted);
  margin: 0 0 var(--kg-space-4);
}
.kg-takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kg-space-3); }
.kg-takeaways li {
  display: flex;
  gap: var(--kg-space-3);
  font-size: var(--kg-text-base);
  line-height: var(--kg-leading-normal);
  color: var(--kg-ink);
}
.kg-takeaways li::before {
  content: "\2192";
  color: var(--kg-accent-text);
  font-weight: 700;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Table of contents
   ---------------------------------------------------------------------- */

.kg-toc {
  background: var(--kg-surface);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius);
  padding: var(--kg-space-5);
  margin-block: var(--kg-space-8);
}
@media (min-width: 1024px) {
  .kg-toc { margin-block: 0; max-height: calc(100vh - 6rem); overflow-y: auto; }
}

.kg-toc__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kg-toc__summary::-webkit-details-marker { display: none; }
.kg-toc__summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--kg-muted);
  border-bottom: 2px solid var(--kg-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.kg-toc__details[open] .kg-toc__summary::after { transform: rotate(-135deg); }

/* On desktop the rail is always open and the toggle is pointless. */
@media (min-width: 1024px) {
  .kg-toc__summary { cursor: default; }
  .kg-toc__summary::after { display: none; }
}

.kg-toc__title {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-toc__list {
  margin: var(--kg-space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--kg-space-1);
  counter-reset: kg-toc;
}
.kg-toc__item--h3 { padding-left: var(--kg-space-4); }

.kg-toc__link {
  display: block;
  padding: var(--kg-space-2) var(--kg-space-2) var(--kg-space-2) var(--kg-space-3);
  border-left: 2px solid transparent;
  font-size: var(--kg-text-sm);
  line-height: var(--kg-leading-snug);
  color: var(--kg-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.kg-toc__link:hover { color: var(--kg-ink); border-left-color: var(--kg-sand); }
.kg-toc__link.is-active {
  color: var(--kg-accent-text);
  border-left-color: var(--kg-accent-text);
  font-weight: 600;
}

/* Anchored headings shouldn't hide under the sticky site header. */
.kg-heading { scroll-margin-top: var(--kg-space-20); }

/* -------------------------------------------------------------------------
   Article body typography
   ---------------------------------------------------------------------- */

.kg-prose {
  max-width: var(--kg-measure);
  font-size: var(--kg-text-lg);
  line-height: var(--kg-leading-relaxed);
  color: var(--kg-ink);
}

.kg-prose > * + * { margin-top: var(--kg-space-6); }

.kg-prose h2 {
  font-size: var(--kg-text-3xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--kg-space-12);
  margin-bottom: var(--kg-space-4);
}
.kg-prose h3 {
  font-size: var(--kg-text-2xl);
  font-weight: 700;
  margin-top: var(--kg-space-10);
  margin-bottom: var(--kg-space-3);
}
.kg-prose h2 + p, .kg-prose h3 + p { margin-top: 0; }

.kg-prose a {
  color: var(--kg-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.kg-prose a:hover { color: var(--kg-accent-strong); text-decoration-thickness: 2px; }

.kg-prose ul, .kg-prose ol { padding-left: var(--kg-space-6); }
.kg-prose li + li { margin-top: var(--kg-space-2); }
.kg-prose li::marker { color: var(--kg-accent-text); }

.kg-prose strong { color: var(--kg-ink-strong); font-weight: 650; }

.kg-prose img,
.kg-prose figure > img {
  width: 100%;
  height: auto;
  border-radius: var(--kg-radius);
  border: 1px solid var(--kg-sand);
}
.kg-prose figcaption {
  margin-top: var(--kg-space-3);
  font-size: var(--kg-text-sm);
  color: var(--kg-muted);
  text-align: center;
}

.kg-prose blockquote {
  margin-inline: 0;
  padding: var(--kg-space-2) 0 var(--kg-space-2) var(--kg-space-6);
  border-left: 3px solid var(--kg-accent);
  font-size: var(--kg-text-xl);
  line-height: var(--kg-leading-normal);
  color: var(--kg-ink-strong);
  font-style: normal;
}

.kg-prose code {
  padding: 0.15em 0.4em;
  background: var(--kg-sand-soft);
  border-radius: var(--kg-radius-sm);
  font-size: 0.9em;
}
.kg-prose pre {
  padding: var(--kg-space-5);
  background: var(--kg-dark);
  color: var(--kg-paper);
  border-radius: var(--kg-radius);
  overflow-x: auto;
}
.kg-prose pre code { background: none; padding: 0; color: inherit; }

.kg-prose hr {
  border: 0;
  border-top: 1px solid var(--kg-sand);
  margin-block: var(--kg-space-12);
}

/* Tables -- wide ones scroll rather than breaking the page. */
.kg-prose .kg-table-wrap { overflow-x: auto; }
.kg-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kg-text-base);
}
.kg-prose th, .kg-prose td {
  padding: var(--kg-space-3) var(--kg-space-4);
  border-bottom: 1px solid var(--kg-sand);
  text-align: left;
  vertical-align: top;
}
.kg-prose th {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-sm);
  font-weight: 700;
  color: var(--kg-ink-strong);
  background: var(--kg-sand-soft);
}

/* -------------------------------------------------------------------------
   In-body components (callouts, steps, FAQ)
   ---------------------------------------------------------------------- */

.kg-callout {
  padding: var(--kg-space-5) var(--kg-space-6);
  background: var(--kg-accent-soft);
  border-radius: var(--kg-radius);
  border-left: 4px solid var(--kg-accent);
}
.kg-callout__title {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kg-accent-strong);
  margin: 0 0 var(--kg-space-2);
}
.kg-callout > :last-child { margin-bottom: 0; }

.kg-steps { counter-reset: kg-step; list-style: none; padding-left: 0; }
.kg-steps > li {
  counter-increment: kg-step;
  position: relative;
  padding-left: var(--kg-space-12);
  min-height: var(--kg-space-8);
}
.kg-steps > li + li { margin-top: var(--kg-space-6); }
.kg-steps > li::before {
  content: counter(kg-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--kg-space-8);
  height: var(--kg-space-8);
  border-radius: var(--kg-radius-full);
  background: var(--kg-ink-strong);
  color: var(--kg-paper);
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-xs);
  font-weight: 700;
}

.kg-faq { display: grid; gap: var(--kg-space-3); }
.kg-faq details {
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius);
  background: var(--kg-surface);
  padding: var(--kg-space-4) var(--kg-space-5);
}
.kg-faq summary {
  cursor: pointer;
  font-family: var(--kg-font-display);
  font-weight: 650;
  color: var(--kg-ink-strong);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--kg-space-4);
}
.kg-faq summary::-webkit-details-marker { display: none; }
.kg-faq summary::after {
  content: "+";
  color: var(--kg-accent-text);
  font-size: var(--kg-text-xl);
  line-height: 1;
  flex-shrink: 0;
}
.kg-faq details[open] summary::after { content: "\2212"; }
.kg-faq details[open] summary { margin-bottom: var(--kg-space-3); }

/* -------------------------------------------------------------------------
   Inline + end-of-post CTAs
   ---------------------------------------------------------------------- */

.kg-cta {
  max-width: var(--kg-measure);
  margin-block: var(--kg-space-12);
  padding: var(--kg-space-8);
  background: var(--kg-dark);
  color: var(--kg-paper);
  border-radius: var(--kg-radius-lg);
}
.kg-cta__title {
  color: var(--kg-paper);
  font-size: var(--kg-text-2xl);
  margin: 0 0 var(--kg-space-3);
}
.kg-cta p { color: var(--kg-sand); margin: 0 0 var(--kg-space-5); }

/* .kg-btn now lives in style.css, for the same reason as .kg-shell. */

/* -------------------------------------------------------------------------
   Author box, share, prev/next
   ---------------------------------------------------------------------- */


.kg-share {
  display: flex;
  align-items: center;
  gap: var(--kg-space-3);
  flex-wrap: wrap;
  max-width: var(--kg-measure);
  padding-block: var(--kg-space-6);
  border-top: 1px solid var(--kg-sand);
  border-bottom: 1px solid var(--kg-sand);
}
.kg-share__label {
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kg-muted);
}
.kg-share__btn:hover { border-color: var(--kg-accent-text); color: var(--kg-accent-text); }

.kg-postnav {
  display: grid;
  gap: var(--kg-space-4);
  max-width: var(--kg-measure);
  margin-block: var(--kg-space-10);
}
@media (min-width: 640px) { .kg-postnav { grid-template-columns: 1fr 1fr; } }
.kg-postnav__link {
  display: block;
  padding: var(--kg-space-5);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius);
  background: var(--kg-surface);
  text-decoration: none;
}
.kg-postnav__link:hover { border-color: var(--kg-accent-text); box-shadow: var(--kg-shadow); }
.kg-postnav__dir {
  font-size: var(--kg-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kg-muted);
}
.kg-postnav__title {
  display: block;
  margin-top: var(--kg-space-2);
  font-family: var(--kg-font-display);
  font-weight: 650;
  color: var(--kg-ink-strong);
}
.kg-postnav__link--next { text-align: right; }

/* -------------------------------------------------------------------------
   Cards, grids, archives
   ---------------------------------------------------------------------- */

.kg-grid {
  display: grid;
  gap: var(--kg-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.kg-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.kg-card:hover {
  border-color: var(--kg-accent-text);
  box-shadow: var(--kg-shadow-lg);
  transform: translateY(-2px);
}
.kg-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.kg-card__media { aspect-ratio: 16 / 9; background: var(--kg-sand-soft); overflow: hidden; }
.kg-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No post has a featured image yet -- this keeps the grid honest until they do. */
.kg-card__fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--kg-dark), var(--kg-dark-deep));
}
.kg-card__fallback-mark {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--kg-accent);
  opacity: 0.9;
}

.kg-card__body { padding: var(--kg-space-5); display: flex; flex-direction: column; gap: var(--kg-space-2); flex: 1; }
.kg-card__cat {
  align-self: flex-start;
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kg-accent-text);
}
.kg-card__title {
  font-size: var(--kg-text-xl);
  font-weight: 700;
  line-height: var(--kg-leading-snug);
  margin: 0;
}
.kg-card:hover .kg-card__title { color: var(--kg-accent-text); }
.kg-card__excerpt {
  font-size: var(--kg-text-base);
  line-height: var(--kg-leading-normal);
  color: var(--kg-muted);
  margin: 0;
}
.kg-card__meta {
  margin-top: auto;
  padding-top: var(--kg-space-3);
  display: flex;
  align-items: center;
  gap: var(--kg-space-2);
  font-size: var(--kg-text-sm);
  color: var(--kg-muted);
}

/* -------------------------------------------------------------------------
   Archive header
   ---------------------------------------------------------------------- */

.kg-archive-header {
  padding-block: var(--kg-space-10) var(--kg-space-8);
  max-width: var(--kg-measure);
}
.kg-archive-header__title {
  font-size: var(--kg-text-5xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: var(--kg-space-3) 0 var(--kg-space-4);
}
.kg-archive-header__desc {
  font-size: var(--kg-text-xl);
  line-height: var(--kg-leading-normal);
  color: var(--kg-muted);
  margin: 0;
}
.kg-archive-count {
  margin-top: var(--kg-space-4);
  font-size: var(--kg-text-sm);
  color: var(--kg-muted);
}

.kg-related { max-width: var(--kg-site-width); margin-block: var(--kg-section-y); }
.kg-related__title { font-size: var(--kg-text-3xl); margin-bottom: var(--kg-space-6); }
.kg-related__grid {
  display: grid;
  gap: var(--kg-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* -------------------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------------- */

.kg-pagination { margin-block: var(--kg-space-12); }
.kg-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--kg-space-2); justify-content: center; }
.kg-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem; height: 2.5rem;
  padding-inline: var(--kg-space-3);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius);
  background: var(--kg-surface);
  color: var(--kg-ink);
  text-decoration: none;
  font-weight: 600;
}
.kg-pagination .page-numbers:hover { border-color: var(--kg-accent-text); color: var(--kg-accent-text); }
.kg-pagination .page-numbers.current {
  background: var(--kg-ink-strong);
  border-color: var(--kg-ink-strong);
  color: var(--kg-paper);
}
.kg-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* -------------------------------------------------------------------------
   Empty states
   ---------------------------------------------------------------------- */

.kg-empty {
  max-width: var(--kg-measure);
  padding-block: var(--kg-space-16);
  text-align: center;
}
.kg-empty__title { font-size: var(--kg-text-3xl); margin-bottom: var(--kg-space-3); }
.kg-empty p { color: var(--kg-muted); margin-bottom: var(--kg-space-6); }

.kg-searchform { display: flex; gap: var(--kg-space-2); max-width: 28rem; margin-inline: auto; }
.kg-searchform input[type="search"] {
  flex: 1;
  padding: var(--kg-space-3) var(--kg-space-4);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius);
  background: var(--kg-surface);
  color: var(--kg-ink);
  font: inherit;
}
.kg-searchform input[type="search"]:focus {
  outline: var(--kg-focus-ring) solid var(--kg-accent-text);
  outline-offset: 1px;
  border-color: var(--kg-accent-text);
}

/* Screen-reader-only text. */
.kg-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Author, share, floating contents ---------------------------------
   Rebuilt to the long-form editorial pattern: portrait left, credentials
   stacked, follow row last. Restrained on purpose - the card should read as
   a credential, not an advert. */

.kg-author {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--kg-space-5);
  align-items: start;
  margin-block: var(--kg-space-8);
  padding: var(--kg-space-6);
  background: var(--kg-surface);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-lg, 14px);
}

.kg-author > * { min-width: 0; }

.kg-author__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--kg-radius-full, 999px);
  object-fit: cover;
  border: 3px solid var(--kg-sand-soft);
}

.kg-author__eyebrow {
  margin: 0 0 var(--kg-space-1);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-author__name {
  display: inline-block;
  /* Was 103x22 - a hair under the WCAG 2.2 24x24 target floor. */
  min-height: 24px;
  padding-block: 1px;
  margin: 0;
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--kg-accent-text);
  text-decoration: none;
}
.kg-author__name:hover,
.kg-author__name:focus-visible { color: var(--kg-accent-strong); text-decoration: underline; }

.kg-author__role {
  margin: var(--kg-space-1) 0 var(--kg-space-3);
  font-size: var(--kg-text-sm);
  color: var(--kg-muted);
}

.kg-author__bio {
  margin: 0 0 var(--kg-space-4);
  font-size: var(--kg-text-base);
  line-height: var(--kg-leading-normal, 1.65);
  color: var(--kg-ink);
}

.kg-author__follow {
  display: flex;
  align-items: center;
  gap: var(--kg-space-3);
  flex-wrap: wrap;
  margin: 0;
}

/* The author's five marks.

   Styled here rather than borrowing `.kg-social`, which has no base rule -
   only a `.kg-footer-brand .kg-social` scoped to the dark footer. Reusing the
   class would have inherited nothing and rendered a bulleted list.

   40px targets: comfortably past the WCAG 2.2 24px floor, matching the footer
   row, and they wrap so the line can never overflow the card on a phone. */
.kg-author__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kg-space-1);
  margin: var(--kg-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.kg-author__social a {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  color: var(--kg-muted);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}

.kg-author__social a:hover,
.kg-author__social a:focus-visible {
  color: var(--kg-accent-text);
  background: var(--kg-sand, rgba(35, 34, 32, 0.06));
}

.kg-author__social a:focus-visible {
  outline: var(--kg-focus-ring, 2px) solid var(--kg-accent-text);
  outline-offset: 2px;
}

/* Undo a global optical nudge that lands here by accident.

   style.css carries `a[aria-label="LinkedIn"]:first-child { margin-inline-start:
   -11px }` to optically align a LinkedIn mark that opens a row. Each anchor here
   is the first child of its own li, so it matched and pulled the first icon 11px
   left - shrinking that one target to 29px while its neighbours stayed 40px.

   style.css already neutralises this for .kg-social; this is the same fix for
   the same reason. The selector needs the attribute to outweigh :first-child. */
.kg-author__social a[aria-label="LinkedIn"] { margin-inline-start: 0; }

/* Targets stay square whatever else the cascade tries. */
.kg-author__social li,
.kg-author__social a { flex: 0 0 auto; }

.kg-author__follow-label {
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-social-icons {
  display: flex;
  align-items: center;
  gap: var(--kg-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kg-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--kg-radius-full, 999px);
  color: var(--kg-muted);
  background: var(--kg-sand-soft);
  transition: background-color .15s ease, color .15s ease;
}
.kg-social-icons a:hover,
.kg-social-icons a:focus-visible { background: var(--kg-accent-text); color: #fff; }
.kg-social-icons svg { fill: currentColor; }

@media (max-width: 600px) {
  .kg-author { grid-template-columns: 1fr; gap: var(--kg-space-4); padding: var(--kg-space-5); }
  .kg-author__avatar { width: 72px; height: 72px; }
}

/* ---- Share row ---- */
.kg-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kg-space-2);
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--kg-space-3);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-full, 999px);
  background: var(--kg-surface);
  color: var(--kg-ink);
  font-size: var(--kg-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kg-share__btn:hover,
.kg-share__btn:focus-visible {
  background: var(--kg-accent-text);
  border-color: var(--kg-accent-text);
  color: #fff;
}
.kg-share__btn svg { fill: currentColor; flex-shrink: 0; }
.kg-share__btn--copy svg { fill: none; }
.kg-share__btn-text { white-space: nowrap; }

@media (max-width: 480px) {
  .kg-share__btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kg-share__btn--copy { padding: 0; }
}

/* ---- Floating contents launcher ---------------------------------------
   Utility, not decoration: a short fade in, no slide, no bounce. */
.kg-toc-float {
  position: fixed;
  left: var(--kg-space-5);
  bottom: var(--kg-space-5);
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--kg-space-2);
}
.kg-toc-float[hidden] { display: none; }

.kg-toc-float__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--kg-space-2);
  min-height: 44px;
  padding: 0 var(--kg-space-4);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-full, 999px);
  background: var(--kg-surface);
  color: var(--kg-ink);
  font-size: var(--kg-text-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transition: background-color .15s ease, color .15s ease;
}
.kg-toc-float__btn:hover,
.kg-toc-float__btn:focus-visible { background: var(--kg-accent-text); color: #fff; border-color: var(--kg-accent-text); }
.kg-toc-float.is-open .kg-toc-float__btn { background: var(--kg-accent-text); color: #fff; border-color: var(--kg-accent-text); }

.kg-toc-float__panel {
  width: min(320px, calc(100vw - 2.5rem));
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: var(--kg-space-4) var(--kg-space-5);
  background: var(--kg-surface);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius-lg, 14px);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  animation: kg-fade-in .15s ease both;
}
.kg-toc-float__panel[hidden] { display: none; }

@keyframes kg-fade-in { from { opacity: 0; } to { opacity: 1; } }

.kg-toc-float__title {
  margin: 0 0 var(--kg-space-3);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-toc-float__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kg-space-1); }
.kg-toc-float__item--h3 { padding-left: var(--kg-space-4); }
.kg-toc-float__list a {
  display: block;
  padding: var(--kg-space-2) 0;
  min-height: 24px;
  font-size: var(--kg-text-sm);
  line-height: 1.4;
  color: var(--kg-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.kg-toc-float__list a:hover,
.kg-toc-float__list a:focus-visible { color: var(--kg-accent-text); }

@media (prefers-reduced-motion: reduce) {
  .kg-toc-float__panel { animation: none; }
  .kg-social-icons a,
  .kg-share__btn,
  .kg-toc-float__btn { transition: none; }
}

@media print { .kg-toc-float { display: none; } }


/* ---- Blog index --------------------------------------------------------
   An archive of writing, treated like the contents page of a magazine
   rather than a wall of equal cards. Hierarchy does the work: one lead
   piece at display size, then a dense numbered list that rewards scanning.

   Restraint is the point. There is exactly one motion idea (a short
   staggered rise on load) and one decorative idea (the numerals). Anything
   more would fight the writing, which is what people came for. */

.kg-blog-index {
  --kg-rule: 1px solid var(--kg-sand);

  /*
   * Astra's .ast-container is display:flex, so this wrapper became a
   * shrink-to-fit flex item pinned to flex-start: it measured exactly as wide
   * as its widest child (1200px) and sat hard left, leaving ~225px of dead
   * space down the right of a 1440 viewport. margin-inline:auto on the
   * sections inside could never correct that - the item itself has to fill
   * the row before its children have anything to centre within.
   */
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

/* ---- Masthead ---- */
/* The masthead ran to 479px tall with a 68px title - larger than an article
   H1 (48px), which inverted the hierarchy: the index shouted louder than the
   writing it points at. Now it sits one step below the article title and the
   page starts with content sooner. */
.kg-blogmast {
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: var(--kg-rule);
}

.kg-blogmast__eyebrow {
  margin: 0 0 var(--kg-space-4);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kg-accent-text);
}

.kg-blogmast__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-5xl);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--kg-ink-strong);
}

.kg-blogmast__lede {
  margin: var(--kg-space-5) 0 0;
  max-width: 54ch;
  font-size: var(--kg-text-lg);
  line-height: 1.6;
  color: var(--kg-muted);
}

.kg-blogmast__count {
  display: flex;
  gap: var(--kg-space-3);
  margin: var(--kg-space-6) 0 0;
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

/* ---- Lead article ---- */
.kg-lead { padding-block: clamp(2rem, 5vw, 4rem); border-bottom: var(--kg-rule); }

.kg-lead__marker {
  margin: 0 0 var(--kg-space-5);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-lead__link {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.kg-lead__link > * { min-width: 0; }

.kg-lead__cat {
  display: inline-block;
  margin-bottom: var(--kg-space-3);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kg-accent-text);
}

.kg-lead__title {
  margin: 0;
  font-family: var(--kg-font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--kg-ink-strong);
  transition: color .15s ease;
}
.kg-lead__link:hover .kg-lead__title,
.kg-lead__link:focus-visible .kg-lead__title { color: var(--kg-accent-text); }

.kg-lead__excerpt {
  margin: var(--kg-space-4) 0 0;
  max-width: 52ch;
  font-size: var(--kg-text-base);
  line-height: 1.65;
  color: var(--kg-muted);
}

.kg-lead__meta {
  display: flex;
  gap: var(--kg-space-2);
  margin-top: var(--kg-space-4);
  font-size: var(--kg-text-sm);
  color: var(--kg-muted);
}

.kg-lead__cue {
  display: inline-block;
  margin-top: var(--kg-space-5);
  font-weight: 700;
  color: var(--kg-accent-text);
}
.kg-lead__link:hover .kg-lead__cue { text-decoration: underline; text-underline-offset: 3px; }

.kg-lead__media {
  border-radius: var(--kg-radius-lg, 14px);
  overflow: hidden;
  background: var(--kg-sand-soft);
  aspect-ratio: 4 / 3;
}
.kg-lead__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kg-lead__fallback {
  display: grid;
  place-items: center;
  height: 100%;
  background: linear-gradient(160deg, #322f2b, var(--kg-dark) 60%, var(--kg-dark-deep));
}
.kg-lead__fallback span {
  font-family: var(--kg-font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--kg-accent);
  letter-spacing: .04em;
}

@media (min-width: 900px) {
  .kg-lead__link { grid-template-columns: 1.15fr .85fr; }
}

/* ---- Topics ---- */
.kg-topics { padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: var(--kg-rule); }

.kg-topics__title,
.kg-archive__title {
  margin: 0 0 var(--kg-space-5);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kg-muted);
}

.kg-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kg-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kg-topic {
  display: inline-flex;
  align-items: baseline;
  gap: var(--kg-space-2);
  min-height: 44px;
  padding: var(--kg-space-3) var(--kg-space-5);
  border: 1px solid var(--kg-sand);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: var(--kg-ink);
  background: var(--kg-surface);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kg-topic:hover,
.kg-topic:focus-visible {
  background: var(--kg-ink-strong);
  border-color: var(--kg-ink-strong);
  color: var(--kg-paper);
}
.kg-topic__count {
  font-size: var(--kg-text-xs);
  font-weight: 700;
  color: var(--kg-muted);
}
.kg-topic:hover .kg-topic__count,
.kg-topic:focus-visible .kg-topic__count { color: var(--kg-accent); }

/* ---- Archive list ---- */
.kg-archive { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }

.kg-archive__list { margin: 0; padding: 0; list-style: none; }

.kg-entry { border-top: var(--kg-rule); }
.kg-entry:last-child { border-bottom: var(--kg-rule); }

.kg-entry__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--kg-space-4) var(--kg-space-5);
  padding: var(--kg-space-6) 0;
  text-decoration: none;
  color: inherit;
  transition: background-color .15s ease;
}
.kg-entry__link:hover,
.kg-entry__link:focus-visible { background: var(--kg-sand-soft); }

.kg-entry__num {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-sm);
  font-weight: 800;
  color: var(--kg-sand);
  padding-top: .15em;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.kg-entry__link:hover .kg-entry__num { color: var(--kg-accent-text); }

.kg-entry__body { min-width: 0; }

.kg-entry__cat {
  display: block;
  margin-bottom: var(--kg-space-2);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kg-accent-text);
}

.kg-entry__title {
  display: block;
  font-family: var(--kg-font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--kg-ink-strong);
  text-wrap: balance;
  transition: color .15s ease;
}
.kg-entry__link:hover .kg-entry__title,
.kg-entry__link:focus-visible .kg-entry__title { color: var(--kg-accent-text); }

.kg-entry__excerpt {
  display: block;
  margin-top: var(--kg-space-2);
  max-width: 62ch;
  font-size: var(--kg-text-sm);
  line-height: 1.6;
  color: var(--kg-muted);
}

.kg-entry__meta {
  display: flex;
  gap: var(--kg-space-4);
  font-size: var(--kg-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kg-muted);
  white-space: nowrap;
}

@media (min-width: 820px) {
  .kg-entry__link {
    grid-template-columns: auto 1fr auto;
    align-items: start;
    padding-inline: var(--kg-space-4);
    margin-inline: calc(var(--kg-space-4) * -1);
    border-radius: var(--kg-radius, 12px);
  }
  .kg-entry__meta { justify-content: flex-end; padding-top: .2em; }
}

@media (max-width: 819px) {
  .kg-entry__meta { grid-column: 2; }
}

/* One motion idea: entries rise a little as the page settles. */
@media (prefers-reduced-motion: no-preference) {
  .kg-entry {
    animation: kg-rise .5s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(var(--kg-stagger, 1) * 45ms);
  }
  @keyframes kg-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}


/* ---- Universal newsletter component ------------------------------------
   The dark signup panel used to be styled by a <style> block inside the
   blog page's own content. Replacing that page with a template meant the
   markup kept rendering while its styling vanished - the section came back
   as plain text on cream with an orange kicker at 3.10:1.

   Owning the component here is the fix and also the point: one signup
   design, defined once in the theme, instead of styling that travels around
   inside page content and disappears the moment the page is rebuilt. */

.kg-blog-index .kg-news {
  margin-block: clamp(1rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem);
  padding-inline: var(--kg-space-5);
}

.kg-blog-index .kg-news-grid {
  max-width: var(--kg-site-width);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  background: var(--kg-dark-deep);
  border-radius: var(--kg-radius-lg, 16px);
  color: #fff;
}

.kg-blog-index .kg-news-grid > * { min-width: 0; }

.kg-blog-index .kg-news .kg-kicker {
  margin: 0 0 var(--kg-space-3);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Brand orange is the accessible choice on this dark panel (4.6:1+);
     the darker accent-text is not. */
  color: var(--kg-accent);
}

.kg-blog-index .kg-news h2 {
  margin: 0;
  font-family: var(--kg-font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}

.kg-blog-index .kg-news p:not(.kg-kicker):not(.kg-form-status) {
  margin: var(--kg-space-4) 0 0;
  max-width: 46ch;
  font-size: var(--kg-text-base);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

.kg-blog-index .kg-universal-news {
  display: grid;
  gap: var(--kg-space-3);
}

.kg-blog-index .kg-universal-news label {
  display: grid;
  gap: var(--kg-space-2);
  font-size: var(--kg-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

.kg-blog-index .kg-universal-news input[type="text"],
.kg-blog-index .kg-universal-news input[type="email"],
.kg-blog-index .kg-universal-news input:not([type]) {
  width: 100%;
  min-height: 48px;
  padding: var(--kg-space-3) var(--kg-space-4);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--kg-radius, 10px);
  background: #fff;
  color: var(--kg-ink);
  font-size: var(--kg-text-base);
}
.kg-blog-index .kg-universal-news input:focus-visible {
  outline: var(--kg-focus-ring) solid var(--kg-accent);
  outline-offset: 2px;
}

.kg-blog-index .kg-universal-news .kg-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--kg-space-3);
  font-size: var(--kg-text-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.86);
  cursor: pointer;
}

.kg-blog-index .kg-universal-news .kg-submit {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--kg-accent-text);
  color: #fff;
  font-size: var(--kg-text-base);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease;
}
.kg-blog-index .kg-universal-news .kg-submit:hover,
.kg-blog-index .kg-universal-news .kg-submit:focus-visible {
  background: var(--kg-accent-strong);
}

/* The honeypot must never be visible or reachable. */
.kg-blog-index .kg-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kg-blog-index .kg-form-status {
  margin: 0;
  font-size: var(--kg-text-sm);
  color: rgba(255,255,255,.8);
}

@media (min-width: 860px) {
  .kg-blog-index .kg-news-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kg-blog-index .kg-universal-news .kg-submit { transition: none; }
}


/* ---- Style guide -------------------------------------------------------
   Chrome for the living style guide at /style-guide/. Kept deliberately
   plain: this page exists to show the design system, so its own furniture
   must not compete with the components it is displaying. */

.kg-sg { flex: 1 1 100%; width: 100%; min-width: 0; }

.kg-sg__mast {
  /* The site header is a transparent overlay, so the first block on the page
     has to clear it itself - measured at 84px of overlap here before this.
     Same treatment as the About and Need Help heroes. */
  padding-block: clamp(3.5rem, 7vw, 8.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--kg-sand);
}
.kg-sg__eyebrow {
  margin: 0 0 var(--kg-space-3);
  font-size: var(--kg-text-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--kg-accent-text);
}
.kg-sg__title {
  margin: 0;
  font-family: var(--kg-font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--kg-ink-strong);
}
.kg-sg__lede {
  margin: var(--kg-space-4) 0 0; max-width: 60ch;
  font-size: var(--kg-text-lg); line-height: 1.6; color: var(--kg-muted);
}
.kg-sg__meta {
  display: inline-block;
  margin: var(--kg-space-5) 0 0;
  padding: var(--kg-space-2) var(--kg-space-4);
  border-radius: 999px;
  font-size: var(--kg-text-sm); font-weight: 700;
  background: var(--kg-sand-soft); color: var(--kg-muted);
}
.kg-sg__meta.is-pass { background: #E7F2EC; color: #245C41; }
.kg-sg__meta.is-fail { background: #FBE7E2; color: #8C2F13; }

.kg-sg__section { padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--kg-sand); }
.kg-sg__h2 {
  margin: 0 0 var(--kg-space-3);
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-2xl); font-weight: 800; color: var(--kg-ink-strong);
}
.kg-sg__h3 {
  margin: var(--kg-space-7) 0 var(--kg-space-3);
  font-size: var(--kg-text-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kg-muted);
}
.kg-sg__note { margin: 0 0 var(--kg-space-5); max-width: 66ch; color: var(--kg-muted); font-size: var(--kg-text-sm); }

/* Colour swatches */
.kg-sg__swatches { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kg-space-2); }
.kg-sg__swatch {
  display: grid;
  grid-template-columns: 40px 15rem 6rem 1fr auto;
  gap: var(--kg-space-4);
  align-items: center;
  padding: var(--kg-space-3);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius, 10px);
  background: var(--kg-surface);
}
.kg-sg__chip { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); }
.kg-sg__token { font-size: var(--kg-text-sm); color: var(--kg-ink); }
.kg-sg__hex { font-size: var(--kg-text-sm); color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.kg-sg__use { font-size: var(--kg-text-sm); color: var(--kg-muted); }
.kg-sg__ratio {
  padding: var(--kg-space-1) var(--kg-space-3);
  border-radius: 999px;
  font-size: var(--kg-text-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--kg-sand-soft); color: var(--kg-muted);
}
.kg-sg__ratio.is-pass { background: #E7F2EC; color: #245C41; }
.kg-sg__ratio.is-warn { background: #FBF0DF; color: #7A5312; }
.kg-sg__ratio.is-fail { background: #FBE7E2; color: #8C2F13; }
.kg-sg__ratio.is-info { background: var(--kg-sand-soft); color: var(--kg-muted); }

@media (max-width: 760px) {
  .kg-sg__swatch { grid-template-columns: 32px 1fr auto; row-gap: var(--kg-space-2); }
  .kg-sg__chip { width: 32px; height: 32px; }
  .kg-sg__use { grid-column: 2 / -1; }
}

/* Type scale */
.kg-sg__type { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kg-space-5); }
.kg-sg__type li { display: grid; gap: var(--kg-space-2); padding-bottom: var(--kg-space-4); border-bottom: 1px solid var(--kg-sand); }
.kg-sg__type-sample { font-family: var(--kg-font-display); font-weight: 800; line-height: 1.1; color: var(--kg-ink-strong); }
.kg-sg__type-meta { display: flex; flex-wrap: wrap; gap: var(--kg-space-4); font-size: var(--kg-text-xs); color: var(--kg-muted); }
.kg-sg__type-meta code { color: var(--kg-ink); }

/* Rows of components */
.kg-sg__row { display: flex; flex-wrap: wrap; gap: var(--kg-space-4); align-items: center; margin-bottom: var(--kg-space-5); }
.kg-sg__label { font-size: var(--kg-text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kg-muted); }
.kg-sg__inline { margin: 0; color: var(--kg-ink); }
.kg-sg__pill {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: var(--kg-space-2) var(--kg-space-4);
  border-radius: 999px; background: var(--kg-accent-soft);
  /* accent-strong, not accent-text. The accent-soft tint is warmer than paper,
     so accent-text lands at 4.36:1 on it - under the floor - while it passes at
     4.55:1 on cream. accent-strong gives 5.49:1. .kg-pill already does this;
     this demo did not, and the page's own probe caught it. */
  color: var(--kg-accent-strong); font-size: var(--kg-text-sm); font-weight: 700;
}

.kg-sg__demo { max-width: 68ch; }
.kg-sg__cards { display: grid; gap: var(--kg-space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); }

/* Forms */
.kg-sg__form { display: grid; gap: var(--kg-space-2); max-width: 34rem; }
.kg-sg__form label { font-size: var(--kg-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kg-muted); margin-top: var(--kg-space-3); }
.kg-sg__form input[type="text"],
.kg-sg__form input[type="email"],
.kg-sg__form select,
.kg-sg__form textarea {
  width: 100%; min-height: 48px;
  padding: var(--kg-space-3) var(--kg-space-4);
  border: 1px solid var(--kg-sand); border-radius: var(--kg-radius, 10px);
  background: var(--kg-surface); color: var(--kg-ink);
  font-family: inherit; font-size: var(--kg-text-base);
}
.kg-sg__form textarea { min-height: 96px; }
.kg-sg__check {
  display: flex; align-items: flex-start; gap: var(--kg-space-3);
  margin-top: var(--kg-space-3);
  font-size: var(--kg-text-sm); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--kg-ink); cursor: pointer;
}
.kg-sg__form .kg-btn { margin-top: var(--kg-space-5); justify-self: start; }
.kg-sg__form button[disabled],
.kg-sg__row button[disabled] { opacity: .45; cursor: not-allowed; }

/* -------------------------------------------------------------------------
   Long-form gaps found by building the kitchen-sink post
   -------------------------------------------------------------------------
   Writing one post that uses every content type surfaced four things the
   prose styles never covered. Each was invisible until something actually
   used it. */

/* <mark> was computing `background: rgba(0,0,0,0)` -- a highlight that did
   not highlight. Some reset had stripped the browser default and nothing
   replaced it. Ink on accent-soft measures 13.99:1. */
.kg-prose mark {
  background: var(--kg-accent-soft);
  color: var(--kg-ink-strong);
  padding: 0.1em 0.3em;
  border-radius: var(--kg-radius-sm, 4px);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* <kbd> inherited the mono family and nothing else, so a keystroke looked
   identical to inline code. It needs to read as a physical key. */
.kg-prose kbd {
  font-family: var(--kg-font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.85em;
  background: var(--kg-surface);
  color: var(--kg-ink-strong);
  border: 1px solid var(--kg-sand);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.15em 0.45em;
  white-space: nowrap;
}

/* Definition lists had margin-left AND padding-left of 0, so every <dd> sat
   flush with its <dt> and the pairing was impossible to see. */
.kg-prose dl { margin: var(--kg-space-6) 0; }
.kg-prose dt {
  font-family: var(--kg-font-display);
  font-weight: 700;
  color: var(--kg-ink-strong);
  margin-top: var(--kg-space-4);
}
.kg-prose dd {
  margin: var(--kg-space-1) 0 0;
  padding-left: var(--kg-space-4);
  border-left: 2px solid var(--kg-sand);
  color: var(--kg-muted);
}

/* ---- Chart ------------------------------------------------------------
   A bar chart with no JavaScript and no charting library.

   The data lives in real text -- every label and value is readable and
   selectable, and a screen reader gets the numbers in order without any
   ARIA. Only the bar itself is decorative, so only the bar is hidden. The
   length comes from --kg-val (0-100) set inline per row, which is the one
   place a number in markup is legitimate: it is data, not styling. */
.kg-chart {
  margin: var(--kg-space-8) 0;
  padding: var(--kg-space-6);
  background: var(--kg-surface);
  border: 1px solid var(--kg-sand);
  border-radius: var(--kg-radius);
}
.kg-chart figcaption,
.kg-chart__caption {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kg-muted);
  margin-bottom: var(--kg-space-5);
}
.kg-chart__bars {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto`. Without it this single-column
     grid sizes to max-content and the rows blow out past the container -- the
     same failure that clipped the contents rail. Measured 443px inside 335px. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kg-space-4);
}
.kg-chart__bars > li {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kg-space-3);
  margin: 0;
  min-width: 0;
}
.kg-chart__label { font-size: var(--kg-text-sm); color: var(--kg-ink); }
.kg-chart__track {
  background: var(--kg-sand-soft);
  border-radius: var(--kg-radius-full);
  height: 12px;
  overflow: hidden;
}
.kg-chart__fill {
  display: block;
  height: 100%;
  width: calc(var(--kg-val, 0) * 1%);
  background: var(--kg-accent-text);
  border-radius: var(--kg-radius-full);
}
.kg-chart__fill--muted { background: var(--kg-muted); }
.kg-chart__val {
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-sm);
  font-weight: 700;
  color: var(--kg-ink-strong);
  font-variant-numeric: tabular-nums;
}
/* Below 480px the three-column row cannot hold a readable label, a bar and a
   number. Stack label+value on one line with the bar beneath. */
@media (max-width: 480px) {
  /* Two columns for label + value, with the bar on its own row beneath.
     Every child needs explicit placement: with auto-placement the track was
     pushed into a zero-width column and the bars vanished entirely. */
  .kg-chart__bars > li { grid-template-columns: minmax(0, 1fr) auto; }
  .kg-chart__label { grid-column: 1; grid-row: 1; }
  .kg-chart__val   { grid-column: 2; grid-row: 1; text-align: right; }
  .kg-chart__track { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-chart__fill { transition: none; }
}

/* ---- Single-column grids must be allowed to shrink ---------------------
   A grid track's default minimum is min-content, so a single-column grid
   holding a long line pushes past its container instead of wrapping. The
   key-takeaways list measured 443px inside a 335px container at 375px wide.

   This is the third time this exact failure has appeared here: it clipped
   the contents rail, then broke the chart rows, then this. Any `display:
   grid` without explicit columns is a candidate.

   .kg-postnav is deliberately absent -- it takes two columns above 640px and
   a guard declared after that media query would override it.

   The flex row inside each takeaway needs the same treatment, since flex
   items default to `min-width: auto` for the same reason. */
.kg-takeaways ul,
.kg-toc__list,
.kg-toc-float__list,
.kg-faq {
  grid-template-columns: minmax(0, 1fr);
}
.kg-takeaways li { min-width: 0; }
.kg-takeaways li > * { min-width: 0; }

/* ---- Blog index: the archive as cards --------------------------------
   Replaces a numbered text list. Every post will carry a featured image, so
   the grid is built around one; until the images exist, kg_post_card() draws
   the branded monogram placeholder, which keeps the layout honest rather
   than leaving a ragged gap. */
.kg-archive__grid {
  display: grid;
  gap: var(--kg-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* Card titles on the index are H3s under the section H2, so they need to sit
   a step below the card title used in "Keep reading". */
.kg-archive__grid .kg-card__title { font-size: var(--kg-text-lg); }

.kg-archive { padding-block: var(--kg-flow) var(--kg-section-y); }
.kg-archive__title {
  margin: 0 0 var(--kg-space-6);
  font-family: var(--kg-font-display);
  font-size: var(--kg-text-2xl);
  font-weight: 700;
  color: var(--kg-ink-strong);
}