.page-shell {
  display: block;
  width: 100%;
  min-height: 100vh;
}

.page-shell-body {
  display: grid;
  grid-template-columns: 1fr 27%;
  gap: 3%;
  width: 94%;
  max-width: 1420px;
  margin: 0 auto;
  align-items: stretch;
}

.page-shell-main {
  min-width: 0;
}

.page-shell-sidebar {
  min-width: 0;
  padding-top: 6%;
  padding-bottom: 6%;
}

.page-shell-content {
  width: 100%;
}

.page-shell-footer {
  width: 100%;
}


.page-shell-content > section[id] {
  scroll-margin-top: 5.5rem;
}


.wrap {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
}

.wrap-narrow {
  width: 88%;
  max-width: 820px;
  margin: 0 auto;
}


.content-section {
  position: relative;
  background: var(--bg-secondary);
}

.content-section:nth-child(odd) {
  background: var(--bg-primary);
  padding: 4% 3% 7%;
}

.content-section:nth-child(even) {
  padding: 7% 3% 4%;
}

.section-content {
  padding-left: 10%;
  padding-right: 5%;
}

.section-head {
  max-width: 72%;
  margin-bottom: 5%;
}

.section-head p {
  color: var(--text-muted);
  margin-top: 1rem;
}


.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.section-grid-tight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
}

.split-columns {
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 6%;
  align-items: center;
}

.split-columns-media {
  border-radius: var(--edge);
  overflow: hidden;
  box-shadow: var(--lift-mid);
  background: var(--bg-tertiary);
}

.split-columns-media img {
  width: 100%;
  display: block;
}


.doc-masthead {
  position: relative;
  padding: 7% 3% 5%;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #f4ecdf 0%, #e7d8bf 100%);
  border-bottom: 1px solid var(--stone-line);
}

.doc-masthead h1 {
  font-size: 2.6rem;
  max-width: 80%;
}

.doc-masthead p {
  margin-top: 1rem;
  color: var(--text-secondary);
  max-width: 62%;
}

.doc-section {
  padding: 6% 3% 7%;
  background: var(--bg-primary);
}

.doc-body {
  max-width: 100%;
}


.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1400;
  background: var(--accent);
  color: #ffffff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--edge-small) 0;
}

.skip-link:focus {
  left: 0;
}


.stack-gap > * + * {
  margin-top: 5%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1200px) {
  .page-shell-body {
    grid-template-columns: 1fr 31%;
  }
  .section-content {
    padding-left: 6%;
    padding-right: 3%;
  }
}

@media (max-width: 1024px) {
  .page-shell-body {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
  }
  .page-shell-sidebar {
    width: 90%;
    max-width: 620px;
    margin: 0 auto;
    padding-bottom: 10%;
  }
  .split-columns {
    grid-template-columns: 1fr;
    gap: 6% 0;
  }
  .section-head {
    max-width: 100%;
  }
  .doc-masthead h1,
  .doc-masthead p {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .content-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .content-section:nth-child(odd) { padding: 14% 6%; }
  .content-section:nth-child(even) { padding: 14% 6%; }
  .section-content {
    padding-left: 0;
    padding-right: 0;
  }
  .section-grid,
  .section-grid-tight {
    grid-template-columns: 1fr;
  }
  .doc-masthead { padding: 16% 6% 10%; }
  .doc-masthead h1 { font-size: 1.95rem; }
  .doc-section { padding: 12% 6% 14%; }
  .stack-gap > * + * { margin-top: 8%; }
}


.page-shell-header {
  flex: 0 0 auto;
}