/* Photographs retain one coordinate system at every viewport width. */
.room-photo, .cmp__photo, .story__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.rooms__photo, .cmp__photo, .story__photo { position: absolute; inset: 0; }
.rooms__view { aspect-ratio: 1600 / 1143; }
.tip { left: 12px; bottom: 12px; width: min(320px, calc(100% - 24px)); }
.rooms__list li { cursor: default; }
.rooms__list button { width: 100%; border: 0; padding: 0; background: transparent; text-align: left; line-height: inherit; font-size: inherit; }
.room-status:empty, .story-status:empty { display: none; }
.room-status { font-size: 14px; color: var(--ink-2); }
.story-status { font-size: 13px; color: var(--on-night-2); }
.story__vis { overflow: hidden; }
.story__photo { transition: filter .8s; }
.story.played .story__photo { filter: brightness(1.08); }
.form__row.is-error input { border-color: #B13826; }
.form__row.is-error .form__err { display: block; }
.form__ok { position: static; margin-top: 16px; padding: 20px; background: var(--sage-soft); color: var(--ink); border-radius: var(--r-s); }
.form__ok p { color: var(--ink); }
.visual-note { font-size: 13px; color: var(--ink-3); margin-top: 16px; }
.hot { width: 44px; height: 44px; }
.hot::before { inset: -3px; }
.btn:disabled { opacity: .65; cursor: wait; }
@media (max-width: 600px) {
  .rooms__view { aspect-ratio: 1600 / 1143; }
  .cmp__tag { font-size: 11px; padding: 5px 8px; top: 12px; }
  .cmp__tag--l { left: 10px; } .cmp__tag--r { right: 10px; }
}
@media (max-width: 1060px) { .burger { display: block; margin-left: 0; flex-shrink: 0; } }
@media (max-width: 640px) { .burger { margin-left: auto; } .logo__name { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .story__photo { transition: none; }
}