@layer k12.foundations {
  [data-k12-surface],
  [data-k12-surface]::before,
  [data-k12-surface]::after,
  [data-k12-surface] *,
  [data-k12-surface] *::before,
  [data-k12-surface] *::after {
    box-sizing: border-box;
  }

  [data-k12-surface] {
    color: var(--k12-color-ink);
    font-family: var(--k12-font-body);
    line-height: 1.5;
    min-inline-size: 0;
  }

  [data-k12-surface] :where(h1, h2) {
    color: var(--k12-color-ink);
    font-family: var(--k12-font-display);
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: normal;
  }

  [data-k12-surface] :where(img, svg, video, canvas, iframe) {
    block-size: auto;
    max-inline-size: 100%;
  }

  [data-k12-surface] :where(p, li, dd, dt, label, legend, figcaption) {
    overflow-wrap: normal;
  }

  [data-k12-surface] :where([data-k12-breakable="true"], .k12-breakable) {
    overflow-wrap: anywhere;
  }

  [data-k12-surface] :where(.k12-flex-child, .k12-grid-child) {
    min-inline-size: 0;
  }
}