.kg-container {
  width: min(calc(100% - (2 * var(--kg-gutter))), var(--kg-container));
  margin-inline: auto;
}
.kg-container--reading {
  width: min(calc(100% - (2 * var(--kg-gutter))), var(--kg-container-reading));
  margin-inline: auto;
}
.kg-main { min-height: 60vh; }
.kg-section { padding-block: var(--kg-section-space); }
.kg-section--surface { background: var(--kg-color-surface); }
.kg-section--soft { background: var(--kg-color-surface-soft); }
.kg-section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--kg-space-6);
  align-items: end;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.kg-section-title {
  margin: 0;
  font-size: var(--kg-font-size-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
}
.kg-section-head > a {
  font-size: var(--kg-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--kg-tracking-label);
  border-bottom: 1px solid currentColor;
}

.kg-grid { display: grid; gap: var(--kg-space-6); }
.kg-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kg-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kg-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 1024px) {
  .kg-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .kg-section-head { align-items: start; }
  .kg-grid--2, .kg-grid--3 { grid-template-columns: 1fr; }
}

/* Generic WordPress pages — compact premium page shell.
   The old .kg-section token adds 56–112px on both edges and is intended
   for editorial/home sections, not utility/legal/account pages. */
.kg-page-shell {
  padding-top: clamp(28px, 2.2vw, 40px);
  padding-bottom: clamp(56px, 6vw, 88px);
}

.kg-page-content > :first-child {
  margin-top: 0;
}

@media (max-width: 640px) {
  .kg-page-shell {
    padding-top: 24px;
    padding-bottom: 48px;
  }
}

/* ======================================================================
   Generic rich-content overflow guard — GCO-1.0.0
   Prevent fixed-width editor/legal content from widening the document on
   narrow screens. Overflow is contained in the content/table itself; body
   overflow is deliberately not hidden, so real layout regressions remain
   observable during QA.
   ====================================================================== */
.kg-page-content {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  overscroll-behavior-inline: contain;
}

.kg-page-content :where(img, video, canvas) {
  max-width: 100%;
  height: auto;
}

.kg-page-content iframe {
  max-width: 100%;
}

.kg-page-content pre,
.kg-page-content .wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kg-page-content table {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.kg-page-content th,
.kg-page-content td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 640px) {
  /* Naked/classic-editor tables have no wrapper. Make the table itself the
     scroll container so it cannot increase document width. Gutenberg's
     .wp-block-table wrapper is handled above. */
  .kg-page-content table:not(.wp-calendar-table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .kg-page-content .wp-block-table table {
    display: table;
    width: 100%;
  }
}