.skt-page {
  --skt-page-space-top: var(--skt-space-16);
  --skt-page-space-title: var(--skt-space-8);
  --skt-page-space-bottom: var(--skt-space-16);
  --skt-page-title-size: 44px;
  --skt-page-title-size-narrow: 36px;
  --skt-page-toc: 320px;
  --skt-page-gap: 64px;
  --skt-page-content: 736px;
  --skt-page-shell: 1120px;
  padding-block: var(--skt-page-space-top) var(--skt-page-space-bottom);
  padding-inline: var(--skt-space-6);
}

.skt-page__entry {
  display: grid;
  grid-template-columns: minmax(0, var(--skt-page-content));
  row-gap: var(--skt-page-space-title);
  align-items: start;
  justify-content: center;
}

.skt-page__title {
  margin: 0;
  color: var(--skt-color-brand-ink);
  font-family: var(--skt-font-family-heading);
  font-size: var(--skt-page-title-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
}

.skt-page__toc-label {
  margin: 0 0 var(--skt-space-5);
  color: var(--skt-color-text-muted);
  font-family: var(--skt-font-family-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
}

.skt-page__toc-list {
  margin: 0;
  padding: 0 0 0 var(--skt-space-5);
  border-inline-start: var(--skt-border-width-default) solid var(--skt-color-border-soft);
  list-style: none;
}

.skt-page__toc-link {
  display: block;
  padding: var(--skt-space-2) 0;
  color: var(--skt-color-text-muted);
  font-family: var(--skt-font-family-body);
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
}

.skt-page__toc-link:hover {
  color: var(--skt-color-brand-ink);
}

.skt-page__toc-link:focus-visible {
  outline: var(--skt-focus-ring-width) solid var(--skt-color-brand-primary);
  outline-offset: var(--skt-focus-ring-offset);
}

.skt-page__toc-item--sub .skt-page__toc-link {
  padding-inline-start: var(--skt-space-4);
  font-size: 14px;
}

.skt-page__content .is-style-skt-callout {
  margin: var(--skt-space-8) 0;
  padding: var(--skt-space-6) var(--skt-space-7);
  border-inline-start: var(--skt-space-1) solid var(--skt-color-brand-accent);
  border-radius: var(--skt-radius-md);
  background-color: var(--skt-color-white);
  color: var(--skt-color-brand-ink);
  font-size: 17px;
  line-height: 1.6;
}

.skt-page__content .is-style-skt-callout p {
  margin: 0;
}

.skt-page__content .is-style-skt-callout p + p {
  margin-block-start: var(--skt-space-3);
}

.skt-page__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--skt-space-2);
  align-items: baseline;
  margin-block-start: var(--skt-space-10);
  color: var(--skt-color-text-muted);
  font-family: var(--skt-font-family-body);
  font-size: 16px;
}

.skt-page__pagination-label {
  font-weight: 500;
}

@media (width > 1080px) {
  .skt-page__entry--toc {
    grid-template-columns: var(--skt-page-toc) minmax(0, var(--skt-page-content));
    column-gap: var(--skt-page-gap);
    max-inline-size: var(--skt-page-shell);
    margin-inline: auto;
  }
  .skt-page__entry--toc .skt-page__title {
    grid-row: 1;
    grid-column: 2;
  }
  .skt-page__entry--toc .skt-page__toc {
    position: sticky;
    inset-block-start: calc(var(--skt-header-block-size) + var(--skt-header-compensation-admin, 0px) + var(--skt-space-6));
    grid-row: 1/span 2;
    grid-column: 1;
    max-block-size: calc(100dvh - var(--skt-header-block-size) - var(--skt-header-compensation-admin, 0px) - var(--skt-space-12));
    overflow-y: auto;
  }
  .skt-page__entry--toc .skt-page__content {
    grid-row: 2;
    grid-column: 2;
  }
}
@media (width <= 720px) {
  .skt-page__title {
    font-size: var(--skt-page-title-size-narrow);
  }
}