/* Mobile navigation viewport containment */
@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .main-nav {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh;
    min-height: 100dvh;
    box-sizing: border-box;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    padding:
      calc(92px + env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(22px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left)) !important;
    overflow-x: hidden !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main-nav > a {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .main-nav > a[data-page="contact"] {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: baseline !important;
    width: 100% !important;
  }

  .mobile-nav-meta {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: auto;
    padding-top: 18px;
    flex: 0 0 auto;
    gap: 16px;
  }

  .mobile-nav-meta .language-switcher,
  .mobile-nav-socials {
    flex: 0 0 auto;
  }

  .cf-turnstile,
  .cf-turnstile > div,
  .cf-turnstile iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

.form-trap {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  contain: strict;
}

.form-trap input {
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Final mobile reading and touch polish shared by all public pages. */
@media (max-width: 760px) {
  img,
  video,
  iframe {
    max-width: 100%;
  }

  h1,
  h2,
  h3,
  p,
  a,
  strong,
  span {
    overflow-wrap: break-word;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .button,
  button.button {
    min-height: 46px;
  }

  .button-row {
    gap: 10px;
    flex-wrap: wrap;
  }

  .page-hero .display {
    max-width: 100%;
    font-size: clamp(39px, 11vw, 58px);
    line-height: .99;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .section-heading {
    max-width: 100%;
    font-size: clamp(31px, 8.2vw, 42px);
    line-height: 1.02;
    text-wrap: balance;
  }

  .article-header h1 {
    max-width: 100%;
    font-size: clamp(36px, 10vw, 50px);
    line-height: 1.01;
    text-wrap: balance;
  }

  .article-header-meta {
    gap: 10px 16px;
    flex-wrap: wrap;
  }

  .article-content,
  .bio-text,
  .books-lead-copy,
  .book-copy,
  .contact-form {
    min-width: 0;
  }

  .books-lead-copy h2,
  .book-copy h3 {
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .site-footer .footer-grid {
    row-gap: 28px;
  }
}

@media (max-width: 420px) {
  .main-nav {
    padding-top: calc(84px + env(safe-area-inset-top)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  .button-row > .button,
  .button-row > a.button {
    width: 100%;
  }
}

@media (max-width: 350px) {
  .home-page .book-cover-wrap::before {
    right: 0;
  }

  .contact-form {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 860px) and (max-height: 700px) {
  .main-nav {
    padding-top: calc(76px + env(safe-area-inset-top)) !important;
  }

  .main-nav > a {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: clamp(27px, 8vw, 36px);
  }

  .mobile-nav-meta {
    padding-top: 14px;
  }
}

/* Foldable inner-screen and short-tablet safeguards. */
@media (min-width: 600px) and (max-width: 920px) and (max-height: 900px) {
  .home-page .hero {
    min-height: calc(100svh - 72px);
    padding-top: 34px;
    padding-bottom: 38px;
  }

  .home-page .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 190px) !important;
    gap: clamp(22px, 4vw, 34px) !important;
    align-items: center;
  }

  .home-page .hero-copy {
    min-width: 0;
  }

  .home-page .hero .eyebrow {
    margin-bottom: 14px;
    font-size: 9px;
  }

  .home-page .hero .display {
    max-width: 620px;
    font-size: clamp(37px, 6.3vw, 52px);
    line-height: .98;
  }

  .home-page .hero .lede {
    max-width: 560px;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.45;
  }

  .home-page .hero .button-row {
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 19px;
  }

  .home-page .hero .button {
    min-height: 42px;
    padding-right: 14px;
    padding-left: 14px;
    font-size: 9px;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .home-page .door-scene {
    width: 100%;
    height: 260px;
    margin-top: 0;
  }

  .home-page .door {
    width: 112px;
    height: 220px;
  }

  .home-page .door-floor {
    width: 210px;
    height: 78px;
  }

  .home-page .orbit-line {
    width: 250px;
    height: 250px;
    top: 4px;
    right: -85px;
  }

  .home-page .hero-index {
    bottom: 8px;
    font-size: 24px;
  }
}

@media (min-width: 600px) and (max-width: 700px) and (max-height: 900px) {
  .home-page .hero .display {
    font-size: clamp(34px, 6.2vw, 42px);
  }

  .home-page .hero .lede {
    font-size: 14px;
  }

  .home-page .hero .button {
    padding-right: 11px;
    padding-left: 11px;
    letter-spacing: .07em;
  }

  .home-page .door-scene {
    height: 230px;
  }

  .home-page .door {
    width: 100px;
    height: 198px;
  }
}