/* Shared section-page navigation, visually related to the homepage nav. */
.section-rail {
  z-index: 5;
}

.section-nav {
  padding: 0.7rem 0.85rem 0.8rem;
  background: #a51f2c url("../img/responsive-nav-red.jpg") center / cover no-repeat;
  box-shadow: 0 3px 4px rgba(16, 16, 15, 0.28);
}

.section-nav a {
  padding: 0.08rem 0.18rem;
}

.section-nav-break {
  display: none;
}

@media (min-width: 1200px) {
  .section-rail {
    position: fixed;
    right: clamp(0.75rem, 1.7vw, 2rem);
    width: clamp(202px, 17.225vw, 293px);
  }
}

/* Portrait phones use the homepage's centered vertical treatment. */
@media (max-width: 575.98px) and (orientation: portrait) {
  .section-rail {
    top: 0.65rem;
    right: auto;
    left: 50%;
    width: min(72%, 230px);
    transform: translateX(-50%);
  }

  .section-nav {
    align-items: center;
    gap: 0.28rem;
    padding: 0.55rem 0.7rem 0.65rem;
  }

  .section-nav a {
    padding: 0.12rem 0.35rem;
    font-size: clamp(1rem, 4.7vw, 1.15rem);
    line-height: 0.96;
    text-align: center;
  }

  .story-content,
  .theory-content,
  .catalogue-content {
    padding-top: 11.5rem;
  }
}

/* Small landscape phones retain the approved 3/2 arrangement. */
@media (min-width: 568px) and (max-width: 700px) and (max-height: 430px) and (orientation: landscape) {
  .section-rail {
    top: 0.55rem;
    right: auto;
    left: 0.75rem;
    width: min(70vw, 410px);
  }

  .section-nav {
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem clamp(0.7rem, 2.2vw, 1rem);
    padding: 0.6rem 0.75rem 0.65rem;
  }

  .section-nav a {
    flex: 0 0 auto;
    padding: 0.16rem 0.25rem;
    font-size: clamp(1.22rem, 3.7vw, 1.5rem);
    line-height: 0.95;
    text-align: center;
    white-space: nowrap;
  }

  .section-nav-break {
    display: block;
    flex: 0 0 100%;
    height: 0;
  }

  .story-content,
  .theory-content,
  .catalogue-content {
    padding-top: 7rem;
  }
}

/* Larger landscape phones keep all five links on one generously spaced row. */
@media (min-width: 701px) and (max-width: 991.98px) and (max-height: 550px) and (orientation: landscape) {
  .section-rail {
    top: 0.55rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }

  .section-nav {
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.1rem, 3vw, 2rem);
    padding: 0.65rem clamp(1rem, 2.2vw, 1.5rem) 0.7rem;
  }

  .section-nav a {
    flex: 0 0 auto;
    padding: 0.14rem clamp(0.45rem, 1vw, 0.7rem);
    font-size: clamp(1.2rem, 2.65vw, 1.5rem);
    line-height: 0.95;
    text-align: center;
    white-space: nowrap;
  }

  .story-content,
  .theory-content,
  .catalogue-content {
    padding-top: 5.5rem;
  }
}

/* Tablets use the homepage's vertical right-side navigation language. */
@media (min-width: 576px) and (max-width: 1199.98px) and (min-height: 551px) {
  .section-rail {
    position: fixed;
    top: clamp(1rem, 5vh, 3rem);
    right: clamp(0.75rem, 2vw, 1.25rem);
    width: clamp(170px, 20vw, 215px);
  }

  .section-nav {
    gap: clamp(0.2rem, 0.6vh, 0.4rem);
  }

  .section-nav a {
    font-size: clamp(1.65rem, min(3.4vw, 4.5vh), 2.5rem);
  }
}