:root {
  --page-gutter: 34px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --reading-top: calc(78px + var(--safe-top));
}

.site-header {
  height: var(--reading-top);
  padding-top: var(--safe-top);
}

.header-inner, .page-wrap, .site-footer {
  padding-left: max(var(--page-gutter), var(--safe-left));
  padding-right: max(var(--page-gutter), var(--safe-right));
}

.site-footer {
  padding-bottom: max(var(--page-gutter), var(--safe-bottom));
}

.analytics-notice {
  margin-left: var(--safe-left);
  margin-right: var(--safe-right);
  margin-bottom: var(--safe-bottom);
}

.reading-toolbar { top: var(--reading-top); }
.reading-toolbar button { min-height: 44px; }
.reading-current { overflow-wrap: anywhere; }

.chapter-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 146px), 1fr)); }
.chapter-card, .episode-card, .part-name { min-width: 0; }
.chapter-card .name, .part-name h3, .episode-card h3 { overflow-wrap: anywhere; }

.modal-backdrop {
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right))
    max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
}

.modal { max-height: min(100%, 850px); }
.modal-close { flex: 0 0 44px; width: 44px; height: 44px; }

@media (max-width: 920px) {
  :root { --page-gutter: 22px; }
  .chapter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  :root { --page-gutter: 16px; --reading-top: var(--safe-top); }
  .site-header { height: auto; }
  .header-inner { padding-top: 10px; padding-bottom: 8px; gap: 5px; }

  .top-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 2fr)) repeat(3, minmax(0, 3fr));
    gap: 2px;
  }

  .top-nav a, .top-nav button {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 4px 2px;
    text-align: center;
    white-space: normal;
  }

  .intro { padding: 23px 0; }
  .intro h1 { font-size: clamp(25px, 7vw, 31px); margin: 12px 0 10px; }
  .page-back { padding-top: 16px; flex-wrap: wrap; gap: 6px; }
  .listen { padding-top: 18px; }
  .feature-actions { gap: 12px; }
  .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-card:last-child { grid-column: auto; }
  .chapter-card:nth-child(odd):last-child { grid-column: 1 / -1; }
  .part-title-row { gap: 10px; }
  .listen-from { min-height: 44px; flex: none; }
  .resume-bar { flex-wrap: wrap; }
  .resume-bar button { min-height: 44px; }
  .modal select, .modal input, .modal textarea { font-size: 16px; }
}

@media (max-width: 650px), (max-height: 540px) and (orientation: landscape) {
  .player { display: flex; flex-direction: column; padding: 18px 14px 14px; }
  .player-top { gap: 8px; }
  .current-label { margin: 14px 0 4px; }
  .player-title { margin: 0 0 6px; font-size: 16px; }
  .seek-area { width: 100%; margin-top: 2px; }
  .transport { gap: clamp(6px, 3vw, 20px); margin: 8px 0; }
  .skip-button { min-width: 0; min-height: 62px; padding-inline: 5px; }
  .skip-button span { white-space: nowrap; }
  .play-button { flex: none; width: 70px; height: 70px; }
  .player-bottom { justify-content: space-between; gap: 10px; }
  .play-status { max-width: none; text-align: left; }
  .speed-button { position: static; flex: none; min-height: 44px; }

  .live-caption-panel {
    order: 1;
    width: 100%;
    min-height: 72px;
    margin: 12px auto 0;
    padding: 9px 12px;
  }

  .live-caption-text { font-size: 16px; }
  .reading-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 7px 0;
    gap: 5px;
  }

  .reading-label { display: none; }
  .reading-toolbar button { padding: 5px 6px; font-size: 12px; }
  .reading-current { grid-column: 1 / -1; font-size: 14px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  :root { --reading-top: var(--safe-top); }
  .site-header { height: auto; position: static; }
  .header-inner { min-height: 54px; }
  .intro { padding: 18px 0; }
  .intro h1 { margin: 10px 0 8px; }
  .listen { padding-top: 16px; }
}

@media (min-width: 560px) and (max-height: 540px) and (orientation: landscape) {
  .reading-toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reading-current { grid-column: 1 / -1; align-self: center; margin: 0; }
}