/* Shared phone/tablet reading layout for the N4 and N5 onsen conversations. */
@media screen and (max-width: 50rem) {
  :root {
    --page-gutter: clamp(0.625rem, 2.5vw, 1rem);
  }

  main {
    padding-top: 1rem;
  }

  .reading-header {
    --header-radius: 1.15rem;
    display: block;
    box-shadow: none;
  }

  .reading-header::after {
    display: none;
  }

  .reading-header__copy {
    width: 100%;
    padding: 1.15rem 1rem 0.85rem;
  }

  .eyebrow {
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
  }

  h1 {
    font-size: clamp(1.85rem, 7vw, 2.75rem);
  }

  .reading-header__english {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  .reading-header__intro {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .level-switch {
    border-radius: 0.8rem;
    box-shadow: none;
  }

  .level-switch__link {
    border-radius: 0.6rem;
  }

  .js .reading-controls {
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  body:has(.study-controls--fixed) main {
    padding-bottom: calc(var(--study-controls-height, 7rem) + 3rem + env(safe-area-inset-bottom, 0px));
  }
}