html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html.aiw-gate-open,
body.aiw-gate-open {
  overflow: hidden !important;
}

*,
*::before,
*::after {
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

a,
button,
input,
textarea {
  max-width: 100%;
}

p,
li,
h1,
h2,
h3,
h4,
.cn-title,
.toc-title,
.cht,
.hero-title,
.title-main,
.teaser-title,
.t-ti {
  overflow-wrap: anywhere;
}

.aiw-topnav,
.top-nav,
.tn {
  max-width: 100vw;
}

.tn-left,
.tn-right,
.tn-l,
.tn-r,
.tn-links,
.nav-links,
.aiw-topnav-left,
.aiw-topnav-right {
  flex-wrap: wrap;
}

.tn-btn,
.tn-link,
.nav-link,
.aiw-nav-btn {
  min-height: 32px;
}

.content-note,
.ch-refs,
.refs,
.ch-copyright,
.toc-main,
main,
.cb,
.tc,
.ch-teaser,
.pi,
.about-section,
.footer-grid {
  width: min(100%, var(--fit-max, 900px));
}

.content-note,
.ch-refs,
.refs,
.ch-copyright,
.toc-main,
main,
.cb,
.tc,
.ch-teaser,
.about-section {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.content-note {
  margin-left: auto;
  margin-right: auto;
}

.read-gate.active {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.read-gate .gate-box {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.locked-support-grid,
.pt-grid,
.footer-grid,
.about-section,
.tb,
.teaser-body {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

.aiw-bottom-nav,
.bn {
  max-width: 100vw;
}

.aiw-bn-inner,
.bni {
  width: 100%;
}

.bn-nav,
.bna,
.aiw-navbtn-lg {
  overflow: hidden;
}

.bn-name,
.bnn,
.nav-chap {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body {
    padding-bottom: 96px;
  }

  .aiw-topnav,
  .top-nav,
  .tn {
    min-height: 56px;
    height: auto !important;
    gap: 6px;
    padding: 8px 12px !important;
  }

  .tn-center,
  .tn-c,
  .aiw-topnav-center {
    display: none !important;
  }

  .tn-btn,
  .tn-link,
  .nav-link,
  .aiw-nav-btn {
    padding: 6px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  .content-note {
    margin-top: 36px;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .cn-title,
  .toc-title,
  .cht,
  .hero-title,
  .title-main {
    font-size: clamp(30px, 12vw, 46px) !important;
  }

  .cn-tagline,
  .cn-note,
  .locked-support-copy {
    font-size: 13px !important;
  }

  .locked-tier,
  .pt,
  .pf-box {
    padding: 20px 16px !important;
  }

  .aiw-bottom-nav,
  .bn {
    height: 76px !important;
  }

  .aiw-bn-inner,
  .bni {
    grid-template-columns: 1fr 44px 1fr !important;
    padding: 0 10px !important;
  }

  .bn-center,
  .bc,
  .aiw-navbtn-center {
    width: 44px !important;
    height: 44px !important;
  }

  #bookmark-fab,
  #bkm {
    right: 12px !important;
    bottom: 86px !important;
  }

  .bookmark-banner,
  .teaser-cta-row,
  .t-cr,
  .cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .bm-btn,
  .bm-clear-btn,
  .teaser-cta-btn,
  .teaser-toc-btn,
  .t-ca,
  .t-to,
  .btn-read,
  .btn-toc {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  .tn-left,
  .tn-l,
  .tn-links,
  .nav-links {
    gap: 4px !important;
  }

  .tn-btn,
  .tn-link,
  .nav-link {
    letter-spacing: 0.04em !important;
  }

  .ch-row {
    grid-template-columns: 38px 1fr !important;
  }

  .ch-content {
    padding: 12px 12px !important;
  }
}