:root { --paper: #f0eee7; --muted: #a09e94; --accent: #d6ed97; --edge: clamp(22px, 4vw, 64px); --ease: cubic-bezier(.22, 1, .36, 1); font-family: Arial, Helvetica, sans-serif; color: var(--paper); background: #111110; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100svh; min-height: 420px; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 9px; }
.dot { color: var(--accent); }
.masthead { position: fixed; left: var(--edge); right: var(--edge); z-index: 5; display: flex; align-items: center; }
.masthead { top: max(25px, env(safe-area-inset-top)); }
.wordmark { color: var(--paper); text-decoration: none; font-size: 30px; font-weight: 800; letter-spacing: -3px; }
.entrance { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: var(--edge); transition: opacity .45s ease, transform .7s var(--ease); }
.eyebrow { font-size: 10px; letter-spacing: .3em; color: var(--accent); }
h1 { margin: 22px 0 0; font-weight: 500; width: 100%; text-align: center; }
.open-button { display: inline-flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 60px); background: none; border: 0; padding: 10px 4px 20px; cursor: pointer; font-size: clamp(42px, 8.5vw, 124px); line-height: 1.1; letter-spacing: -.075em; }
.open-arrow { font-size: .75em; color: var(--accent); transition: transform .45s var(--ease); }
.open-button:hover .open-arrow { transform: translate(9px, -9px); }
.entrance-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.opened .entrance { opacity: 0; transform: translateY(-25px); pointer-events: none; }
.experience { position: absolute; inset: 0; overflow: hidden; }
.backdrop { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: clamp(90px, 22vw, 360px); font-weight: 800; line-height: .79; letter-spacing: -.095em; color: #24251e; user-select: none; opacity: .8; }
.backdrop .dot { color: #303728; }
.stage { position: absolute; inset: 86px var(--edge) 85px; display: flex; justify-content: center; align-items: center; gap: clamp(18px, 5vw, 90px); perspective: 1100px; }
.memory { --tilt: -4deg; --lift: -12px; position: relative; margin: 0; width: min(38vw, 370px); max-height: 100%; display: flex; flex-direction: column; opacity: 1; transform: translateY(var(--lift)) rotate(var(--tilt)); animation: arrive .9s var(--ease) both; }
.memory:nth-child(2) { --tilt: 5deg; --lift: 24px; animation-delay: .13s; }
.stage.solo .memory { width: min(65vw, 430px); --tilt: -3deg; --lift: 0px; }
.media-frame { display: flex; min-height: 0; overflow: hidden; border: 5px solid var(--paper); background: #20201e; box-shadow: 0 14px 35px #0005; }
.memory img, .memory video { display: block; width: 100%; max-height: calc(100svh - 250px); object-fit: contain; }
.memory figcaption { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: #c9c8bf; padding: 13px 5px 0; display: flex; justify-content: space-between; }
.memory figcaption span:last-child { color: var(--accent); }
.stage.departing .memory { animation: leave .38s ease both; }
.paused .memory { animation-play-state: paused !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes arrive { from { opacity: 0; transform: translateY(85px) rotate(calc(var(--tilt) * 2)) scale(.82); } to { opacity: 1; transform: translateY(var(--lift)) rotate(var(--tilt)) scale(1); } }
@keyframes leave { to { opacity: 0; transform: translateY(-45px) rotate(calc(var(--tilt) * .5)) scale(.94); } }
@media (max-width: 600px) {
  .stage { inset: 95px 20px 105px; gap: 14px; }
  .memory { width: 44vw; --tilt: -5deg; --lift: -36px; }
  .memory:nth-child(2) { --tilt: 5deg; --lift: 45px; }
  .stage.solo .memory { width: min(76vw, 340px); }
  .media-frame { border-width: 3px; }
  .memory img, .memory video { max-height: calc(100svh - 280px); }
  .memory figcaption { font-size: 8px; letter-spacing: .08em; padding-top: 10px; }
  .backdrop { font-size: 24vw; }
}
@media (max-height: 550px) and (min-width: 601px) {
  .stage { inset-block: 65px; }
  .memory img, .memory video { max-height: calc(100svh - 170px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .entrance, .open-arrow { transition: none; }
  .memory { animation: fade-in .25s ease both; }
  .stage.departing .memory { animation: fade-out .2s ease both; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-out { to { opacity: 0; } }
}