/* Wider page containers with readable text measure */
@media (min-width: 1100px) {
  /* Map pages and lesson layouts use different outer container classes. */
  .wrap,
  .page {
    width: min(1440px, calc(100% - 32px));
    max-width: 1440px;
    margin-inline: auto;
  }
  body > main:not(.card):not(.wrap) {
    width: min(1440px, calc(100% - 64px));
    max-width: 1440px;
    margin-inline: auto;
  }
  .site-header-inner,
  .top-in,
  .topin,
  .topbar-inner,
  .header-inner {
    width: 100%;
    max-width: none;
    padding-inline: clamp(24px, 3vw, 48px);
  }
  .dm-wide-footer {
    width: min(1440px, calc(100% - 64px));
    max-width: 1440px;
    margin-inline: auto;
  }
  /* The map hero is a full-width panel inside the widened map container. */
  .wrap > .intro {
    display: block;
    width: 100%;
    max-width: none;
  }

  /* Lesson prose can use the full reading column. */
  article.content-card .body p {
    max-width: none;
  }

  /* Reading passages vary by level: .reading, .panel, or direct paragraphs. */
  article.content-card #reading > .reading,
  article.content-card #reading > .panel,
  article.content-card #reading > .explain,
  article.content-card #reading > .grammar {
    width: 100%;
    max-width: none;
  }
  article.content-card #reading .reading p,
  article.content-card #reading .panel p,
  article.content-card #reading .explain p,
  article.content-card #reading .grammar p,
  article.content-card #reading > p:not(.section-intro) {
    width: auto;
    max-width: none;
  }
}

/* Place the bottom lesson navigation directly beneath the lesson content column. */
.lesson-nav-shell {
  width: min(1160px, calc(100% - 36px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
}
.lesson-nav-shell > .course-nav,
.lesson-nav-shell > .end-nav {
  grid-column: 2;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
@media (min-width: 1100px) {
  .lesson-nav-shell {
    width: min(1440px, calc(100% - 32px));
    max-width: 1440px;
  }
}
@media (max-width: 850px) {
  .lesson-nav-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .lesson-nav-shell > .course-nav,
  .lesson-nav-shell > .end-nav {
    grid-column: 1;
  }
}
@media (max-width: 560px) {
  .lesson-nav-shell {
    width: 100%;
  }
  .lesson-nav-shell > .course-nav,
  .lesson-nav-shell > .end-nav {
    margin-inline: 0;
  }
}