/* Fixed inks keep the corner-set titles steady as a lamp or film changes. */
#experience #room-arrival[data-title-style="filmstrip"] {
  inset: clamp(90px, 14svh, 142px) auto auto var(--cinema-gutter, 2.2vw);
  max-width: min(35rem, 48vw);
  align-items: flex-start;
  gap: 6px;
  color: #f8f6ef;
  text-shadow: 0 1px 4px #120f0bd9, 0 2px 16px #09080799;
  transform: none;
  transform-origin: left bottom;
  transition: opacity .38s ease;
}
#experience:has(#world:is([data-room="whitehall"],[data-room="construct"],[data-room="neuro"])) #room-arrival[data-title-style="filmstrip"] {
  color: #191b19;
  text-shadow: 0 1px 5px #ffffffc9;
  isolation: isolate;
}
/* A light falloff only behind the lettering: the Neuro monitors can be black
   immediately underneath a title, even though the architecture is white. */
#experience:has(#world:is([data-room="whitehall"],[data-room="construct"],[data-room="neuro"])) #room-arrival[data-title-style="filmstrip"]::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -15px -22px -20px;
  background: linear-gradient(100deg, #f5f5ede6, #f5f5edac 65%, transparent 97%);
  filter: blur(12px);
}
#room-arrival[data-title-style="filmstrip"] #room-number {
  font: 400 14px/1.2 'Times Now', Georgia, serif;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}
#room-arrival[data-title-style="filmstrip"] #room-name {
  font: 300 clamp(34px, 4.2vw, 52px)/.95 'NB International', Arial, sans-serif;
  letter-spacing: -.005em;
  text-wrap: balance;
}
@media (max-width:700px), (pointer:coarse) {
  #experience #room-arrival[data-title-style="filmstrip"] {
    inset: max(70px, calc(env(safe-area-inset-top) + 60px)) auto auto max(20px, env(safe-area-inset-left));
    max-width: min(25rem, calc(100vw - 40px));
  }
  #room-arrival[data-title-style="filmstrip"] #room-number {font-size: 11px;}
  #room-arrival[data-title-style="filmstrip"] #room-name {font-size: 34px;}
  #experience:has(#tv-panel:not([hidden])) #room-arrival[data-title-style="filmstrip"] {visibility: hidden;}
}
@media (max-height:500px) {
  #experience #room-arrival[data-title-style="filmstrip"] {max-width: min(20rem, 50vw);}
  #room-arrival[data-title-style="filmstrip"] #room-name {font-size: 28px;}
}
@media (prefers-reduced-motion:reduce) {
  #experience #room-arrival[data-title-style="filmstrip"] {transition: none;}
}
#experience #room-arrival[data-title-style="filmstrip"][data-still] {transition: none;}