/* ==========================================================================
   Platform KSG — core CSS
   --------------------------------------------------------------------------
   Structural + component CSS. References only semantic tokens defined in the
   translation layer below; semantic tokens in turn alias WP preset vars
   generated from theme.json. Child themes override theme.json palette/fonts
   and everything downstream adapts without touching this file.
   ========================================================================== */

/* 0. Translation layer: WP preset vars -> semantic role vars ------------- */
:root {
  /* Backgrounds */
  --bg-page:         var(--wp--preset--color--background);
  --bg-surface:      var(--wp--preset--color--surface);
  --bg-inverse:      var(--wp--preset--color--secondary);
  --bg-chip:         var(--wp--preset--color--background);

  /* Text */
  --text-body:       var(--wp--preset--color--foreground);
  --text-muted:      color-mix(in srgb, var(--wp--preset--color--foreground) 72%, var(--wp--preset--color--background));
  --text-heading:    var(--wp--preset--color--secondary);
  --text-accent:     var(--wp--preset--color--primary);
  --text-highlight:  var(--wp--preset--color--accent);
  --text-on-inverse: var(--wp--preset--color--background);
  --text-on-accent:  var(--wp--preset--color--background);

  /* Derived backgrounds */
  --bg-surface-soft: color-mix(in srgb, var(--wp--preset--color--surface) 78%, var(--wp--preset--color--foreground));

  /* Borders */
  --border-subtle:   color-mix(in srgb, var(--wp--preset--color--foreground) 18%, var(--wp--preset--color--background));
  --border-strong:   var(--wp--preset--color--foreground);
  --border-accent:   var(--wp--preset--color--primary);

  /* Brand roles */
  --brand-primary:         var(--wp--preset--color--primary);
  --brand-primary-dark:    color-mix(in srgb, var(--wp--preset--color--primary) 80%, black);
  --brand-primary-tint:    color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--background));
  --brand-secondary:       var(--wp--preset--color--secondary);
  --brand-secondary-mid:   color-mix(in srgb, var(--wp--preset--color--secondary) 70%, var(--wp--preset--color--background));
  --brand-secondary-light: color-mix(in srgb, var(--wp--preset--color--secondary) 45%, var(--wp--preset--color--background));
  --brand-secondary-tint:  color-mix(in srgb, var(--wp--preset--color--secondary) 12%, var(--wp--preset--color--background));
  --brand-tertiary:        var(--wp--preset--color--accent);
  --brand-tertiary-bright: color-mix(in srgb, var(--wp--preset--color--accent) 82%, white);

  /* Status */
  --status-error:   var(--wp--preset--color--error);
  --status-warning: var(--wp--preset--color--warning);
  --status-success: var(--wp--preset--color--success);

  /* Typography
     Core.css references --font-display / --font-sans / --font-serif throughout.
     Child themes ship fontFamilies with slugs `display`, `body`, `accent-serif`
     (the convention). The parent ships `system` + `system-serif` as fallbacks
     for when no child is active. The var() fallback chain handles both. */
  --font-display: var(--wp--preset--font-family--display, var(--wp--preset--font-family--system, -apple-system, BlinkMacSystemFont, sans-serif));
  --font-sans:    var(--wp--preset--font-family--body,    var(--wp--preset--font-family--system, -apple-system, BlinkMacSystemFont, sans-serif));
  --font-serif:   var(--wp--preset--font-family--accent-serif, var(--wp--preset--font-family--system-serif, ui-serif, Georgia, serif));
  --font-display-vars:      normal;
  --font-display-vars-soft: normal;

  /* Custom theme.json tokens aliased to short names */
  --container:        var(--wp--custom--container--wide);
  --container-narrow: var(--wp--custom--container--narrow);
  --gutter:           var(--wp--custom--gutter);
  --section-y:        var(--wp--custom--section--y);
  --section-y-sm:     var(--wp--custom--section--y-sm);
  --section-y-xs:     var(--wp--custom--section--y-xs);

  --radius-xs:   var(--wp--custom--radius--xs);
  --radius-sm:   var(--wp--custom--radius--sm);
  --radius-md:   var(--wp--custom--radius--md);
  --radius-lg:   var(--wp--custom--radius--lg);
  --radius-pill: var(--wp--custom--radius--pill);
  --radius-blob: var(--wp--custom--radius--blob);

  --stroke-hair: var(--wp--custom--stroke--hair);
  --stroke-firm: var(--wp--custom--stroke--firm);

  --motion-quick:  var(--wp--custom--motion--quick);
  --motion-smooth: var(--wp--custom--motion--smooth);
  --motion-rise:   var(--wp--custom--motion--rise);

  --tracking-tight:   var(--wp--custom--tracking--tight);
  --tracking-normal:  var(--wp--custom--tracking--normal);
  --tracking-label:   var(--wp--custom--tracking--label);
  --tracking-eyebrow: var(--wp--custom--tracking--eyebrow);

  --leading-heading: var(--wp--custom--leading--heading);
  --leading-body:    var(--wp--custom--leading--body);
  --leading-lead:    var(--wp--custom--leading--lead);

  /* Shadows */
  --shadow-card:    var(--wp--preset--shadow--card);
  --shadow-listing: var(--wp--preset--shadow--listing);
  --shadow-btn:     var(--wp--preset--shadow--button);

  /* Focus */
  --focus-ring-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
  --focus-ring:       0 0 0 3px var(--focus-ring-color);
  --focus-offset:     var(--wp--custom--focus--offset);

  /* Layers */
  --z-nav:       50;
  --z-sticky:    40;
  --z-grain:     100;
  --z-skip-link: 200;
}

/* 1. Reset + body ------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6) { scroll-margin-top: calc(82px + 1.5rem); }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* 2. Utility: containers + section rhythm ------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--container-narrow); }

/* Measure utilities — cap heading/text line length without inline styles.
   Use the `className` block attribute (valid) instead of an inline max-width
   (not a block attribute → invalid block content). */
.u-measure-14 { max-width: 14ch; }
.u-measure-18 { max-width: 18ch; }
.u-measure-20 { max-width: 20ch; }
.u-measure-22 { max-width: 22ch; }
.u-measure-24 { max-width: 24ch; }
.u-balance    { text-wrap: balance; }
.ksg-lead  { max-width: 48ch; }

.section         { padding-block: var(--section-y); }
.section-tight   { padding-block-start: 1.5rem; }
.section-seamless{ padding-block-start: 0; }
.section-surface,
.is-style-ksg-section-surface {
  background: var(--bg-surface);
  border-block: var(--stroke-hair) solid var(--border-subtle);
}
.section-inverse,
.is-style-ksg-section-inverse {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
}

/* Vertical rhythm fallback: any full-width <section> that doesn't set its own
   vertical padding (heroes, bands, stats opt out via their own class / inline
   padding, which win over this zero-specificity rule) gets a comfortable
   block padding. This also guarantees breathing room above the flush footer. */
:where(section.wp-block-group.alignfull) { padding-block: var(--section-y-sm); }
/* Keep the reduced top for tight sections, but give them a real bottom. */
.section-tight { padding-block-end: var(--section-y-sm); }

hr.rule {
  border: 0;
  block-size: var(--stroke-hair);
  background: var(--border-subtle);
  margin-block: 2rem;
}

/* 3. Eyebrow ------------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  block-size: 1px;
  background: currentColor;
  display: inline-block;
}
/* On dark backgrounds the accent has too little contrast, so switch to the
   highlight colour. Done by context rather than by an extra class, so the
   Eyebrow block just works wherever an editor drops it. The explicit
   modifier stays supported for content saved before this rule existed. */
.section-inverse .eyebrow,
.is-style-ksg-section-inverse .eyebrow,
.ksg-cta-band .eyebrow,
.site-footer .eyebrow,
.eyebrow--on-inverse { color: var(--text-highlight); }

/* 4. Italic display inline accent (headline pull) ----------------------- */
.em-serif,
h1 em, h2 em, h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--text-accent);
  letter-spacing: var(--tracking-tight);
}

/* 5. Drop cap for long prose ------------------------------------------- */
.has-drop-cap:not(:focus)::first-letter,
.drop::first-letter {
  font-family: var(--font-serif);
  font-size: 4.6em;
  float: left;
  line-height: 0.85;
  padding: 0.08em 0.12em 0 0;
  color: var(--text-accent);
  font-weight: 500;
}

/* 6. Prose --------------------------------------------------------------- */
.prose p,
.is-style-ksg-prose p {
  font-size: 1.06rem;
  color: var(--text-muted);
  margin-bottom: 1em;
  max-width: 62ch;
  text-wrap: pretty;
}
.prose p.lead,
.is-style-ksg-prose p.lead {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--text-body);
  max-width: 38ch;
  line-height: var(--leading-lead);
}
.prose h2,
.is-style-ksg-prose h2 { margin-top: 1rem; }
.prose h3,
.is-style-ksg-prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; color: var(--text-heading); }

.prose-two,
.is-style-ksg-prose-two {
  column-count: 2;
  column-gap: 3rem;
  column-rule: var(--stroke-hair) solid var(--border-subtle);
}
@media (max-width: 760px) { .prose-two,
  .is-style-ksg-prose-two { column-count: 1; } }
.prose-two p,
.is-style-ksg-prose-two p { break-inside: avoid; margin-bottom: 0.9em; }

/* 7. Pullquote ---------------------------------------------------------- */
.pullquote,
.is-style-ksg-pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  line-height: 1.15;
  color: var(--text-heading);
  max-width: 22ch;
  border-top: var(--stroke-hair) solid var(--border-accent);
  border-bottom: var(--stroke-hair) solid var(--border-accent);
  padding: 1.5rem 0;
  margin: 2.5rem 0;
}
.pullquote::before,
.is-style-ksg-pullquote::before {
  content: "\276E\276F";
  display: block;
  color: var(--text-accent);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.pullquote--wide { max-width: none; }

/* 8. Flourish separator ------------------------------------------------ */
.flourish,
.is-style-ksg-flourish {
  display: block;
  text-align: center;
  color: var(--text-accent);
  font-size: 1.2rem;
  margin: 2rem 0;
  letter-spacing: 1em;
}
.flourish::before,
.is-style-ksg-flourish::before { content: "\2767 \2766 \2767"; }

/* 9. Site header + footer scaffolding ---------------------------------- */
/* Sticky footer: make the page a full-height column so the footer never
   floats up on short pages — it sits at least at the bottom of the viewport. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}
.wp-site-blocks > main { flex: 1 0 auto; }

/* The header template-part wraps the nav and is a direct child of the page
   root, so sticky must live HERE (sticking the inner bar to its own wrapper
   gives no scroll room). */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
/* When logged in, the WP admin bar is fixed at the top (z-index 99999), so a
   sticky header at top:0 slides behind it — covering the top of the nav and
   killing hover on the links. Offset the stick point by the admin-bar height.
   At <=600px the admin bar is position:absolute (scrolls away), so no offset. */
.admin-bar header.wp-block-template-part { top: 32px; }
@media screen and (min-width: 601px) and (max-width: 782px) {
  .admin-bar header.wp-block-template-part { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar header.wp-block-template-part { top: 0; }
}
.ksg-nav {
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
  backdrop-filter: saturate(1.1) blur(8px);
  transition: box-shadow var(--motion-smooth), background var(--motion-smooth), padding var(--motion-smooth);
}
/* Elevate + condense the sticky header once the page scrolls.
   Scroll-driven animation where supported; harmless no-op otherwise. */
@supports (animation-timeline: scroll()) {
  .ksg-nav {
    animation: ksg-nav-elevate linear both;
    animation-timeline: scroll(root block);
    animation-range: 2rem 9rem;
  }
  @keyframes ksg-nav-elevate {
    to {
      box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--text-heading) 55%, transparent);
      background: color-mix(in srgb, var(--bg-page) 96%, transparent);
    }
  }
}

/* Footer template-part wrapper inherits the root blockGap margin; remove it
   so the footer sits flush against the section above. */
footer.wp-block-template-part { margin-block-start: 0; }

.site-footer {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding: clamp(3rem, 5vw, 5rem) 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer a { transition: color var(--motion-quick); }
.site-footer a:hover { color: var(--text-highlight); }

.site-footer .wp-block-columns { margin-bottom: 3rem; }
.site-footer h4 {
  color: var(--text-on-inverse);
  font-weight: 400;
  line-height: 1.1;
}
.site-footer h5 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-highlight);
  margin-bottom: 1.25rem;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: var(--stroke-hair) solid color-mix(in srgb, var(--text-on-inverse) 15%, transparent);
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--text-on-inverse) 65%, transparent);
  flex-wrap: wrap;
  gap: 1rem;
}

/* 9b. Navigation -------------------------------------------------------- */
.wp-block-navigation { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.wp-block-navigation .wp-block-navigation-item__content {
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding-block: 1.3rem;          /* full bar height: link top→bottom = bar */
  padding-inline: 0;
  position: relative;
  transition: color var(--motion-quick);
}
/* Centre the logo and let the (taller) nav define the bar height, so each
   link spans the whole bar — the dropdown then drops exactly under the bar
   edge and the active/hover underline sits right on it. */
.ksg-nav > .wp-block-group { align-items: center; }
/* Animated underline — grows from the left on hover and stays put on the
   current page. Same bar drives hover + active so the cue reads instantly. */
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 2px;
  background: var(--text-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-smooth);
}
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--text-heading); }
.wp-block-navigation .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

/* Active page (and its parent when on a sub-page): stronger weight + colour
   and a persistent underline. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--text-heading);
  font-weight: 600;
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* Submenu / dropdown panels — fully self-contained (positioning + show/hide)
   so behaviour never depends on core's view CSS loading. Dark, on-brand
   (matches the footer), high-contrast light text (WCAG AA). Opens on hover,
   keyboard focus, AND the block's click toggle (.is-menu-open). */
.wp-block-navigation .wp-block-navigation-item.has-child { position: relative; }
/* Simplest universal dropdown: display none -> block on hover/focus/open.
   Attached to the bar (no gap) so hover never drops, and no visibility/
   opacity/transform/pointer-events tricks that render differently across
   browsers. */
/* Desktop dropdown only. Below this width the Navigation block renders the
   same markup as a full-screen overlay that core paints white, so any of
   these declarations left unscoped puts on-dark colours on a white panel.
   Every declaration in the block is scoped, not just the colour ones -
   see Autive WP standards 1.7.0. */
@media (min-width: 600px) {
  .wp-block-navigation .wp-block-navigation__submenu-container {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: calc(var(--z-nav) + 1);
    min-inline-size: 15rem;
    margin: 0;
    padding: 0.45rem;
    list-style: none;
    background-color: var(--bg-inverse);
    border: var(--stroke-hair) solid color-mix(in srgb, var(--text-on-inverse) 16%, transparent);
    border-radius: var(--radius-md);
    box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--text-heading) 80%, transparent);
  }
  .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child.is-menu-open > .wp-block-navigation__submenu-container,
  .wp-block-navigation .wp-block-navigation__submenu-container.is-menu-open {
    display: block;
  }
  .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    inline-size: 100%;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    color: var(--text-on-inverse);
    text-transform: none;          /* readable: drop the bar's uppercase tracking */
    letter-spacing: normal;
    font-size: 0.9rem;
    transition: background var(--motion-quick), padding-inline-start var(--motion-quick);
  }
  .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
  .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
  .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
    background-color: color-mix(in srgb, var(--text-on-inverse) 16%, transparent);
    color: var(--text-on-inverse);
    padding-inline-start: 1.1rem;
  }
}

/* 9c. Site logo — cap height so a horizontal wordmark keeps the bar compact. */
.ksg-nav .wp-block-site-logo img,
.ksg-nav .custom-logo {
  /* Fixed height + auto width so an SVG (no intrinsic size) scales by its
     viewBox instead of collapsing to 0. */
  height: clamp(34px, 4.6vw, 44px);
  width: auto;
  max-width: min(72vw, 320px);
}

/* 9d. Hero media + anniversary seal ------------------------------------ */
.ksg-hero-media { position: relative; display: inline-block; }

/* Stamped anniversary seal — inline SVG so it uses the theme display font.
   Circular text wraps a large serif "20". Sits, slightly askew, over the
   top-right of the hero blob like a wax stamp. */
.ksg-seal {
  position: absolute;
  inset-block-start: clamp(-3rem, -3vw, -1.5rem);
  inset-inline-end: clamp(-1.25rem, -1.5vw, -0.25rem);
  z-index: 2;
  inline-size: clamp(6.5rem, 16vw, 9.75rem);
  rotate: -7deg;
  filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--text-heading) 38%, transparent));
  transition: rotate var(--motion-smooth), scale var(--motion-smooth);
}
.ksg-hero-media:hover .ksg-seal { rotate: -3deg; scale: 1.04; }
.ksg-seal svg { display: block; inline-size: 100%; block-size: auto; }
.ksg-seal__disc  { fill: var(--bg-page); }
.ksg-seal__ring  { fill: none; stroke: var(--brand-primary); stroke-width: 1.4; }
.ksg-seal__hair  { fill: none; stroke: color-mix(in srgb, var(--brand-secondary) 55%, transparent); stroke-width: 0.75; }
.ksg-seal__arc {
  fill: var(--brand-secondary);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.ksg-seal__num {
  fill: var(--brand-primary);
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 500;
  font-variation-settings: var(--font-display-vars);
}
.ksg-seal__label {
  fill: var(--brand-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
}
.ksg-seal__star { fill: var(--brand-tertiary); font-size: 13px; }

/* 10. Buttons (core/button overrides) ---------------------------------- */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: transform var(--motion-quick), background var(--motion-quick), color var(--motion-quick), box-shadow var(--motion-quick);
}
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border: var(--stroke-hair) solid var(--border-strong);
  background: transparent;
  color: var(--text-body);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--border-strong);
  color: var(--text-on-inverse);
}

/* Focus rings ----------------------------------------------------------- */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
.wp-block-button__link:focus-visible {
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}

/* 11. Stats strip ------------------------------------------------------- */
.ksg-stats {
  border-block: var(--stroke-hair) solid var(--border-subtle);
  background: var(--bg-surface);
  padding-block: var(--section-y-xs);
}
.ksg-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 720px) {
  .ksg-stats__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.ksg-stat { padding: 0 1rem; }
.ksg-stat + .ksg-stat { border-left: var(--stroke-hair) dashed var(--border-subtle); }
@media (max-width: 720px) {
  .ksg-stat + .ksg-stat {
    border-left: 0;
    border-top: var(--stroke-hair) dashed var(--border-subtle);
    padding-top: 1.5rem;
  }
}
.ksg-stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3vw + 1rem, 4rem);
  color: var(--text-heading);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--font-display-vars-soft);
}
.ksg-stat__num small {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-accent);
  font-size: 0.55em;
  margin-left: 0.2em;
  vertical-align: middle;
}
.ksg-stat__label {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* 12. Section split ----------------------------------------------------- */
.ksg-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.ksg-split--media-right { grid-template-columns: 1.2fr 1fr; }
@media (max-width: 860px) {
  .ksg-split,
  .ksg-split--media-right { grid-template-columns: 1fr; }
}

/* 13. Card grid --------------------------------------------------------- */
.ksg-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) { .ksg-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ksg-cards { grid-template-columns: 1fr; } }

.ksg-card {
  background: var(--bg-surface);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth);
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .ksg-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
  }
}
.ksg-card__date {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
  font-weight: 500;
}
/* Equal-size news cards: stretch every card to the tallest in its row, clamp
   the excerpt, and pin the read-more link to the bottom. */
.ksg-cards { align-items: stretch; }
.ksg-cards > li { display: flex; }
.ksg-cards > li > .ksg-card { inline-size: 100%; block-size: 100%; }
.ksg-card .wp-block-post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ksg-card .wp-block-read-more,
.ksg-card .wp-block-post-excerpt .wp-block-post-excerpt__more-link { margin-top: auto; }

/* 14. Agenda list ------------------------------------------------------- */
.ksg-agenda-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 2rem;
  align-items: center;
  padding-block: 1.5rem;
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
  transition: padding var(--motion-quick);
}
@media (prefers-reduced-motion: no-preference) {
  .ksg-agenda-row:hover { padding-left: 1rem; }
}
.ksg-agenda-row__date {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-heading);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ksg-agenda-row__date small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-top: 0.3rem;
}
@media (max-width: 640px) {
  .ksg-agenda-row { grid-template-columns: 80px 1fr; }
}

/* 15. CTA band ---------------------------------------------------------- */
.ksg-cta-band {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.ksg-cta-band__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 780px) {
  .ksg-cta-band__grid { grid-template-columns: 1fr; }
}
.ksg-cta-band h2 { color: var(--text-on-inverse); max-width: 16ch; }
.ksg-cta-band p  {
  color: color-mix(in srgb, var(--text-on-inverse) 82%, transparent);
  max-width: 52ch;
  margin-top: 1rem;
}

/* 16. Page hero --------------------------------------------------------- */
.ksg-page-hero {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
}
.ksg-page-hero h1 {
  font-size: var(--wp--preset--font-size--display);
  margin-top: 1rem;
  max-width: 18ch;
  text-wrap: balance;
}
.ksg-page-hero__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1vw + 1rem, 1.55rem);
  color: var(--text-muted);
  margin-top: 1.5rem;
  max-width: 46ch;
  line-height: var(--leading-lead);
}
.ksg-page-hero__split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: end;
}
@media (max-width: 780px) {
  .ksg-page-hero__split { grid-template-columns: 1fr; }
}

/* 17. Timeline ---------------------------------------------------------- */
.ksg-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2rem;
}
@media (max-width: 760px) { .ksg-timeline { grid-template-columns: 1fr; } }
.ksg-timeline__step {
  padding: 2rem 1.5rem;
  border-left: var(--stroke-firm) solid var(--border-subtle);
  position: relative;
}
.ksg-timeline__step:first-child { border-left: var(--stroke-firm) solid var(--border-accent); }
.ksg-timeline__step::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 2rem;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--bg-page);
  border: var(--stroke-firm) solid var(--border-accent);
}
.ksg-timeline__year {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--text-heading);
  line-height: 1;
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ksg-timeline__step h4,
.ksg-timeline__step p { margin-left: 1.5rem; }
.ksg-timeline__step p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* 18. Trait grid -------------------------------------------------------- */
.ksg-traits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 860px) { .ksg-traits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ksg-traits { grid-template-columns: 1fr; } }
.ksg-trait {
  padding: 1.5rem;
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
}
.ksg-trait__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--text-accent);
  line-height: 1;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: var(--font-display-vars-soft);
}
/* Trait description — muted (replaces inline opacity on the paragraph). */
.ksg-trait p:not(.ksg-trait__num) { color: var(--text-muted); }

/* 19. Breed / attributes card ------------------------------------------ */
.ksg-attributes-card {
  background: var(--bg-surface);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: clamp(2rem, 3vw, 3rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 780px) {
  .ksg-attributes-card { grid-template-columns: 1fr; }
}
.ksg-attributes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ksg-attributes-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: var(--stroke-hair) dashed var(--border-subtle);
  font-size: 0.95rem;
}
.ksg-attributes-list li > *:first-child {
  font-family: var(--font-display);
  font-weight: 430;
  color: var(--text-accent);
}
.ksg-attributes-list li > *:last-child {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
}

/* 20. Photo strip (3-up asymmetric) ------------------------------------ */
.ksg-photo-strip {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 1rem;
  block-size: 360px;
  margin-top: 3rem;
}
@media (max-width: 680px) {
  .ksg-photo-strip { grid-template-columns: 1fr 1fr; block-size: auto; }
  .ksg-photo-strip > * { aspect-ratio: 4/3; }
}
.ksg-photo-strip > * {
  background: var(--bg-surface);
  border-radius: var(--radius-xs);
  overflow: hidden;
  position: relative;
}

/* 21. FAQ (core/details stack) ----------------------------------------- */
.ksg-faq .wp-block-details {
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
  padding-block: 1.25rem;
}
.ksg-faq .wp-block-details:last-child { border-bottom: 0; }
.ksg-faq .wp-block-details summary {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-heading);
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.ksg-faq .wp-block-details summary::marker { content: ""; }
.ksg-faq .wp-block-details summary::after {
  content: "+";
  color: var(--text-accent);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform var(--motion-quick);
}
.ksg-faq .wp-block-details[open] summary::after { content: "\2013"; }

.ksg-faq-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 760px) {
  .ksg-faq-layout { grid-template-columns: 1fr; }
}

/* 21b. Post-terms chips (Query Loop taxonomy badges) -------------------- */
/* Universal chip rendering for any pattern that drops a wp:post-terms or
   manual .ksg-chip-tag element. One color, one shape — child themes
   can override the bg via the role token --bg-chip if they want.       */
.ksg-chip-tag,
.wp-block-post-terms a {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-primary) 14%, var(--bg-page));
  color: var(--brand-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1.2;
  transition: background var(--motion-quick), color var(--motion-quick);
}
.wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus-visible,
.ksg-chip-tag:hover {
  background: var(--brand-primary);
  color: var(--text-on-accent);
}

/* 21c. Ghost arrow link — replaces nested-underline patterns ----------- */
.ksg-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand-primary);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
  padding-bottom: 0.15rem;
  transition: color var(--motion-quick), border-color var(--motion-quick), gap var(--motion-quick);
}
.ksg-arrow-link::after {
  content: "→";
  display: inline-block;
  transition: transform var(--motion-quick);
}
.ksg-arrow-link:hover,
.ksg-arrow-link:focus-visible {
  color: var(--brand-secondary);
  border-bottom-color: var(--brand-secondary);
  gap: 0.65rem;
}
.ksg-arrow-link:hover::after,
.ksg-arrow-link:focus-visible::after {
  transform: translateX(2px);
}

/* 22. Listings grid + chips (marketplace) ------------------------------ */
.ksg-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding-block: 1rem;
  border-block: var(--stroke-hair) solid var(--border-subtle);
  margin-bottom: 2.5rem;
}
.ksg-filter-bar__label {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.5rem;
}
.ksg-chip {
  padding: 0.5rem 1rem;
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  background: var(--bg-chip);
  color: var(--text-body);
  transition: background var(--motion-quick), color var(--motion-quick), border-color var(--motion-quick);
}
.ksg-chip:hover,
.ksg-chip.is-active {
  background: var(--brand-secondary);
  color: var(--text-on-inverse);
  border-color: var(--brand-secondary);
}

.ksg-listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .ksg-listings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ksg-listings { grid-template-columns: 1fr; } }

.ksg-listing {
  background: var(--bg-page);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth);
}
@media (prefers-reduced-motion: no-preference) {
  .ksg-listing:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-listing);
  }
}
.ksg-listing__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}
.ksg-listing__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--bg-page);
  color: var(--text-body);
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: var(--stroke-hair) solid var(--border-subtle);
}
.ksg-listing__tag--primary   { background: var(--brand-primary);   color: var(--text-on-accent);  border-color: var(--brand-primary); }
.ksg-listing__tag--secondary { background: var(--brand-secondary); color: var(--text-on-inverse); border-color: var(--brand-secondary); }

.ksg-listing__body   { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex-grow: 1; }
.ksg-listing__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.25rem;
  border-top: var(--stroke-hair) dashed var(--border-subtle);
  font-size: 0.85rem;
}
.ksg-listing__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}

/* 23. Category duo ------------------------------------------------------ */
.ksg-cat-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 720px) { .ksg-cat-duo { grid-template-columns: 1fr; } }
.ksg-cat-card {
  padding: 2rem;
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 1rem;
  align-items: center;
  transition: transform var(--motion-quick), border-color var(--motion-quick);
}
@media (prefers-reduced-motion: no-preference) {
  .ksg-cat-card:hover { transform: translateY(-2px); }
}
.ksg-cat-card--primary {
  background: linear-gradient(135deg, var(--brand-primary-tint) 0%, var(--bg-surface) 100%);
  border-color: var(--brand-primary);
}
.ksg-cat-card--secondary {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--brand-secondary-tint) 100%);
  border-color: var(--brand-secondary-light);
}
.ksg-cat-count {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--text-accent);
  text-align: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 24. Benefits list (icon checklist) ----------------------------------- */
.ksg-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ksg-benefits li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.ksg-benefits li::before {
  content: "";
  display: block;
  inline-size: 24px;
  block-size: 24px;
  margin-top: 2px;
  background-color: var(--text-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
}

/* 25. Pill note --------------------------------------------------------- */
.ksg-pill-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface-soft);
  color: var(--text-muted);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  border: var(--stroke-hair) solid var(--border-subtle);
}
.ksg-pill-note::before {
  content: "\2022";
  color: var(--text-accent);
  font-size: 0.85rem;
  line-height: 1;
}

/* 26. Inline link (underlined small accent) ---------------------------- */
a.inline-link {
  border-bottom: var(--stroke-hair) solid var(--text-accent);
  transition: color var(--motion-quick);
}
a.inline-link:hover { color: var(--text-accent); }

/* 27. Form card wrapper ------------------------------------------------ */
.ksg-form-card {
  background: var(--bg-surface);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
/* Form-card intro line — muted + capped (replaces inline opacity/max-width).
   Excludes the eyebrow, which keeps its own accent color. */
.ksg-form-card p:not(.eyebrow) { color: var(--text-muted); max-width: 48ch; }

/* 28. Skip link --------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  transform: translateY(-150%);
  z-index: var(--z-skip-link);
  background: var(--brand-primary);
  color: var(--text-on-accent);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  transition: transform var(--motion-quick);
}
.skip-link:focus { transform: translateY(0); }