/* =============================================================================
   Krakti — Components
   assets/css/components.css  —  enqueued as 'krakti-components' (deps: krakti-layout)
   Cosmetics for every class in the CONTRACT catalog. Tokens only — no raw
   colors/spacing. Animate transform/opacity only. Designed hover/focus/active.
   ============================================================================= */

/* =============================================================================
   FOCUS RING — shared keyboard-visible ring for link-like controls
   Every interactive surface must show a DESIGNED focus state (ECC design-quality
   bar), not the invisible UA default that vanishes against tinted chips. These
   link/chip controls already carry hover/active states; this grants them the
   same token-based ring (accent outline + offset) keyboard users need. Inputs,
   cards, share buttons, pills and eyebrows define their own rings nearer their
   rules (different geometry), so they are intentionally excluded here.
   ============================================================================= */
.k-nav__link:focus-visible,
.k-section__link:focus-visible,
.k-section__title-link:focus-visible,
.k-breadcrumb__link:focus-visible,
.k-byline__author:focus-visible,
.k-tags__item:focus-visible,
.k-pagination__link:focus-visible,
.k-mostread__title a:focus-visible,
.k-authorbox__name a:focus-visible,
.k-authorbox__link:focus-visible,
.k-comment__reply a:focus-visible,
.k-footer__nav-link:focus-visible,
.k-footer__legal a:focus-visible,
.k-404__links a:focus-visible {
  outline: var(--k-focus-width) solid var(--k-color-accent);
  outline-offset: var(--k-focus-offset);
  border-radius: var(--k-radius-xs);
}

/* On the dark footer the accent ring can read low against ink-deep; brighten the
   ring to the on-ink tone so it stays clearly visible on the dark plane. */
.k-footer__nav-link:focus-visible,
.k-footer__legal a:focus-visible {
  outline-color: var(--k-color-on-ink);
}

.k-footer__social-link:focus-visible {
  outline: var(--k-focus-width) solid var(--k-color-on-ink);
  outline-offset: var(--k-focus-offset);
}

/* =============================================================================
   MASTHEAD
   ============================================================================= */
.k-masthead {
  background-color: var(--k-color-surface);
  border-bottom: 1px solid var(--k-color-rule);
  transition: box-shadow var(--k-dur-fast) var(--k-ease-standard),
    background-color var(--k-dur-fast) var(--k-ease-standard);
}

.k-masthead--scrolled {
  background-color: color-mix(in oklab, var(--k-color-surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--k-shadow-sm);
  border-bottom-color: var(--k-color-rule-strong);
}

.k-masthead--scrolled .k-masthead__inner {
  min-height: var(--k-tap);
}

/* --- Brand / wordmark --------------------------------------------------------- */
.k-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2xs);
  color: var(--k-color-ink);
  transition: var(--k-transition-transform);
}

.k-brand:hover {
  color: var(--k-color-ink);
}

.k-brand:active {
  transform: translateY(1px);
}

.k-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--k-color-brand-square);
  color: var(--k-color-brand-glyph);
  border-radius: var(--k-radius-brand);
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-wordmark);
  font-size: 1.375rem;
  line-height: var(--k-lh-solid);
  box-shadow: var(--k-shadow-xs);
}

.k-brand__wordmark {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-wordmark);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: var(--k-lh-solid);
  letter-spacing: var(--k-ls-wordmark);
  color: var(--k-color-ink);
  text-transform: uppercase;
}

/* --- Icon buttons (search/menu/close) ---------------------------------------- */
.k-icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--k-tap);
  height: var(--k-tap);
  border-radius: var(--k-radius-sm);
  color: var(--k-color-ink);
  background-color: transparent;
  transition: var(--k-transition-colors), var(--k-transition-transform);
}

.k-icon-btn svg {
  width: 1.375rem;
  height: 1.375rem;
}

.k-icon-btn:hover {
  background-color: var(--k-color-accent-soft);
  color: var(--k-color-accent-strong);
}

.k-icon-btn:active {
  transform: scale(0.94);
}

.k-icon-btn--active,
.k-icon-btn[aria-expanded="true"] {
  background-color: var(--k-color-accent-soft);
  color: var(--k-color-accent-strong);
}

/* Menu toggle hidden on desktop (drawer is mobile-only). */
@media (min-width: 64rem) {
  .k-menu-toggle {
    display: none;
  }
}

/* =============================================================================
   SEARCH PANEL
   ============================================================================= */
.k-search {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  background-color: var(--k-color-surface-2);
  border-bottom: 1px solid transparent;
  transition: grid-template-rows var(--k-dur-normal) var(--k-ease-out),
    border-color var(--k-dur-fast) var(--k-ease-standard);
}

/* The reveal target is the form rendered by get_search_form() — searchform.php
   emits .k-searchform (the single source of search markup), so the collapse
   animation must key off that class, not an orphaned .k-search__form. */
.k-search__form,
.k-search .k-searchform {
  min-height: 0;
  padding-block: 0;
  opacity: 0;
  transition: opacity var(--k-dur-fast) var(--k-ease-standard),
    padding-block var(--k-dur-normal) var(--k-ease-out);
}

.k-search.is-open,
.k-search--open {
  grid-template-rows: 1fr;
  border-bottom-color: var(--k-color-rule);
}

.k-search.is-open .k-search__form,
.k-search--open .k-search__form,
.k-search.is-open .k-searchform,
.k-search--open .k-searchform {
  padding-block: var(--k-space-sm);
  opacity: 1;
}

.k-search__input {
  padding: var(--k-space-2xs) var(--k-space-sm);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-body);
  color: var(--k-color-ink);
  background-color: var(--k-color-surface);
  border: 1px solid var(--k-color-rule-strong);
  border-radius: var(--k-radius-sm);
  transition: var(--k-transition-colors), box-shadow var(--k-dur-fast) var(--k-ease-standard);
}

.k-search__input:focus-visible {
  border-color: var(--k-color-accent);
  box-shadow: var(--k-shadow-focus);
}

.k-search__submit {
  flex: 0 0 auto;
}

/* =============================================================================
   PRIMARY NAV
   ============================================================================= */
.k-nav {
  background-color: var(--k-color-surface);
  border-bottom: 1px solid var(--k-color-rule);
}

.k-nav .k-nav__list {
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}

.k-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--k-space-xs);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-color-soft);
  transition: var(--k-transition-colors);
}

/* Accent underline grows from the link baseline on hover/active. */
.k-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--k-space-xs) - 4px);
  width: 100%;
  height: 2px;
  background-color: var(--k-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--k-dur-normal) var(--k-ease-out);
}

.k-nav__link:hover {
  color: var(--k-color-ink);
}

.k-nav__link:hover::after {
  transform: scaleX(1);
}

.k-nav__link--active,
.k-nav__link.is-active,
.k-nav__link[aria-current="page"] {
  color: var(--k-color-accent-strong);
}

.k-nav__link--active::after,
.k-nav__link.is-active::after,
.k-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* =============================================================================
   MOBILE DRAWER
   ============================================================================= */
.k-drawer__backdrop {
  background-color: color-mix(in oklab, var(--k-color-ink-deep) 50%, transparent);
  opacity: 0;
  transition: opacity var(--k-dur-normal) var(--k-ease-standard);
}

.k-drawer__panel {
  background-color: var(--k-color-surface);
  box-shadow: var(--k-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--k-dur-normal) var(--k-ease-out);
  padding: var(--k-space-md) var(--k-space-md) var(--k-space-xl);
  gap: var(--k-space-md);
}

.k-drawer.is-open,
.k-drawer--open {
  pointer-events: auto;
}

.k-drawer.is-open .k-drawer__backdrop,
.k-drawer--open .k-drawer__backdrop {
  opacity: 1;
}

.k-drawer.is-open .k-drawer__panel,
.k-drawer--open .k-drawer__panel {
  transform: translateX(0);
}

.k-drawer__header {
  padding-bottom: var(--k-space-sm);
  border-bottom: 1px solid var(--k-color-rule);
}

/* Drawer nav stacks vertically with hairlines. */
.k-drawer .k-nav,
.k-drawer .k-nav__list {
  display: block;
  max-width: none;
  padding-inline: 0;
  background: none;
  border: 0;
}

.k-drawer .k-nav__item + .k-nav__item {
  border-top: 1px solid var(--k-color-rule-faint);
}

.k-drawer .k-nav__link {
  display: block;
  width: 100%;
  padding-block: var(--k-space-sm);
  font-size: var(--k-fs-body);
  color: var(--k-color-ink);
}

.k-drawer .k-nav__link::after {
  bottom: var(--k-space-2xs);
}

/* =============================================================================
   BREAKING / LIVE BAR
   ============================================================================= */
.k-breaking {
  background-color: var(--k-color-ink-deep);
  color: var(--k-color-on-ink);
  position: relative;
  z-index: var(--k-z-breaking);
}

.k-breaking__label {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-3xs);
  flex: 0 0 auto;
  padding: var(--k-space-3xs) var(--k-space-2xs);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-micro);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-ls-label-lg);
  text-transform: uppercase;
  color: var(--k-color-on-accent);
  background-color: var(--k-color-accent);
  border-radius: var(--k-radius-xs);
}

.k-breaking--live .k-breaking__label {
  background-color: var(--k-color-live);
  color: var(--k-color-on-live);
}

.k-breaking__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--k-radius-pill);
  background-color: currentColor;
  animation: k-pulse 1.8s var(--k-ease-in-out) infinite;
}

@keyframes k-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

.k-breaking__headline {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-medium);
  color: var(--k-color-on-ink);
}

.k-breaking__headline:hover {
  color: var(--k-color-on-ink);
  text-decoration: underline;
  text-decoration-color: var(--k-color-accent);
}

/* Keyboard focus on the dark breaking bar. The base.css :focus-visible accent
   ring is ~2.7:1 on ink-deep — below the 3:1 non-text-contrast minimum (WCAG
   2.4.11). Brighten the ring to on-ink (17.5:1 on ink-deep), matching how the
   footer rescues its dark-surface rings. */
.k-breaking__headline:focus-visible {
  outline: var(--k-focus-width) solid var(--k-color-on-ink);
  outline-offset: var(--k-focus-offset);
  border-radius: var(--k-radius-xs);
}

.k-breaking__time {
  flex: 0 0 auto;
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  color: var(--k-color-on-ink-muted);
  white-space: nowrap;
}

/* Cross-fade rotation: stacked items, only the active shown. */
.k-breaking[data-k-breaking] .k-breaking__headline + .k-breaking__headline {
  display: none;
}

/* =============================================================================
   PILLS / EYEBROWS / BADGES / TIME
   ============================================================================= */
.k-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.6em;
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-micro);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--k-cat-default-ink);
  background-color: var(--k-cat-default-soft);
  border-radius: var(--k-radius-pill);
  transition: var(--k-transition-colors),
    box-shadow var(--k-dur-fast) var(--k-ease-standard);
}

/* Pill:hover fills with the SATURATED hue and uses that hue's own on-color
   (~L98) rather than the brand on-accent, so each category's filled state is
   tuned to its own background. A faint lift via shadow-xs makes the hover read
   as a press affordance without moving layout (transform/shadow only). */
a.k-pill:hover,
a.k-pill:focus-visible {
  color: var(--k-cat-default-on);
  background-color: var(--k-cat-default);
  box-shadow: var(--k-shadow-xs);
}

/* Per-category tints — each owns ONE hue across pill rest + hover so color is a
   learnable wayfinding signal (blue = Sport), never decoration. */
.k-pill--politiek {
  color: var(--k-cat-politiek-ink);
  background-color: var(--k-cat-politiek-soft);
}
a.k-pill--politiek:hover,
a.k-pill--politiek:focus-visible {
  color: var(--k-cat-politiek-on);
  background-color: var(--k-cat-politiek);
}

.k-pill--misdaad {
  color: var(--k-cat-misdaad-ink);
  background-color: var(--k-cat-misdaad-soft);
}
a.k-pill--misdaad:hover,
a.k-pill--misdaad:focus-visible {
  color: var(--k-cat-misdaad-on);
  background-color: var(--k-cat-misdaad);
}

.k-pill--economie {
  color: var(--k-cat-economie-ink);
  background-color: var(--k-cat-economie-soft);
}
a.k-pill--economie:hover,
a.k-pill--economie:focus-visible {
  color: var(--k-cat-economie-on);
  background-color: var(--k-cat-economie);
}

.k-pill--sport {
  color: var(--k-cat-sport-ink);
  background-color: var(--k-cat-sport-soft);
}
a.k-pill--sport:hover,
a.k-pill--sport:focus-visible {
  color: var(--k-cat-sport-on);
  background-color: var(--k-cat-sport);
}

.k-pill--sociaal {
  color: var(--k-cat-sociaal-ink);
  background-color: var(--k-cat-sociaal-soft);
}
a.k-pill--sociaal:hover,
a.k-pill--sociaal:focus-visible {
  color: var(--k-cat-sociaal-on);
  background-color: var(--k-cat-sociaal);
}

/* Pills carry their own focus-visible ring (they can be a card's only kicker and
   may sit above a stretched-link). Distinct from the card ring so keyboard users
   land on the pill, not the whole card. */
a.k-pill:focus-visible {
  outline: var(--k-focus-width) solid var(--k-color-accent);
  outline-offset: var(--k-focus-offset);
}

/* Eyebrow / kicker. */
.k-eyebrow {
  display: inline-block;
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-color-accent-strong);
  transition: var(--k-transition-colors);
}

a.k-eyebrow:hover {
  color: var(--k-color-accent);
}

a.k-eyebrow:focus-visible {
  outline: var(--k-focus-width) solid var(--k-color-accent);
  outline-offset: var(--k-focus-offset);
  border-radius: var(--k-radius-xs);
}

/* Per-category eyebrow tints (finding 2, touchpoint 2): when a card inside a
   category section emits .k-eyebrow--{slug}, its kicker takes the SECTION hue so
   the kicker, the section tick and the pill all read as one color. The saturated
   hue is the readable on-paper text role here (it sits on the page, not on a
   soft tint, so -ink would be too dark/low-contrast for a kicker). Hover deepens
   toward -ink. Default eyebrow stays terracotta (brand) above. */
.k-eyebrow--politiek {
  color: var(--k-cat-politiek);
}
a.k-eyebrow--politiek:hover {
  color: var(--k-cat-politiek-ink);
}

.k-eyebrow--misdaad {
  color: var(--k-cat-misdaad);
}
a.k-eyebrow--misdaad:hover {
  color: var(--k-cat-misdaad-ink);
}

.k-eyebrow--economie {
  color: var(--k-cat-economie);
}
a.k-eyebrow--economie:hover {
  color: var(--k-cat-economie-ink);
}

.k-eyebrow--sport {
  color: var(--k-cat-sport);
}
a.k-eyebrow--sport:hover {
  color: var(--k-cat-sport-ink);
}

.k-eyebrow--sociaal {
  color: var(--k-cat-sociaal);
}
a.k-eyebrow--sociaal:hover {
  color: var(--k-cat-sociaal-ink);
}

/* Badges. */
.k-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-3xs);
  padding: 0.12em 0.5em;
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-micro);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  line-height: 1.4;
  border-radius: var(--k-radius-xs);
}

.k-badge--new {
  color: var(--k-color-accent-strong);
  background-color: var(--k-color-accent-soft);
}

.k-badge--live {
  color: var(--k-color-on-live);
  background-color: var(--k-color-live);
}

.k-badge--breaking {
  color: var(--k-color-on-accent);
  background-color: var(--k-color-ink-deep);
}

/* Relative time + reading time. */
.k-time {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  color: var(--k-color-muted);
  white-space: nowrap;
}

/* "Fresh" timestamps lean on weight + a live-green tick rather than reusing the
   terracotta accent (which already means brand/links), so "recent" reads as its
   own signal instead of looking like every other link. */
.k-time--fresh {
  color: var(--k-color-ink);
  font-weight: var(--k-weight-semibold);
}

.k-time--fresh::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline-end: 0.4em;
  vertical-align: 0.1em;
  border-radius: var(--k-radius-pill);
  background-color: var(--k-color-live);
}

.k-readtime {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  color: var(--k-color-muted);
  white-space: nowrap;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-2xs);
  min-height: var(--k-tap);
  padding: var(--k-space-2xs) var(--k-space-md);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  line-height: var(--k-lh-body);
  text-align: center;
  border-radius: var(--k-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--k-transition-colors), var(--k-transition-transform),
    box-shadow var(--k-dur-fast) var(--k-ease-standard);
}

.k-btn:active {
  transform: translateY(1px);
}

.k-btn--primary {
  color: var(--k-color-on-accent);
  background-color: var(--k-color-accent);
  border-color: var(--k-color-accent);
}

.k-btn--primary:hover {
  color: var(--k-color-on-accent);
  background-color: var(--k-color-accent-hover);
  border-color: var(--k-color-accent-hover);
  box-shadow: var(--k-shadow-sm);
}

.k-btn--ghost {
  color: var(--k-color-ink);
  background-color: transparent;
  border-color: var(--k-color-rule-strong);
}

.k-btn--ghost:hover {
  color: var(--k-color-accent-strong);
  border-color: var(--k-color-accent);
  background-color: var(--k-color-accent-soft);
}

.k-btn--quiet {
  min-height: auto;
  padding: var(--k-space-3xs) 0;
  color: var(--k-color-accent-strong);
  background: none;
  border: 0;
  border-radius: var(--k-radius-xs);
}

.k-btn--quiet:hover {
  color: var(--k-color-accent);
  text-decoration: underline;
}

.k-btn--block {
  width: 100%;
}

/* Small button keeps a 36px target on touch (--k-btn-min-h-sm). On large
   pointer-friendly screens it may tighten, but is floored at the WCAG 2.5.8 AA
   minimum (--k-tap-min = 24px) — never the old bare 1.5rem that ignored the
   guard rail. */
.k-btn--sm {
  min-height: var(--k-btn-min-h-sm);
  padding: var(--k-space-2xs) var(--k-space-sm);
  font-size: var(--k-fs-meta);
}

@media (min-width: 64rem) {
  .k-btn--sm {
    min-height: var(--k-tap-min);
    padding-block: var(--k-space-3xs);
  }
}

.k-btn--lg {
  padding: var(--k-space-xs) var(--k-space-lg);
  font-size: var(--k-fs-body);
}

.k-btn:disabled,
.k-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.k-btn:disabled:active,
.k-btn[aria-disabled="true"]:active {
  transform: none;
}

.k-btn__icon {
  display: inline-grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
}

.k-btn__icon svg {
  width: 100%;
  height: 100%;
}

/* =============================================================================
   CARD — base + variants (shared story card)
   ============================================================================= */
.k-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: transparent;
  border-radius: var(--k-radius-sm);
  transition: var(--k-transition-transform),
    box-shadow var(--k-dur-normal) var(--k-ease-out);
}

/* Subtle elevation on hover so the shadow ramp earns its keep and cards read as
   liftable planes (compositor-friendly: transform + shadow only). Scoped to the
   vertical card variants — river/compact rows stay flat against their hairlines. */
.k-card--section:hover,
.k-card--featured:hover {
  transform: translateY(-2px);
  box-shadow: var(--k-shadow-md);
}

.k-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--k-radius-sm);
  background-color: var(--k-color-surface-sunk);
  aspect-ratio: 3 / 2;
}

.k-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--k-dur-slow) var(--k-ease-out);
}

.k-card:hover .k-card__img {
  transform: scale(1.045);
}

.k-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-2xs);
  padding-top: var(--k-space-xs);
}

.k-card__eyebrow {
  margin-bottom: var(--k-space-3xs);
}

.k-card__title {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h5);
  line-height: var(--k-lh-heading);
  letter-spacing: var(--k-ls-heading);
  color: var(--k-color-ink);
  text-wrap: balance;
}

.k-card__title a {
  color: inherit;
}

.k-card:hover .k-card__title,
.k-card:hover .k-card__title a {
  color: var(--k-color-accent-strong);
}

/* Stretched-link: the title's real <a class="k-card__link"> grows a transparent
   ::after over the whole card so the entire card is one click target. It sits at
   --k-z-raised; inner actionable elements (share, meta links) are lifted one
   above (see .k-card__meta a below) so they stay independently clickable and the
   overlay never swallows the WhatsApp share. */
.k-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--k-z-raised);
  border-radius: var(--k-radius-sm);
}

/* The link itself shows no ring — the ring is promoted to the whole card so the
   focus indicator frames the click target the user actually activates. */
.k-card__link:focus-visible {
  outline: none;
}

/* Keyboard focus ring lands on the CARD, but ONLY when the stretched title link
   is the focused element — not when an inner control (share button, meta link)
   takes focus, since those carry their own rings. :has() scopes it precisely;
   the @supports fallback below covers engines without :has(). */
.k-card:has(.k-card__link:focus-visible) {
  outline: var(--k-focus-width) solid var(--k-color-accent);
  outline-offset: var(--k-focus-offset);
  border-radius: var(--k-radius-sm);
}

/* Fallback for legacy engines without :has() (pre-2023 browsers): ring on
   focus-within so the card is still keyboard-discoverable. These engines can't
   express "exclude inner controls", so a focused share button may briefly show
   both its own ring and the card ring — a harmless cosmetic redundancy, not a
   functional gap. Evergreen engines match the :has() rule above and ignore this. */
@supports not selector(:has(*)) {
  .k-card:focus-within {
    outline: var(--k-focus-width) solid var(--k-color-accent);
    outline-offset: var(--k-focus-offset);
    border-radius: var(--k-radius-sm);
  }
}

.k-card__dek {
  font-size: var(--k-fs-small);
  color: var(--k-color-soft);
  line-height: var(--k-lh-snug);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.k-card__meta,
.k-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-2xs);
  margin-top: var(--k-space-3xs);
}

/* Inner links sit ABOVE the stretched-link overlay so they stay independently
   clickable (finding 6 — the overlay must not swallow them). Covers share + meta
   links AND the category pill/eyebrow kicker, which the card partials render as
   real <a> links to the category archive directly in the body (outside meta).
   The title's own .k-card__link is deliberately excluded — it IS the overlay. */
.k-card__meta .k-share,
.k-card__meta a,
.k-card__footer .k-share,
.k-card__footer a,
.k-card__body > a.k-pill,
.k-card__body > a.k-eyebrow,
.k-card__eyebrow a {
  position: relative;
  z-index: calc(var(--k-z-raised) + 1);
}

/* --- Variant: section (vertical, default workhorse) --------------------------- */
.k-card--section .k-card__media {
  aspect-ratio: 3 / 2;
}

.k-card--section .k-card__title {
  font-size: var(--k-fs-h5);
}

/* --- Variant: featured (emphasized section lead) ------------------------------ */
/* The featured card is the top plane: a real surface with a faint inset border
   and soft elevation so the lead story stacks above the paper page. */
.k-card--featured {
  background-color: var(--k-color-surface);
  border: 1px solid var(--k-color-rule-faint);
  box-shadow: var(--k-shadow-sm);
  overflow: hidden;
}

.k-card--featured .k-card__media {
  aspect-ratio: 21 / 9;
  border-radius: 0;
}

.k-card--featured .k-card__body {
  padding: var(--k-space-md);
}

.k-card--featured:hover {
  box-shadow: var(--k-shadow-lg);
}

/* Bento overlap (ELEVATION CONTRACT): when the featured lead sits ON a category
   wash (.k-section--tinted), it rests at --k-shadow-overlap so it reads as a
   plane floating OVER the colored block — depth, not a seam — then climbs to lg
   on hover as the single top-of-stack element in that region. */
.k-section--tinted .k-card--featured {
  box-shadow: var(--k-shadow-overlap);
}

.k-section--tinted .k-card--featured:hover {
  box-shadow: var(--k-shadow-lg);
}

.k-card--featured .k-card__title {
  font-size: var(--k-fs-h3);
}

.k-card--featured .k-card__dek {
  font-size: var(--k-fs-body);
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* --- Variant: river (media-left horizontal row) ------------------------------- */
.k-card--river {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--k-space-sm);
}

.k-card--river .k-card__media {
  flex: 0 0 auto;
  width: clamp(6.5rem, 28vw, 9.5rem);
  aspect-ratio: 3 / 2;
}

.k-card--river .k-card__body {
  flex: 1 1 auto;
  padding-top: 0;
}

.k-card--river .k-card__title {
  font-size: var(--k-fs-h6);
}

/* --- Variant: compact (text-led / minimal thumb) ------------------------------ */
.k-card--compact {
  flex-direction: row;
  gap: var(--k-space-sm);
  align-items: flex-start;
}

.k-card--compact .k-card__media {
  flex: 0 0 auto;
  width: 4.5rem;
  aspect-ratio: 1 / 1;
}

.k-card--compact .k-card__body {
  padding-top: 0;
}

.k-card--compact .k-card__title {
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
}

/* =============================================================================
   RIVER ("Laatste nieuws")
   ============================================================================= */
/* River header is the loudest homepage divider: heavy ink rule + accent tick
   on the title (matches the section-block language). */
.k-river__header {
  padding-bottom: var(--k-space-sm);
  margin-bottom: var(--k-space-md);
  border-bottom: 2px solid var(--k-color-ink);
}

.k-river__header > :first-child {
  position: relative;
  padding-left: var(--k-space-sm);
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h4);
  color: var(--k-color-ink);
}

.k-river__header > :first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: var(--k-radius-pill);
  background-color: var(--k-color-accent);
}

.k-river__item {
  padding-block: var(--k-space-md);
  border-top: 1px solid var(--k-color-rule);
}

.k-river__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.k-river__more {
  margin-top: var(--k-space-md);
}

/* Numbered variant — ranked rows. */
.k-river--numbered .k-river__list {
  counter-reset: k-river;
}

.k-river--numbered .k-river__item {
  counter-increment: k-river;
  display: flex;
  align-items: baseline;
  gap: var(--k-space-sm);
}

.k-river--numbered .k-river__item::before {
  content: counter(k-river);
  flex: 0 0 auto;
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-bold);
  font-size: var(--k-fs-h4);
  color: var(--k-color-accent);
  line-height: 1;
  min-width: 1.4em;
}

/* =============================================================================
   SECTION BLOCK (per-category rows)
   ============================================================================= */
.k-section__header {
  padding-bottom: var(--k-space-2xs);
  margin-bottom: var(--k-space-md);
  border-bottom: 1px solid var(--k-color-rule-strong);
}

/* Per-section accent + wash. Defaults to terracotta; category modifiers below
   remap these to the section's own hue so color carries semantic meaning. */
.k-section {
  --k-section-accent: var(--k-color-accent);
  --k-section-wash: var(--k-color-surface-2);
}

.k-section__title {
  position: relative;
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h4);
  line-height: var(--k-lh-heading);
  color: var(--k-color-ink);
  padding-left: var(--k-space-sm);
}

/* Accent tick before the section title — keyed to the category hue. */
.k-section__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: var(--k-radius-pill);
  background-color: var(--k-section-accent);
}

/* Category-specific section accents (tick + tinted wash) so Sport reads
   differently from Misdaad at a structural glance. */
.k-section--politiek {
  --k-section-accent: var(--k-cat-politiek);
  --k-section-wash: var(--k-cat-politiek-soft);
}
.k-section--misdaad {
  --k-section-accent: var(--k-cat-misdaad);
  --k-section-wash: var(--k-cat-misdaad-soft);
}
.k-section--economie {
  --k-section-accent: var(--k-cat-economie);
  --k-section-wash: var(--k-cat-economie-soft);
}
.k-section--sport {
  --k-section-accent: var(--k-cat-sport);
  --k-section-wash: var(--k-cat-sport-soft);
}
.k-section--sociaal {
  --k-section-accent: var(--k-cat-sociaal);
  --k-section-wash: var(--k-cat-sociaal-soft);
}

.k-section__title-link {
  color: inherit;
}

.k-section__title-link:hover {
  color: var(--k-color-accent-strong);
}

.k-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-3xs);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-soft);
  white-space: nowrap;
}

.k-section__link::after {
  content: "\203A"; /* › chevron */
  font-size: 1.1em;
  line-height: 1;
  transform: translateX(0);
  transition: transform var(--k-dur-fast) var(--k-ease-out);
}

.k-section__link:hover {
  color: var(--k-color-accent-strong);
}

.k-section__link:hover::after {
  transform: translateX(3px);
}

/* Tinted background variant — washes the block in the category's own soft tint
   (falls back to neutral surface-2 for unknown categories). */
.k-section--tinted {
  background-color: var(--k-section-wash);
  border-radius: var(--k-radius-md);
  padding: var(--k-space-lg) var(--k-gutter);
}

.k-section__lead {
  margin-bottom: var(--k-space-md);
}

@media (min-width: 64rem) {
  /* Optional: featured lead spans the full row when present. */
  .k-section__lead {
    margin-bottom: var(--k-space-lg);
  }
}

/* =============================================================================
   HERO MAGAZINE
   ============================================================================= */
.k-hero__lead-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--k-radius-md);
  background-color: var(--k-color-surface-sunk);
  aspect-ratio: 16 / 9;
}

.k-hero__lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--k-dur-slower) var(--k-ease-out);
}

.k-hero__lead:hover .k-hero__lead-media img {
  transform: scale(1.03);
}

.k-hero__lead-body {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-xs);
  padding-top: var(--k-space-md);
}

.k-hero__eyebrow {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-color-accent-strong);
}

.k-hero__title {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-hero);
  line-height: var(--k-lh-display);
  letter-spacing: var(--k-ls-display);
  color: var(--k-color-ink);
  text-wrap: balance;
}

.k-hero__title a {
  color: inherit;
}

.k-hero__lead:hover .k-hero__title,
.k-hero__lead:hover .k-hero__title a {
  color: var(--k-color-accent-strong);
}

.k-hero__dek {
  font-family: var(--k-font-serif);
  font-size: var(--k-fs-dek);
  line-height: var(--k-lh-snug);
  color: var(--k-color-soft);
  text-wrap: pretty;
  max-width: 42ch;
}

.k-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-sm);
  margin-top: var(--k-space-2xs);
}

/* Secondary stories — smaller, top hairline. */
.k-hero__secondary-item {
  padding-top: var(--k-space-md);
  border-top: 1px solid var(--k-color-rule);
}

.k-hero__secondary-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.k-hero__secondary-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--k-radius-sm);
  background-color: var(--k-color-surface-sunk);
  aspect-ratio: 4 / 3;
  margin-bottom: var(--k-space-xs);
}

.k-hero__secondary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--k-dur-slow) var(--k-ease-out);
}

.k-hero__secondary-item:hover .k-hero__secondary-media img {
  transform: scale(1.045);
}

.k-hero__secondary-title {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h4);
  line-height: var(--k-lh-heading);
  letter-spacing: var(--k-ls-heading);
  color: var(--k-color-ink);
}

.k-hero__secondary-title a {
  color: inherit;
}

.k-hero__secondary-item:hover .k-hero__secondary-title,
.k-hero__secondary-item:hover .k-hero__secondary-title a {
  color: var(--k-color-accent-strong);
}

@media (min-width: 64rem) {
  /* Desktop lead headline gets full editorial drama. */
  .k-hero__lead-media {
    aspect-ratio: 3 / 2;
  }
}

/* =============================================================================
   SHARE ROW
   ============================================================================= */
.k-share {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2xs);
}

.k-share__label {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-muted);
}

.k-share__btn {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--k-radius-sm);
  color: var(--k-color-soft);
  background-color: var(--k-color-surface-2);
  border: 1px solid var(--k-color-rule);
  transition: var(--k-transition-colors), var(--k-transition-transform);
}

.k-share__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.k-share__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--k-shadow-sm);
}

/* Secondary in-card actions get their OWN focus ring so keyboard users can tell
   the share button apart from the card's headline (stretched-link) focus. */
.k-share__btn:focus-visible {
  outline: var(--k-focus-width) solid var(--k-color-accent);
  outline-offset: var(--k-focus-offset);
}

.k-share__btn:active {
  transform: translateY(0);
}

/* WhatsApp — prominent, first, live-green brand tint. */
.k-share__btn--whatsapp {
  color: var(--k-color-on-live);
  background-color: var(--k-color-live);
  border-color: var(--k-color-live);
}

.k-share__btn--whatsapp:hover {
  background-color: color-mix(in oklab, var(--k-color-live) 88%, black);
  border-color: color-mix(in oklab, var(--k-color-live) 88%, black);
  color: var(--k-color-on-live);
}

.k-share__btn--facebook:hover {
  color: var(--k-cat-sport);
  border-color: var(--k-cat-sport);
}

.k-share__btn--copy:hover,
.k-share__btn--x:hover {
  color: var(--k-color-accent-strong);
  border-color: var(--k-color-accent);
}

.k-share__btn.is-copied {
  color: var(--k-color-on-live);
  background-color: var(--k-color-live);
  border-color: var(--k-color-live);
}

.k-share__feedback {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-live);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--k-dur-fast) var(--k-ease-standard),
    transform var(--k-dur-fast) var(--k-ease-out);
  pointer-events: none;
}

.k-share__feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Compact variant: icons only (card meta). */
.k-share--compact .k-share__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.k-share--compact .k-share__btn {
  width: var(--k-tap);
  height: var(--k-tap);
}

/* Single variant: larger, labeled article row. */
.k-share--single {
  flex-wrap: wrap;
  gap: var(--k-space-xs);
}

.k-share--single .k-share__btn {
  width: auto;
  height: var(--k-tap);
  gap: var(--k-space-2xs);
  padding-inline: var(--k-space-sm);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
}

/* =============================================================================
   FORMS (search + comments + fields)
   ============================================================================= */
.k-field {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-3xs);
}

.k-field__label {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-soft);
}

.k-field__input,
.k-field__textarea {
  width: 100%;
  padding: var(--k-space-2xs) var(--k-space-sm);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-body);
  color: var(--k-color-ink);
  background-color: var(--k-color-surface);
  border: 1px solid var(--k-color-rule-strong);
  border-radius: var(--k-radius-sm);
  transition: var(--k-transition-colors), box-shadow var(--k-dur-fast) var(--k-ease-standard);
}

.k-field__textarea {
  min-height: 7rem;
  line-height: var(--k-lh-body);
}

.k-field__input:focus-visible,
.k-field__textarea:focus-visible {
  border-color: var(--k-color-accent);
  box-shadow: var(--k-shadow-focus);
}

.k-field--error .k-field__input,
.k-field--error .k-field__textarea {
  border-color: var(--k-color-danger);
}

.k-field--error .k-field__input:focus-visible,
.k-field--error .k-field__textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--k-color-danger-soft);
}

.k-field__error {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  color: var(--k-color-danger);
}

.k-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-sm);
}

.k-form__row > * {
  flex: 1 1 12rem;
}

/* Search form (canonical). */
.k-searchform {
  display: flex;
  align-items: stretch;
  gap: var(--k-space-2xs);
  width: 100%;
}

.k-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--k-space-2xs) var(--k-space-sm);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-body);
  color: var(--k-color-ink);
  background-color: var(--k-color-surface);
  border: 1px solid var(--k-color-rule-strong);
  border-radius: var(--k-radius-sm);
  transition: var(--k-transition-colors), box-shadow var(--k-dur-fast) var(--k-ease-standard);
}

.k-searchform__input:focus-visible {
  border-color: var(--k-color-accent);
  box-shadow: var(--k-shadow-focus);
}

.k-searchform__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-2xs);
  min-height: var(--k-tap);
  padding: var(--k-space-2xs) var(--k-space-md);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-on-accent);
  background-color: var(--k-color-accent);
  border: 1px solid var(--k-color-accent);
  border-radius: var(--k-radius-sm);
  cursor: pointer;
  transition: var(--k-transition-colors), var(--k-transition-transform);
}

.k-searchform__submit:hover {
  background-color: var(--k-color-accent-hover);
  border-color: var(--k-color-accent-hover);
}

.k-searchform__submit:active {
  transform: translateY(1px);
}

/* =============================================================================
   NEWSLETTER BAND
   ============================================================================= */
.k-newsletter {
  background-color: var(--k-color-accent-soft);
  padding-block: var(--k-space-2xl);
  text-align: center;
  border-block: 1px solid var(--k-color-accent-soft-2);
}

.k-newsletter__title {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h3);
  line-height: var(--k-lh-display);
  letter-spacing: var(--k-ls-display);
  color: var(--k-color-ink);
}

.k-newsletter__dek {
  margin-top: var(--k-space-2xs);
  font-size: var(--k-fs-body);
  color: var(--k-color-soft);
  max-width: 46ch;
  margin-inline: auto;
}

.k-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2xs);
  justify-content: center;
  align-items: flex-start;
  margin-top: var(--k-space-md);
}

/* The email field is wrapped in .k-field (to carry its label), so .k-field is
   the flex child that should grow — not the input. Without this the input
   inherits the form's default align-items:stretch and balloons to the row
   height. Make the wrapper grow and let the input fill it normally. */
.k-newsletter__form .k-field {
  flex: 1 1 18rem;
  max-width: 24rem;
  min-width: 0;
  text-align: left;
}

.k-newsletter__input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--k-space-xs) var(--k-space-sm);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-body);
  color: var(--k-color-ink);
  background-color: var(--k-color-surface);
  border: 1px solid var(--k-color-rule-strong);
  border-radius: var(--k-radius-sm);
  transition: var(--k-transition-colors), box-shadow var(--k-dur-fast) var(--k-ease-standard);
}

.k-newsletter__input:focus-visible {
  border-color: var(--k-color-accent);
  box-shadow: var(--k-shadow-focus);
}

.k-newsletter__submit {
  flex: 0 0 auto;
}

.k-newsletter__status {
  margin-top: var(--k-space-sm);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  min-height: 1.4em;
}

.k-newsletter__status.is-success {
  color: var(--k-color-live);
}

.k-newsletter__status.is-error {
  color: var(--k-color-danger);
}

.k-newsletter__consent {
  margin-top: var(--k-space-xs);
  font-size: var(--k-fs-meta);
  color: var(--k-color-muted);
  max-width: 42ch;
  margin-inline: auto;
}

/* Honeypot field — visually + AT hidden, off-screen. */
.k-newsletter__form [name="k-website"],
.k-newsletter__form .k-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =============================================================================
   SIDEBAR WIDGETS
   ============================================================================= */
.k-widget + .k-widget {
  margin-top: var(--k-space-xl);
}

.k-widget__title {
  font-family: var(--k-font-sans);
  font-weight: var(--k-weight-bold);
  font-size: var(--k-fs-small);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-color-ink);
  padding-bottom: var(--k-space-2xs);
  margin-bottom: var(--k-space-sm);
  border-bottom: 2px solid var(--k-color-accent);
}

/* Most-read ranked list. */
.k-mostread {
  display: flex;
  flex-direction: column;
}

.k-mostread__item {
  display: flex;
  align-items: baseline;
  gap: var(--k-space-sm);
  padding-block: var(--k-space-sm);
  border-top: 1px solid var(--k-color-rule);
}

.k-mostread__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.k-mostread__rank {
  flex: 0 0 auto;
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-bold);
  font-size: var(--k-fs-h3);
  line-height: 1;
  color: var(--k-color-accent-soft-2);
  min-width: 1.2em;
  text-align: center;
}

.k-mostread__item:first-child .k-mostread__rank {
  color: var(--k-color-accent);
}

.k-mostread__title {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-semibold);
  font-size: var(--k-fs-small);
  line-height: var(--k-lh-heading);
  color: var(--k-color-ink);
}

.k-mostread__title a:hover {
  color: var(--k-color-accent-strong);
}

.k-mostread__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2xs);
  margin-top: var(--k-space-3xs);
}

/* Weather widget. */
.k-weather {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--k-space-xs) var(--k-space-sm);
  padding: var(--k-space-md);
  background-color: var(--k-color-surface-2);
  border: 1px solid var(--k-color-rule);
  border-radius: var(--k-radius-md);
}

.k-weather__icon {
  grid-row: span 2;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--k-color-accent);
}

.k-weather__city {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-soft);
}

.k-weather__temp {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-bold);
  font-size: var(--k-fs-h3);
  line-height: 1;
  color: var(--k-color-ink);
}

.k-weather__cond {
  font-size: var(--k-fs-meta);
  color: var(--k-color-muted);
}

.k-weather__meta {
  grid-column: 1 / -1;
  padding-top: var(--k-space-2xs);
  border-top: 1px solid var(--k-color-rule);
  font-size: var(--k-fs-meta);
  color: var(--k-color-muted);
}

/* Ad slot placeholders (rendered only when ads enabled). */
.k-ad-slot {
  display: grid;
  place-items: center;
  background-color: var(--k-color-surface-sunk);
  border: 1px dashed var(--k-color-rule-strong);
  border-radius: var(--k-radius-sm);
  color: var(--k-color-faint);
}

.k-ad-slot.is-disabled {
  display: none;
}

.k-ad-slot__label {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-micro);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-color-faint);
}

.k-ad-slot--rectangle {
  aspect-ratio: 300 / 250;
  width: 100%;
}

.k-ad-slot--leaderboard {
  aspect-ratio: 728 / 90;
  width: 100%;
}

/* =============================================================================
   BREADCRUMB
   ============================================================================= */
.k-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-3xs);
}

.k-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-3xs);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  color: var(--k-color-muted);
}

.k-breadcrumb__link {
  color: var(--k-color-muted);
}

.k-breadcrumb__link:hover {
  color: var(--k-color-accent-strong);
}

.k-breadcrumb__sep {
  color: var(--k-color-faint);
}

.k-breadcrumb__current {
  color: var(--k-color-soft);
  font-weight: var(--k-weight-semibold);
}

/* =============================================================================
   BYLINE
   ============================================================================= */
.k-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-2xs);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  color: var(--k-color-muted);
}

.k-byline__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--k-radius-pill);
  object-fit: cover;
  background-color: var(--k-color-surface-sunk);
}

.k-byline__author {
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-ink);
}

.k-byline__author:hover {
  color: var(--k-color-accent-strong);
}

.k-byline__sep {
  color: var(--k-color-faint);
}

.k-byline__date,
.k-byline__time,
.k-byline__readtime {
  color: var(--k-color-muted);
}

/* =============================================================================
   FIGURE / CAPTION
   ============================================================================= */
.k-figure {
  margin: 0;
}

.k-figure__img {
  width: 100%;
  height: auto;
  border-radius: var(--k-radius-md);
  background-color: var(--k-color-surface-sunk);
}

.k-figure__caption {
  margin-top: var(--k-space-2xs);
  padding-top: var(--k-space-2xs);
  border-top: 1px solid var(--k-color-rule);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  line-height: var(--k-lh-meta);
  color: var(--k-color-muted);
}

/* =============================================================================
   TAGS
   ============================================================================= */
.k-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-2xs);
  padding-top: var(--k-space-md);
  margin-top: var(--k-space-lg);
  border-top: 1px solid var(--k-color-rule);
}

.k-tags__label {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-soft);
}

.k-tags__item {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.7em;
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  font-weight: var(--k-weight-medium);
  color: var(--k-color-soft);
  background-color: transparent;
  border: 1px solid var(--k-color-rule-strong);
  border-radius: var(--k-radius-pill);
  transition: var(--k-transition-colors), var(--k-transition-transform);
}

.k-tags__item:hover {
  color: var(--k-color-accent-strong);
  border-color: var(--k-color-accent);
  background-color: var(--k-color-accent-soft);
}

.k-tags__item:active {
  transform: translateY(1px);
}

/* =============================================================================
   AUTHOR BOX
   ============================================================================= */
.k-authorbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--k-space-sm) var(--k-space-md);
  align-items: start;
  padding: var(--k-space-lg);
  margin-top: var(--k-space-xl);
  background-color: var(--k-color-surface-2);
  border: 1px solid var(--k-color-rule);
  border-radius: var(--k-radius-md);
}

.k-authorbox__avatar {
  grid-row: span 2;
  width: 4rem;
  height: 4rem;
  border-radius: var(--k-radius-pill);
  object-fit: cover;
  background-color: var(--k-color-surface-sunk);
}

.k-authorbox__name {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h5);
  color: var(--k-color-ink);
}

.k-authorbox__name a:hover {
  color: var(--k-color-accent-strong);
}

.k-authorbox__bio {
  grid-column: 2;
  font-size: var(--k-fs-small);
  line-height: var(--k-lh-body);
  color: var(--k-color-soft);
}

.k-authorbox__link {
  grid-column: 2;
  justify-self: start;
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-accent-strong);
}

.k-authorbox__link:hover {
  color: var(--k-color-accent);
  text-decoration: underline;
}

/* =============================================================================
   RELATED
   ============================================================================= */
.k-related {
  margin-top: var(--k-space-2xl);
}

/* Related/comments are post-content "furniture" headers — a quieter strong
   hairline (not the loud 2px ink of the homepage rivers/sections) so the divider
   language signals a supporting section rather than a top-level surface. */
.k-related__title {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h4);
  color: var(--k-color-ink);
  padding-bottom: var(--k-space-2xs);
  margin-bottom: var(--k-space-md);
  border-bottom: 1px solid var(--k-color-rule-strong);
}

/* =============================================================================
   COMMENTS
   ============================================================================= */
.k-comments {
  margin-top: var(--k-space-2xl);
}

.k-comments__title {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h4);
  color: var(--k-color-ink);
  padding-bottom: var(--k-space-2xs);
  margin-bottom: var(--k-space-lg);
  border-bottom: 1px solid var(--k-color-rule-strong);
}

.k-comments__list {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-lg);
}

.k-comment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--k-space-2xs) var(--k-space-sm);
}

.k-comment__avatar {
  grid-row: span 3;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--k-radius-pill);
  object-fit: cover;
  background-color: var(--k-color-surface-sunk);
}

.k-comment__author {
  font-family: var(--k-font-sans);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-ink);
}

.k-comment__meta {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  color: var(--k-color-muted);
}

.k-comment__body {
  grid-column: 2;
  font-size: var(--k-fs-body);
  line-height: var(--k-lh-body);
  color: var(--k-color-soft);
}

.k-comment__body p + p {
  margin-top: var(--k-space-2xs);
}

.k-comment__reply {
  grid-column: 2;
  justify-self: start;
}

.k-comment__reply a {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-accent-strong);
}

.k-comment__reply a:hover {
  color: var(--k-color-accent);
  text-decoration: underline;
}

.k-comment--bypostauthor {
  padding: var(--k-space-sm);
  background-color: var(--k-color-accent-soft);
  border-radius: var(--k-radius-sm);
}

.k-comment__children {
  grid-column: 1 / -1;
  margin-top: var(--k-space-md);
  margin-left: var(--k-space-lg);
  padding-left: var(--k-space-md);
  border-left: 2px solid var(--k-color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--k-space-md);
}

.k-commentform {
  margin-top: var(--k-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--k-space-sm);
}

.k-commentform__submit {
  align-self: flex-start;
}

.k-comments__closed {
  padding: var(--k-space-md);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  color: var(--k-color-muted);
  background-color: var(--k-color-surface-2);
  border: 1px solid var(--k-color-rule);
  border-radius: var(--k-radius-sm);
}

.k-comments__navigation {
  margin-top: var(--k-space-lg);
}

/* =============================================================================
   ARCHIVE / SEARCH HEADERS
   ============================================================================= */
.k-archive__header,
.k-search-results__header {
  padding-bottom: var(--k-space-md);
  margin-bottom: var(--k-space-lg);
  border-bottom: 2px solid var(--k-color-ink);
}

/* Category-archive header tint: when archive.php emits a .k-section--{slug}
   modifier the section accent token is set on the header (components.css:
   1105-1124), so the bottom rule takes the per-category hue. With no modifier
   the var is unset and falls back to ink — the default header is unchanged. */
.k-archive__header {
  border-bottom-color: var(--k-section-accent, var(--k-color-ink));
}

.k-archive__title,
.k-search-results__header > :first-child {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h2);
  line-height: var(--k-lh-display);
  letter-spacing: var(--k-ls-display);
  color: var(--k-color-ink);
}

.k-archive__description {
  margin-top: var(--k-space-xs);
  font-size: var(--k-fs-body);
  color: var(--k-color-soft);
  max-width: 60ch;
}

.k-archive__count,
.k-search-results__count {
  margin-top: var(--k-space-2xs);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  color: var(--k-color-muted);
}

.k-search-results__query {
  color: var(--k-color-accent-strong);
  font-style: italic;
}

/* =============================================================================
   EMPTY STATE
   ============================================================================= */
.k-empty {
  padding-block: var(--k-space-2xl);
  text-align: center;
}

.k-empty__title {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h3);
  color: var(--k-color-ink);
}

.k-empty__text {
  margin-top: var(--k-space-2xs);
  font-size: var(--k-fs-body);
  color: var(--k-color-soft);
  max-width: 50ch;
  margin-inline: auto;
}

.k-empty__actions {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-md);
  align-items: center;
  margin-top: var(--k-space-lg);
  max-width: 32rem;
  margin-inline: auto;
}

/* =============================================================================
   404
   ============================================================================= */
.k-404 {
  padding-block: var(--k-space-2xl);
  text-align: center;
}

.k-404__code {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-bold);
  font-size: var(--k-fs-display);
  line-height: var(--k-lh-solid);
  letter-spacing: var(--k-ls-display);
  color: var(--k-color-accent);
}

.k-404__title {
  margin-top: var(--k-space-sm);
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-display);
  font-size: var(--k-fs-h2);
  color: var(--k-color-ink);
}

.k-404__text {
  margin-top: var(--k-space-2xs);
  font-size: var(--k-fs-body);
  color: var(--k-color-soft);
  max-width: 48ch;
  margin-inline: auto;
}

.k-404__search {
  max-width: 32rem;
  margin: var(--k-space-lg) auto 0;
}

.k-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--k-space-2xs);
  margin-top: var(--k-space-lg);
}

.k-404__links a {
  display: inline-flex;
  align-items: center;
  padding: var(--k-space-3xs) var(--k-space-sm);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-soft);
  border: 1px solid var(--k-color-rule-strong);
  border-radius: var(--k-radius-pill);
  transition: var(--k-transition-colors), var(--k-transition-transform);
}

.k-404__links a:hover {
  color: var(--k-color-accent-strong);
  border-color: var(--k-color-accent);
  background-color: var(--k-color-accent-soft);
}

.k-404__links a:active {
  transform: translateY(1px);
}

/* =============================================================================
   PAGINATION
   ============================================================================= */
.k-pagination {
  margin-top: var(--k-space-xl);
}

.k-pagination__link {
  display: inline-grid;
  place-items: center;
  min-width: var(--k-tap);
  min-height: var(--k-tap);
  padding-inline: var(--k-space-2xs);
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  font-weight: var(--k-weight-semibold);
  color: var(--k-color-ink);
  border: 1px solid var(--k-color-rule-strong);
  border-radius: var(--k-radius-sm);
  transition: var(--k-transition-colors), var(--k-transition-transform);
}

.k-pagination__link:hover {
  color: var(--k-color-accent-strong);
  border-color: var(--k-color-accent);
  background-color: var(--k-color-accent-soft);
}

.k-pagination__link:active {
  transform: translateY(1px);
}

.k-pagination__link--current,
.k-pagination__link[aria-current="page"] {
  color: var(--k-color-on-accent);
  background-color: var(--k-color-accent);
  border-color: var(--k-color-accent);
}

.k-pagination__prev,
.k-pagination__next {
  font-weight: var(--k-weight-semibold);
}

.k-pagination__ellipsis {
  display: inline-grid;
  place-items: center;
  min-width: var(--k-tap);
  min-height: var(--k-tap);
  color: var(--k-color-faint);
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.k-footer {
  margin-top: var(--k-space-section);
  padding-top: var(--k-space-2xl);
  padding-bottom: var(--k-space-xl);
  background-color: var(--k-color-ink-deep);
  color: var(--k-color-on-ink);
}

.k-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-2xs);
}

.k-footer__brand .k-brand__wordmark {
  color: var(--k-color-on-ink);
}

.k-footer__tagline {
  font-family: var(--k-font-serif);
  font-size: var(--k-fs-body);
  color: var(--k-color-on-ink-muted);
  max-width: 36ch;
}

.k-footer__nav-title {
  font-family: var(--k-font-sans);
  font-weight: var(--k-weight-bold);
  font-size: var(--k-fs-small);
  letter-spacing: var(--k-ls-label);
  text-transform: uppercase;
  color: var(--k-color-on-ink);
  margin-bottom: var(--k-space-sm);
}

.k-footer__nav-link {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-small);
  color: var(--k-color-on-ink-muted);
}

.k-footer__nav-link:hover {
  color: var(--k-color-on-ink);
  text-decoration: underline;
  text-decoration-color: var(--k-color-accent);
}

.k-footer__social-link {
  display: inline-grid;
  place-items: center;
  width: var(--k-tap);
  height: var(--k-tap);
  border-radius: var(--k-radius-sm);
  color: var(--k-color-on-ink-muted);
  background-color: var(--k-color-ink-deep-2);
  transition: var(--k-transition-colors), var(--k-transition-transform);
}

.k-footer__social-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

.k-footer__social-link:hover {
  color: var(--k-color-on-accent);
  background-color: var(--k-color-accent);
  transform: translateY(-1px);
}

.k-footer__newsletter {
  margin-top: var(--k-space-md);
}

.k-footer__bottom {
  margin-top: var(--k-space-2xl);
  padding-top: var(--k-space-md);
  border-top: 1px solid var(--k-color-ink-deep-2);
}

.k-footer__copyright {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  color: var(--k-color-on-ink-muted);
}

.k-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-sm);
}

.k-footer__legal a {
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-meta);
  color: var(--k-color-on-ink-muted);
}

.k-footer__legal a:hover {
  color: var(--k-color-on-ink);
  text-decoration: underline;
}

/* =============================================================================
   PULLQUOTE (used in prose; base cosmetics here, layout in single.css)
   ============================================================================= */
.k-pullquote {
  font-family: var(--k-font-display);
  font-weight: var(--k-weight-medium);
  font-size: var(--k-fs-h4);
  line-height: var(--k-lh-snug);
  color: var(--k-color-ink);
  border-left: 3px solid var(--k-color-accent);
  padding-left: var(--k-space-md);
}