/* Readable, interactive headers for small screens. */
.mobile-scene { display: none; }
@media (max-width: 900px) {
  header.mobile-header.sr-only, .hero > .mobile-intro.sr-only {
    position: static !important; width: auto !important; height: auto !important;
    padding: 20px !important; margin: 0 !important; overflow: visible !important;
    clip: auto !important; white-space: normal !important; border: 0 !important;
  }
  header.mobile-header { background: #171411; color: #f3eee5; }
  .mobile-header > p { margin: 0 0 12px; font: 600 22px Georgia, serif; }
  .mobile-header nav { display: flex !important; flex-wrap: wrap; gap: 4px 16px; }
  .mobile-header nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1.3 Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
  .mobile-header a:focus-visible { outline: 2px solid #c79245; outline-offset: 4px; }
  .hero > img { display: none !important; }
  .hero .mobile-scene { display: block; height: 200px; background-size: cover; background-position: center; }
  .hero > .mobile-intro { background: #171411; color: #f3eee5; }
  .hero .mobile-intro h1 { margin: 8px 0 16px; font: 500 clamp(38px, 9vw, 60px)/1.05 Georgia, serif; overflow-wrap: anywhere; }
  .hero .mobile-intro p { margin: 0 0 14px; font: 400 17px/1.55 Georgia, serif; }
  .hero .mobile-intro p:first-child { font: 600 11px/1.6 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #d5aa68; }
  .hero .mobile-intro p:last-child { margin-bottom: 0; }
  .quote-band { padding-top: 30px; padding-bottom: 30px; column-gap: 12px; }
  .quote-band blockquote { font-size: clamp(25px, 6.5vw, 36px); line-height: 1.25; margin: 0; }
  .quote-mark { font-size: 46px; }
  .quote-credit, .quote-play { margin-top: 16px; }
  .editorial, .overview { padding-top: 28px; padding-bottom: 32px; }
  .eyebrow { overflow-wrap: anywhere; }
}
@media (max-width: 900px) { body[data-play="remains"] .mobile-scene { background-image: url("remains/assets/winter-cabin.jpg"); } }
@media (max-width: 900px) { body[data-play="places"] .mobile-scene { background-image: url("places/assets/places-hero.jpg"); } }
@media (max-width: 900px) { body[data-play="christmas-apparently"] .mobile-scene { background-image: url("christmas-apparently/assets/christmas-apparently-hero.jpg"); } }
@media (max-width: 900px) { body[data-play="fine"] .mobile-scene { background-image: url("fine/assets/fine-hero.jpg"); } }
@media (max-width: 900px) { body[data-play="fine"] .mobile-scene { background-size: auto 260px; background-position: right bottom; } }
@media (max-width: 900px) { body[data-play="places"] .mobile-scene, body[data-play="christmas-apparently"] .mobile-scene { background-size: auto 440px; background-position: center bottom; } }