:root {
  --kf-width-narrow: 35rem;
  --kf-width-editorial: 44rem;
  --kf-width-media: 82rem;
  --kf-width-immersive: 100rem;
  --kf-page-gutter: clamp(1.25rem, 4vw, 4rem);

  --kf-space-xs: var(--wp--preset--spacing--xs);
  --kf-space-s: var(--wp--preset--spacing--s);
  --kf-space-m: var(--wp--preset--spacing--m);
  --kf-space-l: var(--wp--preset--spacing--l);
  --kf-space-xl: var(--wp--preset--spacing--xl);
  --kf-section-space: var(--kf-space-xl);

  /* Stable semantic type aliases. WordPress may normalize h2/h3/h4 slugs as h-2/h-3/h-4. */
  --kf-font-size-h2: var(--wp--preset--font-size--h-2, var(--wp--preset--font-size--h2, 2.75rem));
  --kf-font-size-h3: var(--wp--preset--font-size--h-3, var(--wp--preset--font-size--h3, 1.875rem));
  --kf-font-size-h4: var(--wp--preset--font-size--h-4, var(--wp--preset--font-size--h4, 1.375rem));

  --kf-color-base: var(--wp--preset--color--background);
  --kf-color-surface: var(--wp--preset--color--surface);
  --kf-color-text: var(--wp--preset--color--foreground);
  --kf-color-primary: var(--wp--preset--color--accent);
  --kf-color-primary-dark: var(--wp--preset--color--accent-dark);
  --kf-color-muted: var(--wp--preset--color--muted);
  --kf-color-border: color-mix(in srgb, var(--kf-color-text) 12%, transparent);
  --kf-radius: .35rem;
  --kf-shadow: 0 .5rem 2rem color-mix(in srgb, var(--kf-color-text) 8%, transparent);
  --kf-header-height: 7rem;
  --kf-header-height-compact: 4.75rem;
  --kf-transition: 220ms ease;

  --kf-header-background: var(--kf-color-base);
  --kf-header-link-color: var(--wp--preset--color--foreground);
  --kf-header-secondary-link-color: color-mix(in srgb, var(--wp--preset--color--foreground) 72%, transparent);
  --kf-mobile-menu-background: var(--kf-color-base);
  --kf-mobile-menu-link-color: var(--wp--preset--color--foreground);
  --kf-mobile-menu-secondary-link-color: var(--wp--preset--color--foreground);
  --kf-mobile-menu-divider-color: #aaa;
  --kf-mobile-menu-focus-color: #ffffff;
  --kf-mobile-menu-active-color: var(--kf-color-primary);
  --kf-mobile-logo-fill: var(--kf-mobile-menu-link-color);
  --kf-mobile-logo-stroke: var(--kf-mobile-menu-link-color);
  --kf-header-current-height: var(--kf-header-height);
}

html { scroll-behavior: smooth; }
body { margin: 0; overflow-wrap: break-word; }

:where(h1, h2, h3, h4, .wp-block-post-title, .wp-block-heading) {
  text-wrap: balance;
}

:where(p, li, figcaption) {
  text-wrap: pretty;
}

:where(small, figcaption, .wp-element-caption) {
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.45;
}
img, video { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Editorial links -------------------------------------------------------- */
:where(.entry-content, .wp-block-post-content, .kf-section, .kf-hero__content) a:not(.wp-element-button):not(.wp-block-button__link):not([class*="kf-"]) {
  color: var(--kf-color-primary-dark);
  text-decoration-line: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--kf-transition), text-decoration-color var(--kf-transition), text-underline-offset var(--kf-transition);
}

:where(.entry-content, .wp-block-post-content, .kf-section, .kf-hero__content) a:not(.wp-element-button):not(.wp-block-button__link):not([class*="kf-"]):hover {
  color: var(--kf-color-primary);
  text-decoration-color: currentColor;
  text-underline-offset: .24em;
}

/* Buttons and CTAs ------------------------------------------------------ */
:where(.wp-element-button, .wp-block-button__link) {
  padding-block: .58rem;
  padding-inline: 1.2rem;
  border: 1px solid transparent;
  transition:
    color var(--kf-transition),
    background-color var(--kf-transition),
    border-color var(--kf-transition),
    box-shadow var(--kf-transition),
    transform var(--kf-transition);
}

:where(.wp-element-button, .wp-block-button__link):hover {
  background: var(--kf-color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--kf-color-primary-dark) 18%, transparent);
}

:where(.wp-element-button, .wp-block-button__link):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kf-color-primary) 65%, white);
  outline-offset: 3px;
  background: var(--kf-color-primary-dark);
}

:where(.wp-element-button, .wp-block-button__link):active {
  transform: translateY(0) scale(.985);
  box-shadow: none;
}