/* First-act direction pass (1.8): scene-specific, HTML text over actual photographs.
   The desktop compositions are authored independently of the mobile glass. */
@media (min-width:900px){
  /* 1.1: let the coastline occupy the entire stage. The words are held by a
     feathered shadow, rather than by a solid PowerPoint-shaped box. */
  body.in-story .film-stage[data-scene="1.1"].shot-panorama{
    display:grid!important;grid-template-columns:1fr!important;isolation:isolate;
  }
  body.in-story .film-stage[data-scene="1.1"].shot-panorama .film-visual{
    position:absolute!important;inset:0!important;grid-column:1!important;
    width:100%!important;height:100%!important;
  }
  body.in-story .film-stage[data-scene="1.1"].shot-panorama .film-reading{
    grid-column:1!important;grid-row:1!important;justify-self:end;
    width:min(44vw,630px)!important;margin:0!important;
    background:none!important;padding:clamp(25px,4vh,54px) clamp(28px,6vw,100px) 22px 30px!important;
  }
  body.in-story .film-stage[data-scene="1.1"].shot-panorama .film-wash{
    background:
      radial-gradient(ellipse 57% 80% at 93% 54%,#0c1620cc 0%,#0c16207d 49%,transparent 100%),
      linear-gradient(0deg,#10131aa0,transparent 29%)!important;
  }
  body.in-story .film-stage[data-scene="1.1"] .film-prose{
    font:clamp(18px,1.48vw,23px)/1.65 Georgia,serif!important;
    color:#fffaf0!important;text-shadow:0 2px 15px #09121ab8,0 0 40px #09121a8c;
  }
  body.in-story .film-stage[data-scene="1.1"] .film-location{
    color:#e5d4b6;letter-spacing:.27em;font-size:11px;
  }
  body.in-story .film-stage[data-scene="1.1"].shot-message .film-prose p{
    border-left-color:#c4b9a48c;padding-left:18px;
  }

  /* 1.2: wide arrival / recognition / hesitation / reunion are four
     different beats, with their own camera focus and type placement. */
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-far"] .film-wash{
    background:
      radial-gradient(ellipse 58% 94% at 3% 56%,#111923d7 0%,#1119238c 55%,transparent 100%),
      linear-gradient(0deg,#11192370,transparent 29%)!important;
  }
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-far"] .film-text-space{
    align-items:flex-end;padding-bottom:4vh;
  }
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-far"] .film-reading{
    width:min(42vw,590px)!important;
  }
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-far"] .film-location{
    color:#ffe0ab;letter-spacing:.32em;font-size:11px;
  }
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-close"] .film-wash{
    background:
      radial-gradient(ellipse 58% 96% at 0% 52%,#111722ec,#111722a9 58%,transparent 100%),
      linear-gradient(0deg,#0a101a69,transparent 25%)!important;
  }
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-quiet"] .film-wash{
    background:
      radial-gradient(ellipse 64% 85% at 0% 59%,#0c121aeb,#0c121ab0 55%,transparent 100%)!important;
  }
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-quiet"] .film-prose{
    font-style:italic;letter-spacing:.016em;
  }
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-hug"] .film-wash{
    background:
      radial-gradient(ellipse 64% 88% at 100% 47%,#19131ce9,#19131c9a 56%,transparent 100%),
      linear-gradient(0deg,#19131c55,transparent 33%)!important;
  }
  body.in-story .film-stage[data-scene="1.2"][data-photo="story-station-hug"] .film-reading{
    width:min(39vw,540px)!important;
  }

  /* 1.3: the café is an open terrace, not a dark UI column. */
  body.in-story .film-stage[data-scene="1.3"][data-photo="story-cafe-wide"] .film-wash{
    background:
      radial-gradient(ellipse 64% 96% at 1% 61%,#172023db,#1720239a 53%,transparent 100%),
      linear-gradient(0deg,#1b1e2170,transparent 30%)!important;
  }
  body.in-story .film-stage[data-scene="1.3"][data-photo="story-cafe-detail"] .film-wash{
    background:
      radial-gradient(ellipse 64% 88% at 0% 54%,#201c21e4,#201c21aa 54%,transparent 100%)!important;
  }
  body.in-story .film-stage[data-scene="1.3"] .film-location{
    color:#f5d8a9;letter-spacing:.22em;
  }
  body.in-story .film-stage[data-scene="1.3"] .film-prose{
    color:#fff5e7!important;text-shadow:0 2px 13px #0c1114ad!important;
    line-height:1.62!important;
  }
  body.in-story .film-stage[data-scene="1.3"][data-photo="story-cafe-detail"] .film-text-space{
    align-items:flex-end;padding-bottom:5vh;
  }

  /* 1.4: an old cinema carries its history in thin editorial lines. */
  body.in-story .film-stage[data-scene="1.4"] .film-location{
    font-family:Georgia,serif;font-style:italic;text-transform:none;
    color:#d9c7af;font-size:15px;letter-spacing:.06em;
  }
  body.in-story .film-stage[data-scene="1.4"].shot-panorama .film-prose{
    text-shadow:0 2px 16px #0009;
  }
  body.in-story .film-stage[data-scene="1.4"] .film-reading{
    border-left:1px solid #e4d5be14;
  }

  /* 1.5: the boat is a tactile, quieter detail before the next secret. */
  body.in-story .film-stage[data-scene="1.5"].shot-detail .film-visual{
    background:radial-gradient(ellipse at 47% 52%,#c9aa7930,transparent 66%);
  }
  body.in-story .film-stage[data-scene="1.5"] .film-prose{
    letter-spacing:.009em;
  }
  body.in-story .film-stage[data-scene="1.5"] .film-location{
    color:#d0bca0;font-style:italic;text-transform:none;
    letter-spacing:.06em;font:italic 14px Georgia,serif;
  }

  /* 1.6: keep the photographic backdrop and light story text without a paper card. */
  body.in-story .film-stage[data-scene="1.6"] .film-wash{
    background:
      radial-gradient(ellipse 65% 95% at 100% 55%,#110e18e4,#110e188b 50%,transparent 100%)!important;
  }

  /* The small dateline is treated as typography, not a coloured badge. */
  body.in-story .film-stage[data-scene^="1."] .film-location:after,
  body.in-opening .film-stage[data-scene="thursday"] .film-location:after{
    content:"";display:block;width:31px;height:1px;
    background:#e0c5a885;margin:11px 0 6px;
  }
  body.in-opening .film-stage[data-scene="thursday"] .film-prose{
    text-shadow:0 2px 22px #08131ae0;
  }
  body.in-story .film-stage[data-scene^="1."] .film-controls .choice{
    border-color:#e1cba955;background:linear-gradient(112deg,#13192248,#18212b12);
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
    border-radius:4px;
  }
  body.in-story .film-stage[data-scene^="1."] .film-controls .choice:hover{
    border-color:#efdbafaa;background:#f6e6cd1c;
  }
}
/* A tablet is neither a cropped desktop nor an enormous telephone. */
@media(min-width:721px) and (max-width:899px){
  body.in-story .film-stage[data-scene^="1."] .film-prose{
    text-shadow:0 2px 16px #080a10a8;
  }
}
/* Portrait mobile: independently photographed crops, quiet horizontal drift,
   readable bottom glass; more taps are preferable to burying the picture. */
@media(max-width:720px) and (orientation:portrait){
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene^="1."] .film-reading,
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene="thursday"] .film-reading,
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene="response"] .film-reading{
    height:clamp(240px,51.5%,352px)!important;
    background:rgba(17,22,30,.79)!important;
    border-color:#f5e1bc3b!important;
    box-shadow:0 -14px 55px #06090ea6,0 1px #ffffff09 inset!important;
    backdrop-filter:blur(11px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(11px) saturate(1.08)!important;
  }
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene="1.2"] .film-reading{
    background:rgba(23,23,29,.78)!important;
  }
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene="1.3"] .film-reading{
    background:rgba(28,27,24,.78)!important;
  }
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene="1.6"] .film-reading{
    background:rgba(20,17,25,.81)!important;
    height:clamp(270px,56%,370px)!important;
  }
  body .film-stage[data-scene^="1."] .film-text-space,
  body .film-stage[data-scene="thursday"] .film-text-space,
  body .film-stage[data-scene="response"] .film-text-space{
    align-items:flex-start!important;padding-top:4px;
  }
  body .film-stage[data-scene^="1."] .film-prose,
  body .film-stage[data-scene="thursday"] .film-prose,
  body .film-stage[data-scene="response"] .film-prose{
    text-shadow:0 1px 9px #0008;
  }
  body .film-stage[data-scene^="1."] .film-location{
    font-size:9px!important;letter-spacing:.13em;color:#f3d6aa;
  }
  body .film-stage[data-scene^="1."] .film-controls .choice,
  body .film-stage[data-scene="thursday"] .film-controls .choice{
    background:rgba(255,250,235,.075)!important;
    border-color:#eed9b862!important;border-radius:9px;
    box-shadow:inset 0 1px #ffffff11!important;
  }
  body .film-stage[data-scene^="1."] .film-visual .cinema-picture .film-art,
  body .film-stage[data-scene="thursday"] .film-visual .cinema-picture .film-art,
  body .film-stage[data-scene="response"] .film-visual .cinema-picture .film-art{
    animation:none!important;
  }
  body .film-stage[data-scene="1.2"] .film-visual .cinema-picture{
    transform-origin:50% 38%;--drift:-1.2%;
  }
  body .film-stage[data-scene="1.3"] .film-visual .cinema-picture{
    transform-origin:50% 45%;--drift:1.4%;
  }
  body .film-stage[data-scene="1.6"] .film-visual .cinema-picture{
    transform-origin:50% 45%;--drift:-.7%;
  }
  body .film-stage[data-scene="thursday"] .film-visual .cinema-picture,
  body .film-stage[data-scene="response"] .film-visual .cinema-picture{
    transform-origin:50% 40%;--drift:1%;
  }
  body .film-stage[data-scene="1.2"][data-photo="story-station-hug"] .film-visual .cinema-picture{
    --drift:.5%;
  }
  body .film-stage[data-scene="1.2"][data-photo="story-station-far"] .film-visual .cinema-picture{
    --drift:-2%;
  }
}
@media(max-width:720px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
  body .film-stage[data-scene="1.2"] .film-visual .cinema-picture,
  body .film-stage[data-scene="1.3"] .film-visual .cinema-picture,
  body .film-stage[data-scene="1.6"] .film-visual .cinema-picture,
  body .film-stage[data-scene="thursday"] .film-visual .cinema-picture,
  body .film-stage[data-scene="response"] .film-visual .cinema-picture{
    animation:xpsi-camera-drift 23s ease-in-out infinite alternate;
  }
}
@keyframes xpsi-camera-drift{
  from{transform:translate3d(var(--drift,1%),0,0) scale(1.065)}
  to{transform:translate3d(calc(var(--drift,1%) * -1),0,0) scale(1.095)}
}
@media(max-width:370px) and (max-height:670px) and (orientation:portrait){
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene^="1."] .film-reading,
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene="thursday"] .film-reading,
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene="response"] .film-reading{
    height:clamp(238px,54%,280px)!important;padding:8px 12px 6px!important;
  }
  body .film-stage:not(.shot-quiet):not(.shot-epigraph):not(.shot-promise)[data-scene="1.6"] .film-reading{
    height:clamp(285px,62%,310px)!important;
  }
  body .film-stage[data-scene^="1."] .film-controls .choice{
    min-height:43px!important;font-size:13.8px!important;padding:8px 10px!important;
  }
  body .film-stage[data-scene^="1."] .film-bottom{min-height:26px!important;}
}