html,
body {
  height: auto;
  min-height: 100%;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

.content-page-root {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content-page-root .topbar.scrolled {
  background: linear-gradient(120deg, var(--color-text-strong), var(--color-primary-hover));
  backdrop-filter: none;
}


.content-page-root .content-shell {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 150px 0 80px;
  flex: 1;
}

.content-page-root .content-card {
  min-height: 420px;
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid color-mix(in srgb, var(--color-surface) 55%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  box-shadow: var(--shadow-md);
}

.content-page-root .content-kicker {
  margin: 0 0 10px;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.content-page-root .content-card h1 {
  margin: 0 0 32px;
  color: var(--color-text-strong);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -1px;
}

.content-page-root .content-status { color: var(--color-text-muted); }
.content-page-root .content-status.error { color: var(--color-danger); }
.content-page-root .content-text {
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.75;
  white-space: normal;
  overflow-wrap: anywhere;
}

.content-page-root .content-footer { margin-top: 0; }
.content-page-root .content-footer .footer-bottom { margin: 0; }

@media (max-width: 760px) {
  .content-page-root .content-shell { width: calc(100% - 24px); padding: 135px 0 40px; }
  .content-page-root .content-card { min-height: 320px; padding: 24px 18px; border-radius: 18px; }
  .content-page-root .content-card h1 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
}

.content-page-root .content-related {
  margin-top: 28px;
  overflow-x: visible;
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.5;
  white-space: normal;
}

.content-page-root .content-related-label { margin-right: .35em; }
.content-page-root .content-related a { color: var(--color-primary); text-decoration: none; }
.content-page-root .content-related a:hover,
.content-page-root .content-related a:focus-visible { text-decoration: underline; }