/* Centered desktop composition at the browser's normal 100% zoom. */
@media (min-width: 1200px) {
  body[data-view="home"] .container {
    width: min(1500px, calc(100% - 96px));
  }

  body[data-view="home"] .header-inner {
    min-height: 205px;
    gap: 58px;
    padding-top: 8px;
    padding-bottom: 20px;
  }

  body[data-view="home"] .brand {
    width: 405px;
  }

  body[data-view="home"] #main-nav {
    margin-bottom: 14px;
  }

  body[data-view="home"] #main-nav > a {
    font-size: 22px;
    line-height: 1.4;
    padding: 9px 17px;
  }

  body[data-view="home"] #main-nav > a.nav-register {
    padding: 9px 29px;
  }

  .reference-home {
    padding-top: 52px;
  }

  .reference-carousel {
    margin-bottom: 66px;
  }

  .reference-dots {
    gap: 15px;
    min-height: 20px;
    margin: 20px 0 24px;
  }

  .reference-dot {
    width: 15px;
    height: 15px;
  }

  .reference-thumbnails {
    gap: 25px;
  }

  .reference-row {
    gap: 32px;
    margin-bottom: 34px;
  }

  .reference-news,
  .reference-video,
  .reference-jobs,
  .reference-ranking {
    padding: 24px 30px 25px;
  }

  .reference-panel-heading {
    margin-bottom: 22px;
  }

  .reference-news-item {
    min-height: 84px;
  }

  .reference-news-tabs {
    margin-bottom: 14px;
  }

  .reference-links-row {
    margin-bottom: 0;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  body[data-view="home"] .header-inner {
    min-height: 168px;
    gap: 32px;
  }

  body[data-view="home"] .brand {
    width: 320px;
  }

  body[data-view="home"] #main-nav > a {
    font-size: 19px;
    padding-inline: 12px;
  }

  body[data-view="home"] #main-nav > a.nav-register {
    padding-inline: 24px;
    margin-right: 12px;
  }

  .reference-home {
    padding-top: 42px;
  }
}

/* Keep the scenery at viewport width; the content has its own smaller scale. */
@media (min-width: 1200px) {
  body::before,
  body[data-view="home"]::before,
  body:not([data-view="home"])::before {
    position: absolute;
    background-position: center top;
    background-size: auto, 100% auto;
    background-repeat: repeat-y;
  }
}

/* The target screenshot is about 59.5% content and 40.5% scenery.
   Viewport-relative dimensions keep that balance with Windows display scaling. */
@media (min-width: 1001px) {
  body[data-view] {
    --site-u: clamp(.666667px, .039667vw, 1px);
  }

  body[data-view] .container {
    width: min(clamp(1000px, 59.5vw, 1500px), calc(100% - 44px));
  }

  body[data-view] .utility-bar {
    height: calc(24 * var(--site-u));
    min-height: 24px;
  }

  body[data-view] .header-inner {
    min-height: calc(205 * var(--site-u));
    gap: calc(58 * var(--site-u));
    padding-top: calc(8 * var(--site-u));
    padding-bottom: calc(20 * var(--site-u));
  }

  body[data-view] .brand {
    width: calc(405 * var(--site-u));
  }

  body[data-view] #main-nav {
    margin-bottom: calc(14 * var(--site-u));
  }

  body[data-view] #main-nav > a {
    font-size: clamp(17px, .8727vw, 22px);
    padding: calc(9 * var(--site-u)) calc(17 * var(--site-u));
  }

  body[data-view] #main-nav > a.nav-register {
    padding-inline: calc(29 * var(--site-u));
    margin-right: calc(20 * var(--site-u));
    border-radius: calc(17 * var(--site-u));
  }

  .reference-home {
    padding-top: calc(52 * var(--site-u));
  }

  .reference-carousel {
    margin: 0 calc(8 * var(--site-u)) calc(66 * var(--site-u));
  }

  .reference-hero {
    border-radius: calc(15 * var(--site-u));
  }

  .reference-arrow {
    width: calc(55 * var(--site-u));
    height: calc(55 * var(--site-u));
  }

  .reference-arrow svg {
    width: calc(29 * var(--site-u));
    height: calc(29 * var(--site-u));
  }

  .reference-prev { left: calc(-20 * var(--site-u)); }
  .reference-next { right: calc(-20 * var(--site-u)); }

  .reference-dots {
    gap: calc(15 * var(--site-u));
    min-height: calc(20 * var(--site-u));
    margin: calc(20 * var(--site-u)) 0 calc(24 * var(--site-u));
  }

  .reference-dot {
    width: calc(15 * var(--site-u));
    height: calc(15 * var(--site-u));
  }

  .reference-pause {
    margin-left: calc(160 * var(--site-u));
    font-size: calc(14 * var(--site-u));
  }

  .reference-thumbnails {
    gap: calc(25 * var(--site-u));
  }

  .reference-thumbnail {
    border-radius: calc(13 * var(--site-u));
  }

  .reference-row {
    gap: calc(32 * var(--site-u));
    margin-bottom: calc(34 * var(--site-u));
  }

  .reference-news, .reference-video, .reference-jobs, .reference-ranking {
    padding: calc(24 * var(--site-u)) calc(30 * var(--site-u)) calc(25 * var(--site-u));
  }

  .reference-panel-heading {
    gap: calc(20 * var(--site-u));
    margin-bottom: calc(22 * var(--site-u));
  }

  .reference-panel-heading h2 {
    font-size: calc(40 * var(--site-u));
    letter-spacing: calc(3 * var(--site-u));
  }

  .reference-panel-heading .panel-title {
    padding-left: calc(27 * var(--site-u));
  }

  .reference-more {
    font-size: calc(23 * var(--site-u));
    gap: calc(12 * var(--site-u));
  }

  .reference-news-tabs {
    gap: calc(17 * var(--site-u));
    margin-bottom: calc(14 * var(--site-u));
    padding-right: calc(45 * var(--site-u));
  }

  .reference-news-tabs .tab {
    font-size: calc(27 * var(--site-u));
    padding: calc(7 * var(--site-u)) calc(15 * var(--site-u));
  }

  .reference-news-item {
    min-height: calc(84 * var(--site-u));
    gap: calc(30 * var(--site-u));
    padding: calc(10 * var(--site-u)) calc(15 * var(--site-u));
  }

  .reference-news-item > span:nth-child(2) {
    font-size: calc(25 * var(--site-u));
  }

  .reference-category {
    min-width: calc(87 * var(--site-u));
    font-size: calc(21 * var(--site-u));
    padding-inline: calc(10 * var(--site-u));
  }

  .reference-video .reference-panel-heading { margin-bottom: calc(22 * var(--site-u)); }
  .reference-video-play { min-height: 0; flex: 1; }
  .reference-video > p { font-size: calc(25 * var(--site-u)); margin-top: calc(10 * var(--site-u)); }
  .reference-play-circle { width: calc(82 * var(--site-u)); height: calc(82 * var(--site-u)); font-size: calc(38 * var(--site-u)); }

  .reference-job-grid { gap: calc(18 * var(--site-u)); }
  .reference-job-name { min-height: calc(64 * var(--site-u)); font-size: calc(30 * var(--site-u)); }
  .reference-ranking-tabs { gap: calc(20 * var(--site-u)); margin-bottom: calc(24 * var(--site-u)); }
  .reference-ranking-tabs .tab { font-size: calc(27 * var(--site-u)); padding: calc(8 * var(--site-u)) calc(7 * var(--site-u)); }
  .reference-laurel { min-height: calc(130 * var(--site-u)); }
  .reference-laurel p { font-size: calc(25 * var(--site-u)); }
  .reference-rank-rows li { min-height: calc(80 * var(--site-u)); font-size: calc(23 * var(--site-u)); padding: calc(8 * var(--site-u)) calc(12 * var(--site-u)); }
  .reference-rank-number { font-size: calc(28 * var(--site-u)); min-width: calc(72 * var(--site-u)); }

  .reference-links-row { margin-top: calc(48 * var(--site-u)); margin-bottom: 0; }
  .reference-entry { min-height: calc(300 * var(--site-u)); padding: calc(32 * var(--site-u)) calc(40 * var(--site-u)); }
  .reference-entry h2 { font-size: calc(45 * var(--site-u)); }
  .reference-entry p { font-size: calc(25 * var(--site-u)); margin: calc(13 * var(--site-u)) 0 calc(28 * var(--site-u)); }
  .reference-entry .button { min-width: calc(310 * var(--site-u)); min-height: calc(66 * var(--site-u)); font-size: calc(29 * var(--site-u)); padding: calc(9 * var(--site-u)) calc(32 * var(--site-u)); }
}

/* Interior pages share the approved homepage composition at normal zoom.
   All page lengths use this unit; tablet/mobile keep their existing sizes. */
@media (min-width: 1001px) {
  body:not([data-view="home"]) #main {
    --interior-px: var(--site-u);
    font-size: calc(23 * var(--interior-px));
  }
}