:root { --ink: #0b0a09; --ivory: #efe9de; --dim: rgba(239,233,222,.6); --m: 44px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--ink); }
body { background: var(--ink); color: var(--ivory); font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
@media (max-width: 760px) { :root { --m: 20px; } }

/* header */
.top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px var(--m); mix-blend-mode: difference; color: #fff; }
.mark { font-weight: 600; font-size: 15px; letter-spacing: .5em; text-transform: uppercase; }
.count { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.count i { display: block; width: 70px; height: 1px; background: currentColor; opacity: .4; position: relative; overflow: hidden; }
.count i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--cp, 0)); }
.key { justify-self: end; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
@media (max-width: 760px) { .top { padding: 18px var(--m); } .mark { font-size: 13px; letter-spacing: .38em; } .count i { width: 34px; } .count { gap: 8px; font-size: 11px; } .key { font-size: 11px; letter-spacing: .16em; } }

/* the walk */
#walk { position: relative; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage { position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 0; }
.room { position: absolute; inset: 0; transform-origin: var(--ox) var(--oy); will-change: transform; backface-visibility: hidden; }
.room .ph { position: absolute; inset: 0; background-size: cover; background-position: var(--fx, 50%) 50%; }
.room .dk { position: absolute; inset: 0; background: #000; opacity: var(--dk, 0); }
.room svg.jamb { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.room.holed { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.grain { position: fixed; inset: -50%; z-index: 30; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-6%,-2%); } 80% { transform: translate(5%,4%); } 100% { transform: translate(0,0); } }

/* words that belong to each room */
.words { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.w { position: absolute; left: var(--m); right: var(--m); bottom: 8vh; opacity: 0; }
.w .k { font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; display: flex; gap: 14px; align-items: center; }
.w .k b { font-weight: 500; color: var(--ivory); letter-spacing: .2em; }
.w h2 { font-size: clamp(3rem, 9.5vw, 10.5rem); line-height: .86; letter-spacing: -.05em; font-weight: 600; text-shadow: 0 6px 60px rgba(0,0,0,.35); }
.w h2 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.w h2 .ln > span { display: block; transform: translateY(var(--ty, 105%)); }
.w p { margin-top: 22px; max-width: 440px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: rgba(239,233,222,.86); text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.w a { pointer-events: auto; display: inline-block; margin-top: 18px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; border-bottom: 1px solid var(--dim); padding-bottom: 4px; }
.w.right { text-align: right; }
.w.right p { margin-left: auto; }
.w.right .k { justify-content: flex-end; }
.w.center { text-align: center; bottom: auto; top: 50%; transform: translateY(-50%); }
.w.center h2 { font-size: clamp(3.4rem, 15vw, 17rem); letter-spacing: -.02em; }
.w.center p { margin-left: auto; margin-right: auto; }
.w.center .k { justify-content: center; }
.w.center.sm h2 { font-size: clamp(3rem, 10vw, 10.5rem); letter-spacing: -.05em; }
.w.first h2 { font-size: clamp(3rem, 12.5vw, 14rem); letter-spacing: .02em; padding-left: .02em; font-weight: 800; }
@media (max-width: 760px) { .w { bottom: 6vh; } .w.right { text-align: left; } .w.right p { margin-left: 0; } .w.right .k { justify-content: flex-start; } }

.hint { position: absolute; z-index: 6; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; padding-left: .4em; transition: opacity .5s; }
.hint i { display: block; width: 1px; height: 46px; background: linear-gradient(var(--ivory), transparent); animation: drop 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hint.gone { opacity: 0; }

/* the last door */
.last { position: relative; z-index: 10; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: #0b0a09; }
.last-bg { position: absolute; inset: 0; }
.last-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.42) saturate(.9); transform: scale(var(--ls, 1.15)); }
.last-in { position: relative; align-self: center; padding: 130px var(--m) 60px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; }
.last .kick { grid-column: 1 / -1; font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--dim); }
.last h2 { font-size: clamp(3rem, 8vw, 8.4rem); line-height: .88; letter-spacing: -.05em; font-weight: 600; }
.ask { display: grid; gap: 14px; max-width: 520px; width: 100%; justify-self: end; }
.ask .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ask input { width: 100%; background: rgba(11,10,9,.45); border: 1px solid rgba(239,233,222,.28); color: var(--ivory); font: inherit; font-size: 16px; padding: 17px 18px; border-radius: 0; outline: none; transition: border-color .3s, background .3s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ask input::placeholder { color: rgba(239,233,222,.5); }
.ask input:focus { border-color: var(--ivory); background: rgba(11,10,9,.7); }
.ask button { position: relative; overflow: hidden; margin-top: 6px; height: 62px; border: 1px solid var(--ivory); background: transparent; color: var(--ivory); font: inherit; font-size: 13px; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; cursor: pointer; }
.ask button::before { content: ""; position: absolute; inset: 0; background: var(--ivory); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.ask button span { position: relative; transition: color .3s; }
.ask button:hover::before, .ask button:focus-visible::before { transform: scaleY(1); }
.ask button:hover span, .ask button:focus-visible span { color: var(--ink); }
.ask .note { min-height: 1.4em; font-size: 14px; color: var(--dim); }
.ask.sent input, .ask.sent .row, .ask.sent button { display: none; }
.ask.sent .note { font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: var(--ivory); line-height: 1.2; letter-spacing: -.02em; }
.foot { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px var(--m); border-top: 1px solid rgba(239,233,222,.16); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.foot nav { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.foot nav a:hover { color: var(--ivory); }
@media (max-width: 860px) {
  .last-in { grid-template-columns: 1fr; gap: 34px; padding-top: 110px; }
  .ask { justify-self: stretch; }
  .foot { flex-direction: column; text-align: center; }
  .foot nav { gap: 16px; }
}
@media (max-width: 520px) { .ask .row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .grain, .hint i { animation: none; } }

/* no pull-to-refresh or rubber-band bounce at the top on phones */
html, body { overscroll-behavior-y: none; }