:root {
  color-scheme:dark;
  font-family:Arial,sans-serif;
  color:#f7f0df;
  background:#15120f
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  border:1px solid #ffffff65;
  background:#171410ed;
  border-radius:3px;
  padding:.8rem 1rem;
  min-height:44px
}
button:hover {
  background:#544535
}
button:focus-visible,a:focus-visible {
  outline:3px solid #ffd983;
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.office {
  position:relative;
  min-height:100svh;
  isolation:isolate;
  overflow:clip
}
.scene,.transition {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2
}
.office::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(#0009,transparent 27%,transparent 65%,#0009)
}
header {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:1rem;
  padding:1.5rem 2rem
}
.identity {
  font-weight:700;
  letter-spacing:.14em;
  text-decoration:none;
  text-shadow:0 1px 6px #000
}
.identity span {
  display:block;
  margin-top:.6rem;
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.03em
}
nav {
  display:flex;
  gap:.6rem
}
.entrance,.desk-controls {
  /* Match the centered, cover-sized 1920 × 1080 hallway photograph. */
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:max(100vw,177.777778vh);
  height:max(100vh,56.25vw);
  pointer-events:none
}
#enter {
  position:absolute;
  left:39.5%;
  top:13.5%;
  width:16%;
  height:72.5%;
  pointer-events:auto;
  background:transparent;
  border:0;
  padding:0
}
.office[data-state="door"]::before,.office[data-state="desk"]::before,.office[data-state="transition"]::before {
  display:none
}
h1 {
  margin:0;
  font-size:1.35rem;
  font-weight:400
}
.primary {
  background:#f1dfb9;
  color:#251d15;
  border-color:#f1dfb9
}
.primary:hover {
  background:#fff0ce
}
.binder-target {
  position:absolute;
  left:62%;
  top:40%;
  width:38%;
  height:60%;
  background:transparent;
  border:0;
  padding:0;
  pointer-events:auto
}
.binder-target:hover {
  background:transparent
}
#collections {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:1.25rem;
  color:#f7f0df
}
#collections button[aria-pressed="true"] {
  outline:2px solid #8b6837
}
#collections button {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  text-align:left
}
#collections small {
  color:#cabb9f;
  white-space:nowrap
}
.archive {
  width:min(1060px,calc(100% - 3rem));
  margin:2rem auto 5rem;
  padding:1.5rem;
  background:#e6dfccef;
  color:#211910;
  box-shadow:0 20px 80px #000a
}
.archive-bar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1.5rem
}
.archive-bar button {
  color:#fff3df
}
.archive-bar p {
  width:100%;
  margin:0;
  font-size:.9rem
}
.negative-sheet {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:15px 5px;
  list-style:none;
  padding:0;
  margin:0
}
.negative-sheet li {
  min-width:0;
  padding:12px 4px;
  background:linear-gradient(#522b19,#522b19) center/100% calc(100% - 12px) no-repeat,repeating-linear-gradient(90deg,#522b19 0 8px,transparent 8px 13px) top/100% 6px no-repeat,repeating-linear-gradient(90deg,#522b19 0 8px,transparent 8px 13px) bottom/100% 6px no-repeat
}
.negative-sheet button,.empty-frame {
  display:block;
  width:100%;
  aspect-ratio:3/2;
  padding:0;
  border:1px solid #aa7646;
  border-radius:0;
  min-height:0;
  overflow:hidden;
  background:#28170e
}
.negative-sheet img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:invert(1) sepia(.35) saturate(1.4) hue-rotate(330deg)
}
.negative-sheet button:hover {
  outline:2px solid #eccc81;
  outline-offset:1px
}
.frame-number {
  display:block;
  font:12px monospace;
  color:#eed0a0;
  margin-top:4px
}
.skip {
  position:fixed;
  right:2rem;
  bottom:4rem
}
.status {
  position:fixed;
  bottom:3rem;
  left:1.5rem;
  background:#171410e6;
  padding:.6rem
}
.status:empty {
  display:none
}
footer {
  position:absolute;
  bottom:0;
  width:100%;
  padding:1rem 2rem;
  font-size:.75rem;
  text-shadow:0 1px 5px #000
}
dialog {
  border:0;
  color:#f7f0df;
  background:#15120f
}
dialog::backdrop {
  background:#000c
}
#photo-viewer {
  margin:0;
  padding:1rem;
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:none
}
#photo-viewer[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:1rem
}
.photo-toolbar {
  display:flex;
  justify-content:flex-end;
  gap:.75rem
}
.photo-toolbar button:disabled {
  opacity:.3;
  cursor:default
}
.photo-stage {
  min-height:0;
  display:grid;
  place-items:center
}
#full-photo {
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain
}
body:has(dialog[open]) {
  overflow:hidden
}
#info {
  width:min(560px,calc(100% - 2rem));
  padding:2rem;
  line-height:1.6
}
#close-info {
  float:right
}
#info h2 {
  clear:both;
  padding-top:1.5rem
}
.orientation-gate {
  display:none
}
@media (orientation:portrait) and (max-width:900px) {
  .orientation-gate {
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:1.5rem;
    padding:2rem;
    color:#f7f0df;
    background:#15120f;
    text-align:center
  }
  .orientation-gate p {
    margin:0;
    font:1.25rem Georgia,serif;
    letter-spacing:.02em
  }
  .phone-turn {
    width:42px;
    height:70px;
    border:2px solid currentColor;
    border-radius:7px;
    transform:rotate(90deg)
  }
}
@media(max-width:700px) {
  header {
    padding:1rem;
    flex-wrap:wrap
  }
  nav button {
    padding:.6rem
  }
  .identity {
    font-size:.85rem
  }
  .identity span {
    font-size:.75rem
  }
  .office[data-state="desk"] .scene,.transition[src="/media/page.mp4"] {
    object-position:65% center
  }
  .desk-controls {
    left:65%;
    transform:translate(-65%,-50%)
  }
  .archive {
    width:calc(100% - 1rem);
    padding:.8rem;
    margin-top:1rem
  }
  .negative-sheet {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  footer {
    padding:.8rem 1rem
  }
  .skip {
    right:1rem
  }
}