/* The introduction is a film on a little paper screen, always visitor-started. */
@media screen {
  .hero:has(.intro-film) { grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: center; }
  .intro-film { min-width: 0; margin: 0; position: relative; padding: 22px; border: 1px solid #c1c9b3; border-radius: 7px; background: #fffdf6; box-shadow: 0 3px 0 #f8f6ed,0 4px 0 #bec8ae,9px 12px 0 #e8ebdc,10px 13px 0 #cad2b8; }
  .intro-film::before { content: ''; position: absolute; width: 82px; height: 23px; top: -12px; right: 28px; transform: rotate(4deg); background: #d9e6bcd9; border-inline: 1px dashed #a7b786; pointer-events: none; }
  .film-masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; margin-bottom: 17px; }
  .film-masthead .eyebrow { font-size: .58rem; margin: 0; letter-spacing: .13em; }
  .film-duration { color: #66725c; font-size: .73rem; }
  .film-window { overflow: hidden; border: 1px solid #d9dccb; border-radius: 3px; background: #f8f6ed; }
  .film-window video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: #f8f6ed; }
  .film-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 15px; }
  .film-controls[hidden] { display: none; }
  .film-controls button { display: inline-flex; align-items: center; gap: 9px; justify-content: center; min-height: 46px; padding: 10px 14px; font: 600 .82rem/1.4 var(--sans); border: 1px solid #b8c4a6; border-radius: 4px; background: #eaf0da; color: var(--forest); cursor: pointer; }
  .film-controls button:hover { background: #dde9c3; }
  .film-controls button:active { background: #d4e4b4; }
  .film-toggle::before { content: '▶'; font-size: .72rem; }
  .film-toggle[data-state=playing]::before { content: 'Ⅱ'; }
  .film-toggle[data-state=ended]::before { content: '↻'; font-size: 1.05rem; }
  .film-controls .film-sound { background: transparent; border-color: transparent; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
  .film-sound[aria-pressed=true]::before { content: '♪'; font-size: 1.05rem; }
  .intro-film figcaption { margin-top: 18px; color: #55644d; font-size: .85rem; line-height: 1.65; }
  .film-status { color: #744b35; font-size: .81rem; line-height: 1.7; margin: 12px 0; }
  .film-status:empty { display: none; }
  .film-transcript { margin-top: 8px; border-top: 1px solid #e0e3d4; }
  .film-transcript summary { cursor: pointer; min-height: 44px; padding: 12px 0 7px; font-size: .76rem; color: #526148; }
  .film-transcript ol { padding-left: 21px; margin: 14px 0; }
  .film-transcript li, .film-transcript p { font-size: .83rem; line-height: 1.75; color: #55644d; }
  .film-transcript li + li { margin-top: 9px; }
  .film-transcript p { margin-bottom: 0; }
}
@media screen and (max-width: 1100px) {
  .hero:has(.intro-film) { gap: 30px; }
  .intro-film { padding: 18px; }
  .film-masthead { align-items: flex-start; }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .hero:has(.intro-film) { grid-template-columns: .9fr 1.1fr; gap: 26px; }
  .hero:has(.intro-film) h1 { font-size: 3.3rem; }
  .film-controls { gap: 4px; }
  .film-controls button { padding-inline: 10px; font-size: .76rem; }
  .film-masthead { margin-bottom: 13px; }
}
@media screen and (max-width: 600px) {
  .hero:has(.intro-film) { grid-template-columns: 1fr; gap: 35px; padding-bottom: 43px; }
  .intro-film { padding: 17px; box-shadow: 0 3px 0 #f8f6ed,0 4px 0 #bec8ae,5px 8px 0 #e8ebdc,6px 9px 0 #cad2b8; }
  .intro-film::before { right: 20px; width: 63px; }
  .film-masthead .eyebrow { font-size: .55rem; }
  .film-duration { font-size: .68rem; }
  .film-controls { gap: 7px; }
  .film-controls button { font-size: .79rem; padding-inline: 11px; }
  .intro-film figcaption { font-size: .83rem; margin-top: 15px; }
}
@media screen and (max-width: 355px) {
  .intro-film { padding: 13px; }
  .film-controls button { font-size: .73rem; padding-inline: 9px; }
}
@media print { .intro-film { display: none; } }