/* Notebook layout: keep wide desktop and tablet layouts unchanged. */
@media (min-width:1200px) and (max-width:1536px) {
  body .wrap:not(.hd .wrap, .util .wrap, .wrap .wrap) {
    max-width:min(var(--container,1320px),calc(100% - 92px));
    margin-right:92px;
  }
  /* Replace page-specific quick-menu padding with the shared outer gutter. */
  body.greeting-page main>section:not(.subpage-hero):not(.quick-consult)>.wrap:not(.passed-roll),
  body .next-page>.wrap {padding-right:20px}
  body .fab {right:12px;width:66px;border-radius:13px}
  body .fab a {width:64px;padding:11px 0;gap:5px;font-size:11px}
  body .fab .ic {width:30px;height:30px}
  body .fab .ic .ico {width:16px;height:16px}
  body .hero-nav-wrap {left:0;transform:none;margin-left:0}
  body .hero .hero-slide>.wrap {padding-left:32px;padding-right:32px}
}

/* Leave room for the slider controls on short notebook viewports. */
@media (min-width:1200px) and (max-width:1536px) and (max-height:820px) {
  body .hero {height:clamp(580px,calc(100svh - 120px),700px)}
  body .hero .hero-slide>.wrap {padding-top:24px;padding-bottom:92px;align-items:center}
  body .hero .nav {bottom:58px}
  body .hero .copy {padding-bottom:0}
  body .hero h1 {font-size:92px}
  body .hero h1 small {font-size:36px}
  body .hero .chip {margin-bottom:18px}
  body .hero ol {margin:20px 0 24px;gap:8px}
  body .hero ol b {font-size:18px}
  body .hero ol span {font-size:14px}
  body .hero .hero-model {height:calc(100% - 10px);width:auto;right:0;bottom:0}
  body .hero .ai-copy h2 {font-size:66px;margin-top:12px}
  body .hero .ai-copy strong {margin-top:18px;font-size:22px}
  body .hero .ai-copy h3 {margin-top:16px;font-size:34px}
  body .hero .ai-copy p {margin-top:14px}
  body .hero .ai-copy .ai-btn {margin-top:20px}
  body .hero .experience-plane {top:185px;height:290px}
  body .hero .experience-abc-badge {top:50px;width:220px;height:220px}
  body .hero .campaign-copy {padding-bottom:0}
  body .hero .univ-slide .campaign-copy,
  body .hero .why-slide .campaign-copy,
  body .hero .assessment-copy {top:0}
  body .hero .univ-slide .campaign-copy>.univ-kicker {padding:8px 20px}
  body .hero .univ-intro {height:56px;margin:12px 0 16px}
  body .hero .univ-intro .univ-logo {max-height:56px;width:auto}
  body .hero .univ-title-band {min-height:64px;padding:12px 20px;font-size:30px}
  body .hero .univ-slide .univ-class {font-size:58px;margin-top:16px}
  body .hero .univ-slide .campaign-btn {height:44px;margin-top:18px}
  body .hero .why-roster {--teacher-height:180px;margin-top:18px}
  body .hero .why-slide .campaign-btn {margin-top:18px;height:44px}
  body .hero .results-slide>.wrap,
  body .hero .admissions-slide>.wrap {align-items:flex-start}
  body .hero .results-metrics {margin-top:18px}
  body .hero .results-schools {margin-top:18px}
  body .hero .results-school {min-height:88px;padding:8px 18px}
  body .hero .results-footnote {margin-top:10px}
  body .hero .admissions-grid {margin-top:22px;gap:14px}
  body .hero .admissions-school {height:110px;padding:12px}
  body .hero .admissions-seal {width:60px;height:60px;flex-basis:60px}
  body .hero .assessment-brand {font-size:28px}
  body .hero .assessment-slide h2 {font-size:68px;margin-top:24px}
  body .hero .assessment-band {margin-top:22px}
  body .hero .assessment-link {margin-top:24px}
  body .hero .assessment-network {top:108px;width:225px;height:225px}
  body .hero .support-campaign h2 {font-size:58px;padding:18px 20px}
  body .hero .support-benefits {margin-top:14px}
  body .hero .support-benefits strong {font-size:76px}
  body .hero .support-gallery {gap:18px 12px}
  body .hero .support-photo {border-width:6px}
  body .hero .support-photo figcaption {font-size:13px;padding:8px 2px 4px}
  body .hero .fair-main {padding:20px 26px}
  body .hero .fair-ticket-head {padding-bottom:12px}
  body .hero .fair-heading {padding:14px 0}
  body .hero .fair-slide h2 {font-size:64px}
  body .hero .fair-year {font-size:24px}
  body .hero .fair-participation {margin-top:10px;min-height:36px}
  body .hero .fair-emblems img {width:34px;height:34px}
  body .hero .fair-facts {padding:12px 0}
  body .hero .fair-open {margin-top:16px;min-height:44px}
}

/* Compact notebook windows: keep banner content and controls in the first view. */
@media (min-width:1200px) and (max-width:1536px) and (max-height:640px) {
  body .hero {height:calc(100svh - 108px);min-height:440px}
  body .hero .hero-slide>.wrap {padding-top:16px;padding-bottom:92px}
  body .hero .nav {bottom:58px}
  body .hero h1 {font-size:72px}
  body .hero h1 small {font-size:30px}
  body .hero .chip {margin-bottom:12px}
  body .hero ol {margin:14px 0 18px;gap:6px}
  body .hero .ai-copy h2 {font-size:56px;margin-top:8px}
  body .hero .ai-copy strong {font-size:20px;margin-top:12px}
  body .hero .ai-copy h3 {font-size:28px;margin-top:12px}
  body .hero .ai-copy p {margin-top:10px}
  body .hero .ai-copy .ai-btn {margin-top:14px}
  body .hero .experience-plane {top:145px;height:250px}
  body .hero .experience-abc-badge {top:32px;width:180px;height:180px}
  body .hero .univ-intro {height:46px;margin:8px 0 12px}
  body .hero .univ-intro .univ-logo {max-height:46px}
  body .hero .univ-title-band {min-height:54px;padding:10px 18px;font-size:26px}
  body .hero .univ-slide .univ-class {font-size:48px;margin-top:12px}
  body .hero .univ-slide .campaign-btn {margin-top:12px}
  body .hero .why-script {font-size:28px}
  body .hero .why-roster {--teacher-height:150px;margin-top:14px}
  body .hero .why-slide .campaign-btn {margin-top:16px}
  body .hero .results-metrics {margin-top:12px}
  body .hero .results-schools {margin-top:12px}
  body .hero .results-school {min-height:76px;padding:6px 16px}
  body .hero .admissions-slide h2 {font-size:54px}
  body .hero .admissions-grid {margin-top:16px;gap:10px}
  body .hero .admissions-school {height:90px;padding:10px}
  body .hero .admissions-seal {width:52px;height:52px;flex-basis:52px}
  body .hero .admissions-footnote {margin-top:14px}
  body .hero .assessment-brand {font-size:24px}
  body .hero .assessment-slide h2 {font-size:56px;margin-top:18px}
  body .hero .assessment-band {margin-top:16px}
  body .hero .assessment-link {margin-top:16px}
  body .hero .assessment-network {top:85px;width:200px;height:200px}
  body .hero .support-campaign h2 {font-size:48px;padding:12px 16px}
  body .hero .support-benefits {margin-top:10px}
  body .hero .support-benefits strong {font-size:62px}
  body .hero .support-gallery {gap:12px 10px}
  body .hero .fair-main {padding:14px 24px}
  body .hero .fair-ticket-head {padding-bottom:8px}
  body .hero .fair-heading {padding:10px 0}
  body .hero .fair-slide h2 {font-size:52px}
  body .hero .fair-year {font-size:21px}
  body .hero .fair-participation {margin-top:8px;min-height:32px}
  body .hero .fair-facts {padding:8px 0}
  body .hero .fair-open {margin-top:12px;min-height:40px}
}