:root {
  --ink: #f2eee6;
  --muted: #9b978f;
  --bg: #0d0c0a;
  --wall-near: #24211d;
  --wall-far: #38332c;
  --frame-mat: #0c0b09;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body.lightbox-open { overflow: hidden; }

.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective: 700px;
  perspective-origin: 50% 50%;
  background: #090806;
}

.corridor { position: absolute; inset: 0; overflow: hidden; }
.left-wall, .right-wall, .floor, .ceiling { position: absolute; }

.left-wall {
  inset: 0;
  background: linear-gradient(90deg, #15130f 0%, var(--wall-near) 54%, var(--wall-far) 100%);
  clip-path: polygon(0 0, 46.2% 35.4%, 46.2% 64.6%, 0 100%);
}
.right-wall {
  inset: 0;
  background: linear-gradient(270deg, #15130f 0%, var(--wall-near) 54%, var(--wall-far) 100%);
  clip-path: polygon(53.8% 35.4%, 100% 0, 100% 100%, 53.8% 64.6%);
}

.ceiling {
  left: 0; right: 0; top: 0; height: 51%;
  background: linear-gradient(#11100d 0%, #211e19 78%, #302c25 100%);
  clip-path: polygon(0 0, 100% 0, 53.8% 70%, 46.2% 70%);
}

.floor {
  left: 0; right: 0; bottom: 0; height: 56%;
  overflow: hidden;

  /* Single, slightly lighter floor colour. */
  background: #352418;

  clip-path: polygon(46.2% 18%, 53.8% 18%, 100% 100%, 0 100%);
}

/* Horizontal floor joints. JavaScript positions these with a perspective
   projection: tightly packed at the far end, progressively wider apart near
   the viewer. */
.floor-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.105);
  box-shadow: 0 1px 0 rgba(0,0,0,.14);
  pointer-events: none;
  will-change: top, opacity;
}


/* .far-mist {
  left: 46.2%;
  top: 31%;
  width: 7.6%;
  height: 29.2%;
  transform: none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.22) 28%,
      rgba(255,255,255,.32) 50%,
      rgba(255,255,255,.20) 72%,
      rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.06);
  filter: blur(15px);
  opacity: .72;
  box-shadow:
    0 0 34px 12px rgba(255,255,255,.06),
    0 0 90px 32px rgba(255,255,255,.05);
}
.far-mist::after {
  content: "";
  position: absolute;
  inset: 16% 10%;
  background: rgba(255,255,255,.18);
  filter: blur(18px);
} */

.art-layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.artwork {
  --caption-opacity: 0;
  position: absolute;
  left: 50%; top: 50%;
  margin: 0;
  width: min(58vw, 70vh, 900px);
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transform-origin: center center;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}
.artwork.is-focus { pointer-events: auto; cursor: zoom-in; will-change: auto; }

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: clamp(9px, .9vw, 15px);
  background: linear-gradient(135deg, #5a4936, #1a140e 48%, #756047 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 26px 58px rgba(0,0,0,.56),
    inset 0 0 0 3px rgba(0,0,0,.52),
    inset 0 0 0 8px rgba(180,145,98,.10);
}
.frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  box-shadow: 18px 8px 30px rgba(0,0,0,.34);
  z-index: -1;
  pointer-events: none;
}
.frame img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--frame-mat);
  image-rendering: auto;
}

figcaption {
  position: absolute;
  left: 50%; top: calc(100% + 18px);
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  opacity: var(--caption-opacity);
  transition: opacity .12s linear;
  text-shadow: 0 2px 18px #000;
}
figcaption span {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .01em;
}
figcaption small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.topbar {
  position: fixed;
  z-index: 20;
  top: 0; left: 0; right: 0;
  height: 68px;
  padding: 0 clamp(20px, 3vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  mix-blend-mode: difference;
  color: white;
  pointer-events: none;
}
.brand {
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  pointer-events: auto;
}
.topbar-right { display: flex; gap: 28px; font-size: 10px; letter-spacing: .16em; }

main { position: relative; z-index: 2; }
.intro, .outro {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 100px 7vw;
}
.intro { min-height: 115vh; align-items: center; justify-items: start; }
.intro-copy { max-width: 700px; margin-left: max(0px, 4vw); }
.eyebrow { font-size: 10px; letter-spacing: .24em; color: #b4afa6; margin: 0 0 18px; }
h1, h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.045em;
}
h1 { font-size: clamp(58px, 9vw, 132px); }
h2 { font-size: clamp(45px, 7vw, 96px); }
.intro-text { max-width: 470px; margin: 28px 0 0; color: #b9b4aa; line-height: 1.7; font-size: 14px; }
.scroll-cue { display: flex; align-items: center; gap: 15px; margin-top: 38px; font-size: 9px; letter-spacing: .19em; color: #d4cec4; }
.scroll-cue i { display: block; width: 54px; height: 1px; background: currentColor; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }

.walk { position: relative; }
.art-step { height: 150vh; position: relative; pointer-events: none; }
.art-step > span { position: absolute; left: 50%; top: 50%; opacity: 0; }
.outro { min-height: 115vh; text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.46)); }
.outro > div { max-width: 750px; }
.outro p:not(.eyebrow) { max-width: 540px; margin: 28px auto 0; color: #aaa59c; line-height: 1.7; }
.outro a { display: inline-block; margin-top: 30px; color: var(--ink); text-decoration: none; border-bottom: 1px solid #555; padding-bottom: 5px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

.progress { position: absolute; left: 28px; top: 50%; width: 1px; height: 25vh; transform: translateY(-50%); background: rgba(255,255,255,.12); }
.progress span { display: block; width: 100%; height: 0; background: rgba(255,255,255,.72); }

.lightbox {
  border: 0;
  padding: 0;
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  background: rgba(5,5,5,.94);
  color: white;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0,0,0,.86); }
.lightbox img { max-width: min(92vw, 1200px); max-height: min(88vh, 1500px); object-fit: contain; image-rendering: auto; box-shadow: 0 30px 120px #000; }
.close { position: fixed; right: 28px; top: 22px; border: 0; background: transparent; color: white; font-size: 34px; cursor: pointer; }
.lightbox-meta { position: fixed; left: 28px; bottom: 24px; display: flex; flex-direction: column; gap: 3px; }
.lightbox-meta strong { font-family: Georgia, serif; font-weight: 400; font-size: 22px; }
.lightbox-meta span { font-size: 10px; letter-spacing: .14em; color: #aaa; text-transform: uppercase; }

@media (max-width: 760px) {
  .topbar-right span:first-child { display: none; }
  .artwork { width: min(76vw, 62vh, 560px); }
  .intro-copy { margin-left: 0; }
  .intro-text { max-width: 84vw; }
  .progress { left: 14px; }
  figcaption { top: calc(100% + 12px); }
  .art-step { height: 145vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body.reduced-motion .stage { display: none; }
body.reduced-motion { background: #10100f; }
body.reduced-motion .intro { min-height: 100vh; }
body.reduced-motion .walk { display: grid; gap: 12vh; padding: 10vh 7vw 20vh; }
body.reduced-motion .art-step { height: auto; min-height: 70vh; border: 1px solid #333; background: #171614; }

.site-credit {
  margin-top: 56px !important;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #77736c !important;
}