/* Phone refinements. The desktop composition is intentionally unchanged. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) and (max-width: 1040px) and (max-height: 500px) {
  :root {
    --mobile-bar-height: 4rem;
    --topbar: calc(var(--mobile-bar-height) + env(safe-area-inset-top, 0px));
    --page-gutter: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
  html, body { width: 100%; min-height: 100%; }
  body { height: 100dvh; }
  .site-topbar { padding-top: env(safe-area-inset-top, 0px); }
  .topbar-inner { height: var(--mobile-bar-height); }
  .hamburger { width: 44px; height: 44px; }
  .hamburger .menu-icon-bars, .hamburger .menu-icon-close { transition: opacity 300ms ease; }
  .hamburger .menu-icon-close, .hamburger.open .menu-icon-bars { opacity: 0; }
  .hamburger.open .menu-icon-close { opacity: 1; }
  .rhs-content {
    padding-top: 24px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
    scroll-padding-block: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .section { padding-bottom: 20px; }
  .mobile-menu-scrim { background: rgba(9, 13, 12, 0.93); }
  .lhs-menu {
    top: calc(var(--topbar) + 6px);
    right: var(--page-gutter);
    left: var(--page-gutter);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--topbar) - 16px - env(safe-area-inset-bottom, 0px));
    padding: 8px 0;
    background: transparent;
    backdrop-filter: none;
    transform: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: opacity 300ms ease, visibility 0s linear 300ms;
  }
  body.menu-open .lhs-menu {
    transform: none;
    transition: opacity 300ms ease, visibility 0s;
  }
  .lhs-menu .menu-entry {
    min-height: 46px;
    padding-inline: 12px;
    font-size: 14px;
    letter-spacing: 0.15em;
    line-height: 1.3;
  }
  .lhs-menu .cinema-menu-option { min-height: 44px; }
  .lhs-menu .cinema-menu-options[aria-hidden="false"] { max-height: 14rem; }
  #cinema-section .cinema-prose > h2,
  #cinema-section .cinema-view-heading { font-size: clamp(1.65rem, 7.5vw, 1.9rem); line-height: 1.18; }
  #cinema-section .cinema-course > h2 { font-size: clamp(1.9rem, 8vw, 2.35rem); }
  #cinema-section .cinema-course-subtitle { font-size: 1.3rem; }
  .rhs-content:has(#cinema-section:not([style*="display: none"]):not([style*="display:none"]) #cinema-panel-blog:not([hidden]) #blog-index:not([hidden])) {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .rhs-content:has(#cinema-section:not([style*="display: none"]):not([style*="display:none"]) #cinema-panel-blog:not([hidden]) #blog-index:not([hidden])) #cinema-section .blog-intro {
    margin-bottom: 20px;
    column-gap: 16px;
  }
  .rhs-content:has(#cinema-section:not([style*="display: none"]):not([style*="display:none"]) #cinema-panel-blog:not([hidden]) #blog-index:not([hidden])) #cinema-section .blog-intro > p {
    font-size: 1.1875rem;
    line-height: 1.4;
    text-wrap: pretty;
  }
  #cinema-section .blog-entry > a { gap: 16px; padding-block: 20px; }
  #cinema-section .blog-entry h3 { font-size: clamp(1.625rem, 7vw, 1.85rem); }
  #cinema-section .blog-entry p { line-height: 1.65; }
  .blog-entry-link:not(:has(.blog-entry-image)) .blog-entry-copy { margin-left: 0; }

  /* Keep the poster beside the article opening, with the reading surface full-width. */
  #cinema-section .blog-reading-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    column-gap: 20px;
    row-gap: 0;
  }
  #cinema-section .blog-reading-layout:not(:has(.blog-poster)) { grid-template-columns: minmax(0, 1fr); }
  .blog-reading-column { display: contents; }
  .blog-poster { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; }
  .blog-poster-link { min-height: 44px; }
  #cinema-section .blog-return {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-height: 44px;
    margin: -8px 0 8px;
    font-size: 1rem;
  }
  .blog-reader-header { grid-column: 1; grid-row: 2; }
  #cinema-section .blog-reading-column h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; margin-bottom: 0; }
  .blog-prose, .blog-editorial-image, .blog-article-nav { grid-column: 1 / -1; min-width: 0; }
  .blog-prose { margin-top: 28px; font-size: clamp(1.25rem, 5.6vw, 1.375rem); }
  #cinema-section .blog-prose :is(p, li) { font-size: clamp(1.25rem, 5.6vw, 1.375rem); }
  .blog-prose blockquote {
    margin-inline: clamp(8px, 3vw, 14px);
    padding-left: 14px;
    padding-right: 15px;
  }
  .blog-article-nav a { min-height: 56px; padding-block: 12px; }
  .contact-links a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
  #web-section .web-hero { padding-top: 28px; }
  #web-section .web-hero h1 { font-size: clamp(2.5rem, 12.8vw, 3.5rem); line-height: 0.95; }
  #web-section .web-hero-footnote { font-size: 14px; }
  #web-section .proposal-service-row p { font-size: 1rem; }
  #podcast-section .podcast-header { display: flow-root; width: 100%; }
  .podcast-desktop-paragraph-break { display: none; }
  #podcast-section .podcast-cover { float: left; width: clamp(104px, 30vw, 128px); margin-right: 16px; }
  #podcast-section .podcast-subtitle { font-size: 1rem; line-height: 1.6; }
  #podcast-section .podcast-episode {
    grid-template-columns: clamp(88px, 28vw, 120px) minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    padding-block: 20px;
  }
  #podcast-section .podcast-episode:has(.podcast-episode-thumb[aria-hidden="true"]:empty) { grid-template-columns: minmax(0, 1fr); }
  #podcast-section .podcast-episode-figure:has(.podcast-episode-thumb[aria-hidden="true"]:empty) { display: none; }
  #podcast-section .podcast-episode:first-child { padding-top: 0; }
  #podcast-section .podcast-episode-details h2 { margin-bottom: 8px; }
  .podcast-episodes { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
  :root {
    --mobile-bar-height: 3.75rem;
    --page-gutter: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
}
/* A long fixed introduction must not squeeze the episode list out of a short phone. */
@media (max-width: 860px) and (max-height: 740px), (hover: none) and (pointer: coarse) and (max-width: 1040px) and (max-height: 500px) {
  .rhs-content:has(#podcast-section:not([style*="display: none"]):not([style*="display:none"])) {
    display: block;
    overflow-y: auto;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
  .rhs-content:has(#podcast-section:not([style*="display: none"]):not([style*="display:none"])) .section-stage { height: auto; overflow: visible; }
  #podcast-section { height: auto; }
  .podcast-episodes { flex: none; overflow: visible; }
}
@media (max-width: 860px) and (max-height: 500px), (hover: none) and (pointer: coarse) and (max-width: 1040px) and (max-height: 500px) {
  .rhs-content { padding-top: 16px; }
  .rhs-content:has(#cinema-section:not([style*="display: none"]):not([style*="display:none"]) #cinema-panel-blog:not([hidden]) #blog-index:not([hidden])) #cinema-section .blog-intro { margin-bottom: 14px; }
  .rhs-content:has(#cinema-section:not([style*="display: none"]):not([style*="display:none"]) #cinema-panel-blog:not([hidden]) #blog-index:not([hidden])) #cinema-section .blog-intro > p { font-size: 1.125rem; line-height: 1.35; }
}