:root {
  color-scheme: dark;
  --paper: #eee7da;
  --muted: #b9ad9d;
  --latte: #c9aa8b;
  --matcha: #bdcb9d;
  --line: #44352b;
  --base: #15110e;
  --espresso: #100d0b;
  --panel: #231b15;
  --serif: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", Georgia, serif;
  --sans: system-ui, "Microsoft YaHei", sans-serif;
  --index: Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .75, .25, 1);
  background: var(--base);
  color: var(--paper);
  font: 15px/1.5 var(--sans);
}

* { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--matcha); outline-offset: 5px; }

.index-type {
  color: var(--muted);
  font: 11px/1.5 var(--index);
  letter-spacing: .15em;
}

/* The print and its rooms share the same image registration. */
.room-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3/2;
  background: #080807;
}

.room-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-image, [data-room=film] {
  /* Aperture measured against the shared 1536 × 1024 hallway photograph. */
  --poster-left: 28.3203125%;
  --poster-top: 10.64453125%;
  --poster-width: 34.44010417%;
  --poster-height: 77.5390625%;
}

.room-image .tile-poster, [data-room=film] .entry {
  inset: var(--poster-top) auto auto var(--poster-left);
  width: var(--poster-width);
  height: var(--poster-height);
}

/* The room and its catalogue occupy the same viewport. */
.room {
  --paper: #ebe3d6;
  --muted: #b9ae9e;
  --latte: #c8b89e;
  --line: #4b4238;
  --espresso: #16130f;
  --panel: #211c17;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr);
  min-height: 440px;
  height: 100svh;
  overflow-x: clip;
  background: var(--espresso);
  color: var(--paper);
}

.room :focus-visible { outline-color: var(--paper); }

.room-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: start;
  width: min(1440px, 100% - 2 * clamp(18px, 4.4vw, 74px));
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

.room-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.7vw, 22px);
}

.room-header .filter { justify-self: end; padding-inline: 4px 0; }
.room-identifier { grid-column: 2; font: 13px/1.4 var(--serif); letter-spacing: .06em; }
.back, .filter, .enter-text, .collection-add {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 13px/1.4 var(--serif);
}

.back, .filter, .enter-text, .browse-controls button, .collection-add, .collection-edit {
  color: var(--muted);
  border: 0;
  background: transparent;
}

.back, .filter, .enter-text, .collection-add, .collection-edit { min-height: 44px; white-space: nowrap; }
.collection-add { padding-inline: 0; }
.back span:first-child, .collection-add span { color: var(--latte); font-family: var(--sans); }
.back:hover, .filter:hover, .enter-text:hover, .collection-add:hover, .collection-edit:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: .28em;
}

.room main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 132px;
  min-height: 0;
}

.room-stage {
  position: relative;
  min-height: 0;
  overflow: clip;
  isolation: isolate;
  background: var(--espresso);
}

.scene, .rack { position: absolute; inset: 0; transition: opacity .66s var(--ease); }
.scene { z-index: 1; }
.scene-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, calc((100svh - 194px) * 1.5), 1440px);
  aspect-ratio: 3/2;
  transform: translate(-50%, -50%);
  background: center/100% 100% no-repeat;
}

[data-room=film] .scene-art { background-image: url("assets/cinema-hallway-emma-ou.webp"); }

.entry {
  position: absolute;
  display: grid;
  padding: 0;
  background: none;
  border: 0;
}

.entry img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-room=film] .entry { background: #191b17; }
[data-room=film] .entry::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 6px #0004;
  transition: box-shadow .22s var(--ease);
}

[data-room=film] .entry:is(:hover, :focus-visible)::after {
  box-shadow: inset 0 0 3px #0002;
}

[data-room=book] .entry, [data-room=record] .entry { inset: 0; outline-offset: -6px; }
.shelf-photo, .turntable-photo { width: 100%; height: 100%; object-fit: cover; }
.entry img { transition: filter .26s; }
.entry:hover img { filter: brightness(1.1); }
[data-room=film] .entry:is(:hover, :focus-visible) img { filter: brightness(1.04); }
.room.browsing .scene { opacity: 0; pointer-events: none; }
.room:not(.browsing) .rack { opacity: 0; pointer-events: none; }

/* Let the lit poster lead before the rest of the film collection appears. */
[data-room=film] .scene { transition-duration: .55s; }
[data-room=film] .rack { transition-duration: .28s; }
[data-room=film].browsing .rack {
  transition-duration: .42s;
  transition-delay: .16s;
}

.rack {
  z-index: 2;
  perspective: 1120px;
  cursor: grab;
  touch-action: pan-y;
  outline-offset: -5px;
}

.rack.dragging { cursor: grabbing; }
.cover, .travel-image {
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  background: var(--panel);
}

.cover {
  --cover-width: min(34vw, 322px, calc((100svh - 228px) * .6667));
  position: absolute;
  left: 50%;
  top: 49%;
  width: var(--cover-width);
  aspect-ratio: 2/3;
  box-shadow: 5px 9px 23px #0008;
}

[data-room=record] .cover { --cover-width: min(42vw, 426px, 100svh - 238px); aspect-ratio: 1; }
.cover.jacket {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(12px, 3.6vw, 40px) clamp(11px, 2.5vw, 30px);
  background: var(--jacket);
  color: #f2e6d1;
  box-shadow: inset 3px 0 5px #0004, 5px 9px 23px #0008;
}

[data-room=book] .cover.jacket {
  background: #ded2b9;
  color: #433729;
  box-shadow: 5px 9px 23px #0008;
}

.jacket b { align-self: center; font: 400 clamp(19px, 4vw, 48px)/1.26 var(--serif); letter-spacing: .05em; }
.jacket span { font: 11px/1.2 var(--index); letter-spacing: .16em; }
.jacket small { font: 400 clamp(11px, 1.4vw, 16px)/1.4 var(--serif); letter-spacing: .08em; }
.travel-image { position: fixed; z-index: 12; margin: 0; }
.room.moving .entry img, .room.moving .cover.is-current { visibility: hidden; }
.empty { position: absolute; inset: 45% 20px auto; color: var(--muted); text-align: center; }

.room-info {
  position: relative;
  z-index: 5;
  width: min(1440px, 100% - 2 * clamp(18px, 4.4vw, 74px));
  margin-inline: auto;
  border-top: 1px solid var(--line);
  background: var(--espresso);
}

.scene-label, .browse-info { position: absolute; inset: 0; transition: opacity .4s var(--ease); }
.scene-label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  align-items: center;
  gap: 6px 14px;
}

.scene-label h1 { grid-column: 1; font: 400 clamp(32px, 3.1vw, 41px)/1.15 var(--serif); }
.enter-text {
  grid-column: 2;
  padding: 10px 0 10px 8px;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: .28em;
}
.room.browsing .scene-label, .room:not(.browsing) .browse-info { opacity: 0; pointer-events: none; }

.browse-info { text-align: center; display: grid; align-content: center; gap: 4px; }
[data-room=film] .browse-info { transition-duration: .2s; }
[data-room=film].browsing .browse-info {
  transition-duration: .27s;
  transition-delay: .34s;
}
.browse-info #position { color: var(--muted); font: 12px/1.3 var(--index); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.collection-edit {
  justify-self: center;
  padding: 0 8px;
  font: 12px/1.3 var(--serif);
}
.browse-controls {
  display: grid;
  grid-template-columns: 44px minmax(0, 400px) 44px;
  align-items: center;
  justify-content: center;
  column-gap: clamp(5px, 2vw, 26px);
}
.browse-controls button {
  width: 44px;
  height: 44px;
  padding: 0;
  font: 18px/1 var(--sans);
}
.browse-controls button:hover:not(:disabled) { color: var(--paper); }
.browse-controls button:disabled { opacity: .38; cursor: default; }
#current { min-width: 0; }
#current h2, #current p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#current h2 { font: 400 clamp(17px, 2.1vw, 26px)/1.15 var(--serif); }
#current p { color: var(--muted); font: 12px/1.4 var(--serif); margin-top: 5px; }

.room dialog {
  background: var(--panel);
  color: var(--paper);
  width: min(380px, 100vw - 36px);
  max-height: calc(100svh - 36px);
  border: 1px solid var(--line);
  padding: clamp(18px, 5vw, 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.room dialog::backdrop { background: #000b; }
.room dialog h2 { font: 400 25px/1.2 var(--serif); margin-bottom: 6px; }
.room dialog form { display: grid; gap: 12px; }
.room dialog label { display: grid; gap: 2px; color: var(--muted); font: 13px/1.4 var(--serif); }
.room dialog :is(select, input, button) {
  min-width: 0;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #746758;
  border-radius: 0;
  background: transparent;
  padding: 7px 4px;
  color: var(--paper);
}
.room dialog select option { background: var(--panel); }
.room dialog :focus-visible { outline-offset: 2px; }
.room dialog button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border-bottom-color: var(--line);
  text-align: left;
  font-family: var(--serif);
}
.room dialog button:hover { border-bottom-color: currentColor; }
.room dialog input::placeholder { color: var(--muted); }

.room .collection-dialog {
  width: min(440px, 100vw - 36px);
}

.collection-fields {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.room dialog label:has(input[type=checkbox]) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room dialog input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--latte);
}

.collection-fields input[type=file]::file-selector-button {
  margin-right: 8px;
  border: 0;
  padding: 2px 4px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.collection-feedback {
  min-height: 1.5em;
  color: var(--latte);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.collection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.room .collection-actions button {
  flex: 1 1 5em;
  justify-content: center;
  text-align: center;
  color: var(--muted);
}

.room .collection-actions button[type=submit] { color: var(--paper); border-bottom-color: #746758; }
.room .collection-actions .collection-remove { color: #d3a18a; }

@media (max-width: 700px) {
  [data-room=film] .scene-art {
    width: min(146vw, calc((100svh - 194px) * 1.5));
  }
  .cover { --cover-width: min(50vw, calc((100svh - 228px) * .6667)); }
  [data-room=record] .cover { --cover-width: min(58vw, 100svh - 238px); }
}

@media (max-width: 410px) {
  .room-header { grid-template-columns: auto 1fr auto; column-gap: 8px; }
  .room-identifier { justify-self: center; white-space: nowrap; }
  .back, .filter, .collection-add { gap: 5px; font-size: 12px; }
  .room-actions { gap: 9px; }
  #current h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}