:root {
  /* Strict rhythm on an 8px base. */
  --kb-space-2xs: 8px;
  --kb-space-xs: 16px;
  --kb-space-sm: 24px;
  --kb-space-md: 32px;
  --kb-space-lg: 64px;
  --kb-space-xl: 104px;

  /* The section gap is a design element, not padding.
     It compresses on smaller screens but never below 72px. */
  --kb-space-section: clamp(72px, 11vw, 168px);

  /* Measures. */
  --kb-measure-content: 1200px;
  --kb-measure-prose: 640px;
  --kb-gutter: clamp(24px, 5vw, 64px);

  /* Architectural edges. Zero radius everywhere, no exceptions. */
  --kb-radius: 0px;

  --kb-border-width: 1px;
}

.kb-page * {
  box-sizing: border-box;
}

/* The content well. Background spans full bleed, content is constrained. */
.kb-wrap {
  inline-size: 100%;
  max-inline-size: var(--kb-measure-content);
  margin-inline: auto;
  padding-inline: var(--kb-gutter);
}

.kb-section {
  padding-block: var(--kb-space-section);
}

.kb-section--page {
  background: var(--kb-surface-page);
}

.kb-section--alt {
  background: var(--kb-surface-alt);
}

.kb-section--inverse {
  background: var(--kb-surface-inverse);
  color: var(--kb-text-on-inverse);
}

.kb-section--inverse h1,
.kb-section--inverse h2,
.kb-section--inverse h3,
.kb-section--inverse p {
  color: var(--kb-text-on-inverse);
}

.kb-section--inverse .kb-lead {
  color: var(--kb-text-secondary-on-inverse);
}

/* Content blocks are separated by whitespace and hairlines. There are no cards. */
.kb-rule {
  border: 0;
  border-block-start: var(--kb-border-width) solid var(--kb-border-hairline);
  margin: 0;
}

.kb-section--inverse .kb-rule {
  border-block-start-color: var(--kb-border-on-inverse);
}

/* Full-bleed photography escapes the content well and runs edge to edge.
   It is always its own block, never a background for text. */
.kb-bleed {
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
}

@media (max-width: 782px) {
  /* Every multi-column layout collapses to one column. */
  .kb-cols {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------
   Astra reset.

   The design system owns the page rhythm end to end: every section
   carries its own full-bleed ground and constrains its own content.
   Astra's boxed container would cap that at 1240px and reintroduce
   gutters the sections already handle, so it is removed on any page
   built with Elementor.
   --------------------------------------------------------------- */
.kb-page .ast-container,
.kb-page .site-content > .ast-container {
  max-inline-size: 100%;
  padding-inline: 0;
}

.kb-page .site-content .ast-container {
  display: block;
}

.kb-page .entry-content > .elementor,
.kb-page .ast-container > .elementor {
  inline-size: 100%;
}

/* Astra prints a page title and featured image above Elementor content.
   On Elementor-built pages the title already lives inside the hero, so the
   duplicate is removed. Pages NOT built in Elementor (the legal pages) keep
   their heading. */
.kb-page.elementor-page .entry-header,
.kb-page.elementor-page .entry-title,
.kb-page .ast-single-post-featured-section {
  display: none;
}

/* Fallback for pages with no Elementor layout: the sections normally supply
   the measure and the rhythm, so plain WordPress content needs its own. */
.kb-page:not(.elementor-page) .site-content .ast-container {
  max-inline-size: var(--kb-measure-content);
  margin-inline: auto;
  padding-inline: var(--kb-gutter);
  padding-block: var(--kb-space-xl);
}

.kb-page:not(.elementor-page) .entry-content {
  max-inline-size: var(--kb-measure-prose);
}

.kb-page:not(.elementor-page) .entry-title {
  font-family: var(--kb-font-voice);
  font-size: var(--kb-size-section);
  font-weight: var(--kb-weight-voice-light);
  line-height: var(--kb-leading-section);
  margin-block-end: var(--kb-space-md);
}

.kb-page:not(.elementor-page) .entry-content > * + * {
  margin-block-start: var(--kb-space-md);
}

.kb-page:not(.elementor-page) .entry-content a {
  color: var(--kb-accent-text);
}