/* v01 Gallery Walk: the corridor (home) */

html.walk-snap { scroll-snap-type: y proximity; }

.walk-page { background: #dedbd4; }

.walk {
  position: relative;
  height: 1100vh; /* replaced by the script with an exact length */
  background: linear-gradient(180deg, #d9d6cf, #cfcbc3);
}

.stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #d9d6cf;
  perspective: 860px;
  perspective-origin: 50% 50%;
  isolation: isolate;
}

.world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}

.world .pl { pointer-events: none; }
.world .off { visibility: hidden; }

/* Walls, floor, ceiling */
.wall {
  background:
    linear-gradient(180deg,
      #e6e4df 0%,
      #f3f2ee 16%,
      #f8f7f4 52%,
      #f1f0ec 88%,
      #dad7d0 95.6%,
      #a9a59d 96%,
      #e3e0da 96.4%,
      #d5d2cb 100%);
}
.wall.wash {
  background:
    radial-gradient(ellipse 36% 40% at 50% 46%, rgba(255, 251, 242, 1) 0%, rgba(255, 251, 242, 0.55) 45%, rgba(255, 251, 242, 0) 72%),
    linear-gradient(180deg,
      #e6e4df 0%,
      #f3f2ee 16%,
      #f8f7f4 52%,
      #f1f0ec 88%,
      #dad7d0 95.6%,
      #a9a59d 96%,
      #e3e0da 96.4%,
      #d5d2cb 100%);
}
.wall.unlit {
  background:
    linear-gradient(180deg, #cfccc5 0%, #dcd9d3 30%, #d7d4cd 88%, #b9b5ad 96%, #c6c2bb 100%);
}

.floor {
  background:
    linear-gradient(90deg,
      rgba(204, 200, 192, 0.8) 0%,
      rgba(220, 217, 210, 0.82) 16%,
      rgba(236, 234, 229, 0.85) 38%,
      rgba(250, 249, 246, 0.88) 50%,
      rgba(236, 234, 229, 0.85) 62%,
      rgba(220, 217, 210, 0.82) 84%,
      rgba(204, 200, 192, 0.8) 100%);
  box-shadow: inset 0 3px 0 rgba(120, 114, 104, 0.12);
}
.floor.unlit {
  background: linear-gradient(90deg, rgba(186, 182, 174, 0.96), rgba(204, 200, 193, 0.92) 50%, rgba(186, 182, 174, 0.96));
}

.ceil {
  background:
    linear-gradient(90deg,
      #e3e1dc 0%,
      #eeede9 26%,
      #fbfaf7 40%,
      #ffffff 46%,
      #ffffff 54%,
      #fbfaf7 60%,
      #eeede9 74%,
      #e3e1dc 100%);
}
.ceil.spot-l, .ceil.spot-r {
  background:
    radial-gradient(circle at var(--sx) 40%, #3a3834 0 10px, rgba(58, 56, 52, 0) 11px),
    radial-gradient(circle at var(--sx) 60%, #3a3834 0 10px, rgba(58, 56, 52, 0) 11px),
    radial-gradient(ellipse 12% 34% at var(--sx) 50%, rgba(255, 249, 232, 0.95), rgba(255, 249, 232, 0) 72%),
    linear-gradient(90deg, #e3e1dc 0%, #eeede9 26%, #fbfaf7 40%, #ffffff 46%, #ffffff 54%, #fbfaf7 60%, #eeede9 74%, #e3e1dc 100%);
}
.ceil.spot-l { --sx: 9%; }
.ceil.spot-r { --sx: 91%; }
.ceil.unlit { background: linear-gradient(90deg, #cbc8c1, #d6d3cd 50%, #cbc8c1); }

.endcap {
  background:
    radial-gradient(ellipse 60% 55% at 50% 58%, #d4d1ca 0%, #c4c0b8 60%, #b4b0a8 100%);
}

/* Title banner hung from the ceiling */
.banner {
  display: grid;
  place-content: center;
  gap: 18px;
  background: #151513;
  color: #f5f4f0;
  text-align: center;
  box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.35);
}
.banner b {
  display: block;
  font-weight: 800;
  font-stretch: 122%;
  font-size: 86px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.banner small {
  display: block;
  font: 500 21px/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #bdb9b0;
}
.wire { background: #8d8a84; }

/* Hung work */
.piece {
  display: block;
  color: var(--ink);
  text-decoration: none;
  pointer-events: auto !important;
  cursor: pointer;
  outline: none;
}
.piece .frame {
  position: absolute;
  inset: 0;
  border: 16px solid #fdfdfb;
  background: #fbfbf8;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 34px 46px -22px rgba(40, 34, 26, 0.5),
    0 4px 8px rgba(40, 34, 26, 0.16);
  transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), box-shadow 0.45s;
}
.piece .mat {
  position: absolute;
  inset: 0;
  padding: 38px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 6px 10px rgba(0, 0, 0, 0.07);
}
.piece .mat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.piece.fr-black .frame { border-color: #1b1a18; }
.piece.fr-black .mat { background: #f3f1ec; }
.piece.fr-light .frame {
  border: 9px solid #c3c5c7;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 0 60px rgba(255, 246, 225, 0.9),
    0 34px 46px -22px rgba(40, 34, 26, 0.45);
}
.piece.fr-light .mat { padding: 0; box-shadow: none; }

.piece:hover .frame,
.piece:focus-visible .frame {
  transform: translateY(-10px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 60px 60px -26px rgba(40, 34, 26, 0.5),
    0 6px 12px rgba(40, 34, 26, 0.16);
}
.piece:focus-visible .frame,
.piece:focus-visible .vinyl,
.piece:focus-visible .pst-row { outline: 10px solid var(--dot); outline-offset: 22px; }

/* Wall label next to each work */
.wl {
  position: absolute;
  left: calc(100% + 44px);
  top: 56%;
  width: 176px;
  padding: 14px 16px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 10px -6px rgba(0, 0, 0, 0.2);
  display: grid;
  gap: 6px;
}
.wl.near-left { left: auto; right: calc(100% + 44px); }
.wl b { font: 500 13px/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.wl strong { font-weight: 800; font-size: 20px; line-height: 1.1; font-stretch: 105%; }
.wl em { font-style: normal; font-size: 14px; color: var(--muted); }
.wl .enter {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.wl .enter::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--dot);
  transform: scale(0.5);
  transition: transform 0.3s;
}
.piece:hover .wl .enter::before,
.piece:focus-visible .wl .enter::before { transform: scale(1); }

/* Posters in a row */
.pst-row {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 28px;
  justify-content: center;
}
.pst {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 8px solid #1b1a18;
  background: #1b1a18;
  box-shadow: 0 30px 40px -22px rgba(40, 34, 26, 0.5), 0 3px 6px rgba(40, 34, 26, 0.18);
  transition: transform 0.45s cubic-bezier(.2, .8, .2, 1);
}
.pst img { display: block; width: 100%; height: 100%; object-fit: cover; }
.piece:hover .pst:nth-child(odd) { transform: translateY(-8px) rotate(-0.6deg); }
.piece:hover .pst:nth-child(even) { transform: translateY(-4px) rotate(0.6deg); }

/* Vinyl lettering straight on the wall */
.vinyl {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  color: #171614;
}
.vinyl .vt {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 118px;
  line-height: 0.88;
  letter-spacing: -0.015em;
}
.vinyl .vs {
  margin-top: 26px;
  font: 500 22px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #57544e;
  max-width: 34ch;
}
.vinyl.flip .vt, .vinyl.flip .vs { transform: scaleX(-1); transform-origin: 50% 50%; }
.vinyl.flip { text-align: right; }
.vinyl.q {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 30px;
}
.vinyl.q .qm {
  font-weight: 900;
  font-stretch: 62%;
  font-size: 560px;
  line-height: 0.74;
  color: var(--dot);
}
.vinyl.q .vt { font-size: 92px; }

.stk {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  text-align: center;
  background: #fffdf6;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18), 0 10px 18px -10px rgba(0, 0, 0, 0.35);
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.25;
  color: #1d1c1a;
  border-radius: 3px;
}
.stk:nth-child(2n) { background: #f7f0de; }
.stk::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.08) 50%, #e9e5da 60%);
  border-bottom-right-radius: 3px;
}

/* The open slot */
.empty-frame {
  position: absolute;
  inset: 0;
  border: 16px solid #fdfdfb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 30px -20px rgba(40, 34, 26, 0.35);
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
}
.hook {
  position: absolute;
  top: -70px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #8d8a84;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.ladder {
  background:
    linear-gradient(90deg, #a77c4e 0, #b98f60 7px, #a77c4e 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) calc(100% - 15px), #a77c4e calc(100% - 15px), #b98f60 calc(100% - 8px), #a77c4e 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 76px, #c39a69 76px, #b08656 90px);
  box-shadow: 0 0 0 1px rgba(90, 64, 36, 0.25);
}

/* Floor reflections */
.refl { opacity: 0.6; pointer-events: none !important; }
.refl * { transition: none !important; }

/* Overlay */
.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 75% at 50% 46%, rgba(0, 0, 0, 0) 60%, rgba(30, 26, 20, 0.16) 100%);
  z-index: 2;
}

/* Phones: no grain texture over the scene */
/* Phones: surfaces built at a quarter size (walk.js SHRINK), so fixed sizes are quartered too. */
.lite .floor.shrunk { box-shadow: inset 0 0.75px 0 rgba(120, 114, 104, 0.12); }
.lite .ceil.shrunk.spot-l, .lite .ceil.shrunk.spot-r {
  background:
    radial-gradient(circle at var(--sx) 40%, #3a3834 0 2.5px, rgba(58, 56, 52, 0) 2.75px),
    radial-gradient(circle at var(--sx) 60%, #3a3834 0 2.5px, rgba(58, 56, 52, 0) 2.75px),
    radial-gradient(ellipse 12% 34% at var(--sx) 50%, rgba(255, 249, 232, 0.95), rgba(255, 249, 232, 0) 72%),
    linear-gradient(90deg, #e3e1dc 0%, #eeede9 26%, #fbfaf7 40%, #ffffff 46%, #ffffff 54%, #fbfaf7 60%, #eeede9 74%, #e3e1dc 100%);
}
.lite .veil { background: radial-gradient(ellipse 80% 75% at 50% 46%, rgba(0, 0, 0, 0) 60%, rgba(30, 26, 20, 0.16) 100%); }

/* Floor plan */
.plan {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: min(50vh, 420px);
  z-index: 4;
}
.plan-strip {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 20px;
  margin-left: -10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 1px var(--line);
}
.plan-tick {
  position: absolute;
  width: 24px; height: 24px;
  margin-top: -12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.plan-tick::before {
  content: "";
  position: absolute;
  left: 7px; top: 7px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.25s, background 0.25s;
}
.plan-tick.l { left: -26px; }
.plan-tick.r { right: -26px; }
.plan-tick.end::before { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.plan-tick.on::before { background: var(--dot); transform: scale(1.3); }
.plan-tick:hover::before { transform: scale(1.4); }
.plan-you {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0; height: 0;
  will-change: transform;
}
.plan-you::after {
  content: "";
  position: absolute;
  left: -5px; top: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.plan-cone {
  position: absolute;
  left: -26px; top: -44px;
  width: 52px; height: 44px;
  transform-origin: 50% 100%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(192, 53, 43, 0.45), rgba(192, 53, 43, 0) 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  will-change: transform;
}

/* The museum label plate at the bottom */
.plate {
  position: absolute;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(640px, calc(100% - 32px));
  display: flex;
  gap: 6px;
  z-index: 5;
}
.step {
  flex: 0 0 52px;
  min-height: 68px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
}
.step svg { width: 22px; height: 22px; }
.step:hover { background: #fff; border-color: var(--ink); }
.step:disabled { opacity: 0.35; cursor: default; border-color: var(--line); }

.tomb {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 10px 10px 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  transition: opacity 0.35s, transform 0.35s;
}
.tomb.dim { opacity: 0.7; }
.tomb-no {
  flex: none;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.tomb-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tomb-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(15px, 2.3vw, 19px);
  line-height: 1.12;
}
.tomb-kind {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tomb-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tomb-go svg { width: 14px; height: 14px; }
.tomb-go:hover { background: var(--dot); }
.tomb-cue {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.tomb-cue i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot);
  animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: translateY(-3px); opacity: 1; } 50% { transform: translateY(4px); opacity: 0.4; } }

.snaps { position: absolute; inset: 0; pointer-events: none; }
.snap-mark { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; }

/* Room list */
.rooms {
  position: relative;
  background: var(--paper);
  padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(56px, 8vw, 96px);
  scroll-snap-align: start;
  scroll-margin-top: 0;
}
.rooms-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.rooms-head h2 {
  margin: 0;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(56px, 12vw, 168px);
  line-height: 0.82;
  letter-spacing: -0.03em;
}
.rooms-count {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--muted);
  padding-bottom: 8px;
}
.rooms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}
.rooms-list li { border-bottom: 1px solid var(--line); }
.room-row {
  display: grid;
  grid-template-columns: 56px 96px minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  position: relative;
}
.room-row > * { min-width: 0; }
a.room-row:hover .rr-title, a.room-row:focus-visible .rr-title { color: var(--dot); }
a.room-row:hover .rr-thumb img { transform: scale(1.06); }
.rr-no { font: 500 13px/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.rr-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ebe9e3;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px var(--line);
}
.rr-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
.rr-glyph {
  font-weight: 900;
  font-stretch: 70%;
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
}
.rr-glyph.red { color: var(--dot); }
.rr-glyph.flip { display: inline-block; transform: scaleX(-1); }
.rr-glyph.hand { font: 400 13px/1.2 var(--hand); text-align: center; padding: 6px; background: #fffdf6; transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); }
.rr-text { display: grid; gap: 4px; }
.rr-title {
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.rr-tag { font-size: 15px; color: var(--muted); line-height: 1.35; }
.rr-kind {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.room-row.open .rr-thumb { background: transparent; box-shadow: none; border: 2px dotted #a29e96; }
.room-row.open .rr-title { color: #a29e96; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--ink);
  color: #d9d6cf;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foot-name { color: #fff; }

@media (max-width: 899px), (max-height: 560px) {
  .plan { display: none; }
}

@media (max-width: 640px) {
  .room-row { grid-template-columns: 30px 76px minmax(0, 1fr); }
  .rr-kind { grid-column: 3; text-align: left; margin-top: -4px; }
  .rr-tag { font-size: 14px; }
  .tomb { gap: 10px; padding-left: 12px; }
  .tomb-go { padding: 0 12px; }
  .step { flex-basis: 44px; }
}

/* Reduced motion: one still view of the corridor */
.still .walk { height: auto !important; }
.still .stage { position: relative; }
.still .snaps { display: none; }

/* Fallback when the 3D scene cannot be built: the corridor gives way to the room list */
.flat .walk { display: none; }
.flat .rooms { padding-top: clamp(96px, 12vw, 150px); }