@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  --ink: #07141d;
  --blue: #17394b;
  --cream: #eadfca;
  --gold: #b9783e;
  --rust: #8c2f24;
  --pointer-x: 0;
  --pointer-y: 0;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { margin: 0; min-height: 100vh; font-family: Inter, sans-serif; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .12; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.eyebrow { margin: 0; font-size: .68rem; letter-spacing: .31em; text-transform: uppercase; }

.threshold-page { overflow: hidden; color: var(--cream); background: radial-gradient(circle at 53% 42%, #244c5c 0, #102b39 40%, #07141d 78%); }
.threshold-page::before { content: ''; position: fixed; inset: 0; background: linear-gradient(100deg, transparent 47%, rgba(236, 205, 141, .09) 50%, transparent 53%); animation: breathe 11s ease-in-out infinite; }
.site-mark { position: fixed; z-index: 8; top: clamp(1.2rem, 3.2vw, 2.7rem); left: clamp(1.2rem, 3.2vw, 3.2rem); font-size: .72rem; line-height: 1.25; letter-spacing: .38em; }
.site-mark a { display: flex; flex-direction: column; }
.site-mark span:last-child { color: #c9884b; }
.threshold { position: relative; z-index: 5; min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 4rem 1.5rem 2rem; }
.threshold > .eyebrow { position: absolute; top: 7vh; color: rgba(234, 223, 202, .6); }
.portal { --size: min(57vh, 39vw, 590px); position: relative; width: var(--size); height: var(--size); min-width: 255px; min-height: 255px; padding: 0; border: 1px solid rgba(226, 198, 147, .65); background: #122a36; color: inherit; cursor: pointer; transform: translate(calc(var(--pointer-x) * 5px), calc(var(--pointer-y) * 4px)); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease; box-shadow: 0 35px 85px rgba(0,0,0,.45), 0 0 0 12px rgba(237,219,182,.025); }
.portal::before, .portal::after { content: ''; position: absolute; z-index: 2; pointer-events: none; }
.portal::before { inset: -14px; border: 1px solid rgba(231, 206, 155, .15); }
.portal::after { inset: 12%; border-radius: 50%; border: 1px solid rgba(220, 171, 95, 0); transition: border-color .5s, transform .9s; }
.portal:hover, .portal:focus-visible { outline: none; transform: scale(1.015) translate(calc(var(--pointer-x) * 5px), calc(var(--pointer-y) * 4px)); box-shadow: 0 45px 110px rgba(0,0,0,.6), 0 0 45px rgba(180,116,60,.16); }
.portal:hover::after, .portal:focus-visible::after { border-color: rgba(220,171,95,.65); transform: rotate(12deg) scale(.82, .35); }
.portal img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); }
.portal-orbit { position: absolute; z-index: 3; top: 11%; right: 7%; width: 17%; aspect-ratio: 1; border: 1px solid #d79c45; border-radius: 50%; animation: orbit 9s linear infinite; }
.portal-orbit::after { content: ''; position: absolute; width: 8px; aspect-ratio: 1; border-radius: 50%; top: calc(50% - 4px); left: -4px; background: #d79c45; box-shadow: 0 0 12px #e9c175; }
.portal-caption { position: absolute; z-index: 4; bottom: 0; left: 0; translate: 0 50%; display: flex; align-items: center; gap: .8rem; padding: .75rem 1.1rem; background: var(--rust); font-size: .65rem; text-transform: uppercase; letter-spacing: .25em; }
.portal-caption i { width: 21px; height: 1px; background: currentColor; }
.threshold-note { position: absolute; right: clamp(1.2rem, 4vw, 4rem); bottom: clamp(1.5rem, 4vw, 3.2rem); margin: 0; font: italic clamp(1rem, 1.5vw, 1.35rem)/1.2 'Cormorant Garamond', serif; color: rgba(234,223,202,.7); }
.threshold-stone-track { position: fixed; z-index: 4; left: 0; right: 0; bottom: clamp(2.5rem,7vh,5.5rem); height: clamp(68px,8vw,108px); pointer-events: none; animation: threshold-stone-crossing 34s linear infinite alternate; }
.threshold-stone { position: absolute; left: -9rem; bottom: 0; width: clamp(68px,8vw,108px); aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(0 18px 18px rgba(0,0,0,.48)) drop-shadow(0 -5px 12px rgba(218,157,64,.23)); }
.threshold-stone img { display: block; width: 100%; height: 100%; object-fit: contain; animation: threshold-stone-turn 34s linear infinite alternate; }
.threshold-stone::after { content: ''; position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle at 35% 24%,rgba(255,222,132,.46),rgba(202,137,46,.13) 24%,transparent 50%); mix-blend-mode: screen; }

.puzzle-field { position: fixed; inset: 0; overflow: hidden; opacity: .42; }
.puzzle-fragment { position: absolute; width: clamp(110px, 18vw, 290px); height: clamp(100px, 19vh, 250px); background-image: linear-gradient(rgba(8,26,37,.35), rgba(8,26,37,.35)), url('/assets/photomaton.jpg'); background-size: 460% auto; border: 1px solid rgba(230,216,187,.13); filter: saturate(.55) sepia(.14) hue-rotate(155deg) contrast(1.18); animation: drift 15s ease-in-out infinite alternate; }
.fragment-1 { left:-3%;top:10%;background-position:8% 12%; } .fragment-2 { left:8%;top:32%;background-position:31% 29%;animation-delay:-6s; }
.fragment-3 { left:1%;bottom:-2%;background-position:53% 70%;animation-delay:-2s; } .fragment-4 { left:20%;top:-4%;background-position:70% 10%;animation-delay:-8s; }
.fragment-5 { left:21%;bottom:8%;background-position:20% 85%;animation-delay:-4s; } .fragment-6 { left:38%;top:5%;background-position:91% 15%;animation-delay:-10s; }
.fragment-7 { left:39%;bottom:-7%;background-position:43% 92%;animation-delay:-2s; } .fragment-8 { right:31%;top:20%;background-position:60% 45%;animation-delay:-7s; }
.fragment-9 { right:27%;bottom:4%;background-position:85% 71%;animation-delay:-1s; } .fragment-10 { right:11%;top:-3%;background-position:12% 8%;animation-delay:-5s; }
.fragment-11 { right:-2%;top:21%;background-position:35% 32%;animation-delay:-9s; } .fragment-12 { right:4%;bottom:5%;background-position:66% 87%;animation-delay:-3s; }
.fragment-13 { left:11%;top:3%;width:8vw;height:32vh;background-position:75% 14%; } .fragment-14 { left:30%;top:37%;width:9vw;height:42vh;background-position:48% 60%;animation-delay:-11s; }
.fragment-15 { right:34%;top:-2%;width:7vw;height:31vh;background-position:90% 5%; } .fragment-16 { right:19%;top:45%;width:8vw;height:38vh;background-position:7% 70%;animation-delay:-8s; }
.fragment-17 { left:3%;top:55%;width:34vw;height:7vh;background-position:15% 91%; } .fragment-18 { right:0;top:72%;width:31vw;height:8vh;background-position:80% 80%;animation-delay:-5s; }
.stair { position: fixed; z-index: 2; width: 22vw; height: 22vw; opacity: .22; background: repeating-linear-gradient(135deg, transparent 0 16px, #d2ad73 17px 18px); clip-path: polygon(0 100%, 0 82%, 18% 82%, 18% 64%, 36% 64%, 36% 46%, 54% 46%, 54% 28%, 72% 28%, 72% 10%, 100% 10%, 100% 100%); }
.stair-a { left: -2vw; bottom: 6vh; animation: stairs 14s linear infinite; }.stair-b { right: -3vw; top: 7vh; rotate: 180deg; animation: stairs 18s linear infinite reverse; }

.login-dialog { width: min(560px, calc(100vw - 2rem)); padding: 0; border: 1px solid rgba(209,170,106,.5); color: var(--cream); background: rgba(7,20,29,.94); box-shadow: 0 40px 140px #000; backdrop-filter: blur(18px); }
.login-dialog::backdrop { background: rgba(4,12,17,.76); backdrop-filter: blur(9px); }
.login-form { position: relative; padding: clamp(2rem, 7vw, 4.5rem); }
.login-form h1 { margin: .8rem 0 2.7rem; font: 400 clamp(2rem, 5vw, 3.6rem)/.92 'Cormorant Garamond', serif; }
.login-form label { display: block; margin-bottom: .5rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.password-line { display: flex; border-bottom: 1px solid #b97a42; }
.password-line input { min-width: 0; flex: 1; border: 0; outline: 0; padding: .85rem 0; color: white; background: transparent; font-size: 1.1rem; letter-spacing: .1em; }
.password-line button { border: 0; padding: 0 0 0 1rem; color: #d8b681; background: transparent; cursor: pointer; }
.dialog-close { position: absolute; top: 1rem; right: 1.2rem; border: 0; color: rgba(255,255,255,.65); background: none; font: 300 1.8rem/1 Inter, sans-serif; cursor: pointer; }
.form-error { margin: 1rem 0 0; color: #e6a18b; font-size: .85rem; }

.inner-page { overflow-x: hidden; color: #202628; background: #e5dac4; }
.inner-page::before { content: ''; position: fixed; inset: 0; background: linear-gradient(90deg, rgba(112,72,42,.08) 1px, transparent 1px), linear-gradient(rgba(112,72,42,.07) 1px, transparent 1px); background-size: 8vw 8vw; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.inner-header { position: fixed; z-index: 10; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: clamp(1.1rem,3vw,2.4rem) clamp(1.2rem,4vw,4rem); mix-blend-mode: multiply; }
.inner-brand { font-size: .72rem; letter-spacing: .34em; }.inner-brand span { color: #925026; }
.exit-link { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }.exit-link span { margin-left: .5rem; font-size: 1rem; }
.inner-stage { position: relative; min-height: 100vh; padding: clamp(6rem, 10vw, 9rem) 4vw 5vw; }
.artwork-shell { position: relative; width: min(1120px, 92vw); margin: 0 auto; }
.featured-work { position: relative; z-index: 2; width: min(70vw, 780px, 48vh); margin: 0 auto; }
.featured-art { --entry-art-image:url('/protected-image.php?id=schmelzende-kamera'); position: relative; isolation: isolate; }
.featured-art picture { display:block; }
.featured-art::before { content: ''; position: absolute; inset: -8px; z-index: -1; border: 1px solid rgba(81,65,48,.24); }
.featured-work img { display: block; width: 100%; height: auto; object-fit: contain; box-shadow: 0 30px 75px rgba(48,38,29,.23); filter: saturate(.86) contrast(.97); }
.featured-work figcaption { display: grid; grid-template-columns: 1fr; gap: 1.3rem; align-items: end; margin-top: 1.8rem; }
.featured-work h1 { margin: .45rem 0 0; font: 400 clamp(1.8rem,3.2vw,3rem)/.98 'Cormorant Garamond',serif; letter-spacing: -.04em; }
.work-note { margin: 0; text-align: left; font: italic 1.15rem/1.25 'Cormorant Garamond',serif; color: #665e52; }
/* All fragments share the image's coordinate system and straddle its edges. */
.memory-panels { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.memory-panels i { position: absolute; display: block; border: 1px solid rgba(233,218,184,.65); background-image: var(--entry-art-image); background-repeat: no-repeat; filter: saturate(.86) contrast(.97); box-shadow: 0 8px 20px rgba(34,31,25,.16); animation: memoryFloat 9s ease-in-out infinite alternate; }
.memory-panels i:nth-child(1){left:-3.5%;top:12%;width:17%;height:22%;background-size:588.235% auto;background-position:0 14%;}
.memory-panels i:nth-child(2){right:-4%;top:29%;width:16%;height:19%;background-size:625% auto;background-position:100% 36%;animation-delay:-4s;}
.memory-panels i:nth-child(3){left:-3%;top:68%;width:19%;height:19%;background-size:526.316% auto;background-position:22% 84%;animation-delay:-7s;}
.memory-panels i:nth-child(4){right:-3.5%;top:73%;width:16%;height:18%;background-size:625% auto;background-position:100% 89%;animation-delay:-2s;}
.memory-panels i:nth-child(5){left:69%;top:-2%;width:19%;height:13%;background-size:526.316% auto;background-position:84% 0;animation-delay:-5s;}
/* The golden orbit belongs to the camera lens, not the surrounding page. */
.endless-orbit { position: absolute; z-index: 4; left:34.8%; top:31%; width:17.6%; aspect-ratio:1; border:1px solid rgba(221,184,113,.45); border-radius:50%; pointer-events:none; animation:orbit 12s linear infinite; }
.endless-orbit span { position:absolute; top:46%; left:-4%; width:8%; aspect-ratio:1; border-radius:50%; background:#ddbd7e; box-shadow:0 0 8px rgba(225,180,104,.55); }

/* Match the picture source, its fragments and the lens position at the same breakpoint. */
@media (min-width: 801px) {
  .featured-work { width:min(80vw,1120px,108vh); }
  .featured-art { --entry-art-image:url('/protected-image.php?id=schmelzende-kamera-quer'); }
  .endless-orbit { left:39.3%; top:36.4%; width:9.8%; }
}

@keyframes drift { to { transform: translate3d(calc(var(--pointer-x) * 8px), calc(14px + var(--pointer-y) * 7px), 0) rotate(.45deg); } }
@keyframes breathe { 50% { opacity: .35; transform: translateX(3%); } }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes stairs { 50% { transform: translate(18px,-18px); } }
@keyframes memoryFloat { from { transform:translateY(-2%) rotate(-.25deg); } to { transform:translateY(2%) rotate(.25deg); } }
@keyframes threshold-stone-crossing { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 9rem)); } }
@keyframes threshold-stone-turn { from { rotate: 0deg; } to { rotate: 720deg; } }

@media (max-width: 700px) {
  .threshold > .eyebrow { top: 15vh; }
  .portal { --size: min(68vw, 390px); }
  .threshold-note { left: 1.2rem; right: auto; }
  .puzzle-fragment { opacity: .7; }
  .stair { width: 42vw; height: 42vw; }
  .featured-work { width: min(78vw, 43.333vh); }
  .featured-work figcaption { grid-template-columns: 1fr; }
  .work-note { text-align: left; }
  .threshold-stone-track { animation-duration: 26s; }
  .threshold-stone { left: -5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .threshold-stone-track { transform: translateX(55vw); }
}

/* The passage between artwork and text */
.room-choices { width: min(1120px, 92vw); margin: clamp(5rem, 12vw, 10rem) auto 2rem; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(2rem,5vw,6rem); }
.next-room { width: 100%; margin: 0; padding: 2rem 0; display: grid; grid-template-columns: 4rem 1fr; align-items: end; gap: 1rem; border-top: 1px solid rgba(56,48,39,.3); border-bottom: 1px solid rgba(56,48,39,.3); transition: color .25s ease,border-color .25s ease; }
.next-room span { font: italic 1.1rem 'Cormorant Garamond',serif; color: #9b6036; }
.next-room strong { font: 400 clamp(1.7rem,4vw,3.4rem)/1 'Cormorant Garamond',serif; }
.next-room em { grid-column: 2; font: 400 .7rem Inter,sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.next-room:hover,.next-room:focus-visible { color: #925026; border-color: #925026; }
.gallery-entry strong::after { content: ' →'; color: #9b6036; }

/* Reading room */
.reading-page { min-height: 100%; color: #25282a; background: #e8deca; }
.reading-page::before { content:''; position:fixed; inset:0; pointer-events:none; background: radial-gradient(circle at 72% 18%,rgba(208,157,83,.22),transparent 30%),linear-gradient(90deg,rgba(89,69,48,.055) 1px,transparent 1px); background-size:auto,12.5vw 100%; }
.reading-header { position:fixed; z-index:30; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:1.5rem clamp(1.2rem,4vw,4rem); color:#293139; mix-blend-mode:multiply; }
.reading-actions { display:flex; align-items:center; gap:clamp(1rem,3vw,3rem); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; }
.reading-actions a b { margin-left:.5rem; font-size:1rem; }
.reading-toggle { display:flex; align-items:center; gap:.6rem; border:0; color:inherit; background:transparent; font-size:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.reading-toggle i { position:relative; width:16px; height:16px; border:1px solid currentColor; border-radius:50%; }
.reading-toggle i::after { content:''; position:absolute; inset:4px; border-radius:50%; background:currentColor; }
.reading-toggle[aria-pressed="false"] i::after { background:transparent; }
.reading-progress { position:fixed; z-index:31; inset:0 0 auto; height:2px; background:rgba(72,53,37,.12); }
.reading-progress i { display:block; width:100%; height:100%; background:#9b6036; transform:scaleX(0); transform-origin:left; }
.reading-flow { position:relative; overflow:hidden; }
.reading-intro { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:7rem 1.5rem; }
.reading-intro h1 { margin:.8rem 0 1.4rem; max-width:1100px; font:400 clamp(4rem,11vw,10.5rem)/.75 'Cormorant Garamond',serif; letter-spacing:-.06em; }
.reading-subtitle { margin:0; font:italic clamp(1.25rem,2.4vw,2rem)/1.15 'Cormorant Garamond',serif; color:#646159; }
.scroll-cue { position:absolute; bottom:2rem; font-size:.62rem; letter-spacing:.23em; text-transform:uppercase; }.scroll-cue i { margin-left:.7rem; font-style:normal; }
.poem { position:relative; z-index:2; width:min(540px,72vw); margin:0 auto; padding:25vh 0; }
.poem > p { position:relative; z-index:4; margin:0 0 clamp(4rem,10vh,8rem); font:400 clamp(1.5rem,3vw,2.25rem)/1.36 'Cormorant Garamond',serif; text-wrap:balance; }
.poem > p:nth-of-type(3n) { transform:translateX(7%); }.poem > p:nth-of-type(4n) { transform:translateX(-8%); }
.poem-pause { height:32vh; display:grid; place-items:center; }.poem-pause i { width:1px; height:80px; background:linear-gradient(transparent,#92613a,transparent); }
.drift-image { position:relative; z-index:1; width:min(48vw,560px); margin:6vh 0 -18vh; opacity:0; filter:blur(10px); transform:translate3d(0,18vh,0) scale(.9); transition:opacity 2.4s ease,filter 2.8s ease,transform 4s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.drift-image.is-visible { opacity:.8; filter:blur(0); transform:translate3d(0,0,0) scale(1); }
.drift-image.drift-left { margin-left:calc(-1 * min(38vw,520px)); }.drift-image.drift-right { margin-left:calc(100% - 2vw); }
.drift-image img { display:block; width:100%; max-height:72vh; object-fit:cover; box-shadow:0 35px 90px rgba(53,42,31,.2); }
.drift-image figcaption { margin-top:.7rem; font-size:.61rem; letter-spacing:.2em; text-transform:uppercase; }
.reading-outro { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:7rem 1.5rem; }
.reading-outro h2 { margin:1rem 0 3rem; font:400 clamp(3.7rem,9vw,8rem)/.8 'Cormorant Garamond',serif; letter-spacing:-.04em; }
.reading-outro a { padding:1rem 0; border-bottom:1px solid #8c542e; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }.reading-outro a span { margin-left:1rem; }

/* Exhibition corridor */
.gallery-page { overflow:hidden; color:#e6ddc8; background:#0e181e; }
.gallery-page::before { content:''; position:fixed; inset:0; background:linear-gradient(to bottom,#1a2b35 0,#101a20 56%,#080d10 56.2%,#111a20 100%); }
.gallery-page::after { content:''; position:fixed; z-index:0; left:50%; bottom:0; width:180vw; height:44vh; transform:translateX(-50%); clip-path:polygon(39% 0,61% 0,100% 100%,0 100%); background:repeating-linear-gradient(90deg,rgba(217,197,161,.08) 0 1px,transparent 1px 7vw),linear-gradient(#26323a,#10171b); }
.gallery-header { position:fixed; z-index:30; inset:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:1.45rem clamp(1.2rem,3vw,3rem); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; }
.gallery-brand span { color:#c8874e; }.gallery-header > p { margin:0; }.gallery-header > p i { display:inline-block; width:5px; height:5px; margin:0 .7rem .1rem 0; border-radius:50%; background:#c8874e; box-shadow:0 0 12px #c8874e; }.gallery-nav { justify-self:end; display:flex; gap:1.6rem; }.gallery-nav a { white-space:nowrap; }
.gallery-corridor { position:relative; z-index:2; display:flex; align-items:center; gap:18vw; width:100vw; height:100vh; overflow-x:auto; overflow-y:hidden; padding:0 14vw; scroll-snap-type:x proximity; scrollbar-width:none; perspective:1400px; perspective-origin:50% 48%; transform-style:preserve-3d; }
.gallery-corridor.is-looping { scroll-snap-type:none; overflow-anchor:none; }
.gallery-corridor.is-looping .gallery-end { display:none; }
.gallery-corridor.is-looping .gallery-axis { width:var(--gallery-track-width,1200vw); background:rgba(224,208,178,.15); }
.gallery-vault { position:fixed; z-index:1; inset:3.8rem 0 44vh; overflow:hidden; opacity:.36; pointer-events:none; }
.gallery-vault::before,.gallery-vault::after,.gallery-vault i { content:''; position:absolute; left:50%; top:50%; width:140vw; height:1px; transform-origin:0 50%; background:linear-gradient(90deg,rgba(210,190,157,.16),rgba(210,190,157,0)); }
.gallery-vault::before { rotate:17deg; }.gallery-vault::after { rotate:163deg; }
.gallery-vault i:nth-child(1) { rotate:8deg; }.gallery-vault i:nth-child(2) { rotate:172deg; }.gallery-vault i:nth-child(3) { left:0; top:100%; width:100%; transform:none; background:linear-gradient(90deg,transparent,rgba(210,190,157,.14),transparent); }
.rolling-orbit { position:fixed; z-index:1; left:0; right:0; bottom:7vh; height:clamp(68px,8vw,104px); pointer-events:none; animation:stone-crossing 34s linear infinite alternate; }
.rolling-stone { position:absolute; left:-7rem; bottom:0; width:clamp(68px,8vw,104px); aspect-ratio:1; overflow:hidden; border-radius:50%; box-shadow:0 15px 28px rgba(0,0,0,.52),0 -7px 24px rgba(226,173,86,.3); animation:stone-turn 34s linear infinite alternate; }
.rolling-stone img { position:absolute; width:374%; max-width:none; height:auto; left:-156%; top:-198%; filter:saturate(.65) contrast(1.08) brightness(.78); }
.rolling-stone span { position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 38% 24%,rgba(255,226,145,.75) 0,rgba(214,157,65,.25) 22%,transparent 48%),linear-gradient(145deg,rgba(255,204,105,.22),transparent 42%,rgba(0,0,0,.4)); box-shadow:inset -14px -18px 22px rgba(0,0,0,.42),inset 7px 7px 15px rgba(255,218,135,.22); }
@keyframes stone-crossing { from { transform:translateX(0); } to { transform:translateX(calc(100vw + 7rem)); } }
@keyframes stone-turn { from { rotate:0deg; } to { rotate:720deg; } }
.gallery-corridor::-webkit-scrollbar { display:none; }.gallery-axis { position:absolute; left:0; bottom:14vh; width:1200vw; height:1px; background:linear-gradient(90deg,transparent,rgba(224,208,178,.15) 3%,rgba(224,208,178,.15) 97%,transparent); }
.gallery-welcome,.gallery-end { flex:0 0 58vw; scroll-snap-align:center; }.gallery-welcome h1,.gallery-end h2 { margin:1rem 0 2rem; font:400 clamp(4rem,8vw,8.5rem)/.76 'Cormorant Garamond',serif; letter-spacing:-.055em; }.gallery-welcome > p:not(.eyebrow),.gallery-end > p:not(.eyebrow) { color:#a8a294; font:italic 1.2rem/1.3 'Cormorant Garamond',serif; }.gallery-welcome > span,.gallery-end a { display:inline-block; margin-top:2.5rem; font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; }.gallery-welcome > span i { margin-left:1rem; font-style:normal; }
.gallery-work { position:relative; flex:0 0 auto; width:max-content; max-width:min(82vw,1120px); scroll-snap-align:center; transform:translateY(var(--gallery-lift,0)) scale(var(--gallery-scale,1)); transform-origin:center; transition:none; }.gallery-work.wall-right { --gallery-lift:3vh; }.gallery-work.wall-left { --gallery-lift:-3vh; }
.gallery-work.is-panorama { max-width:min(88vw,1280px); }
.work-frame { position:relative; display:block; width:max-content; max-width:100%; padding:10px; border:1px solid #7d684d; background:#151718; cursor:zoom-in; box-shadow:0 28px 65px rgba(0,0,0,.45),inset 0 0 0 5px #27221c; transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .8s; }
.wall-left .work-frame,.wall-right .work-frame { transform:none; }.work-frame:hover,.work-frame:focus-visible { outline:1px solid #d3aa70; transform:scale(1.025); box-shadow:0 35px 85px rgba(0,0,0,.6),0 0 40px rgba(196,143,78,.12); }
.work-frame img { display:block; width:auto; height:auto; max-width:100%; max-height:min(62vh,660px); object-fit:contain; }.frame-glass { position:absolute; inset:10px; background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 22%,transparent 70%,rgba(255,255,255,.04)); pointer-events:none; }
.is-panorama .work-frame img { max-height:min(56vh,620px); }
.wall-label { margin:1.2rem 0 0; display:grid; grid-template-columns:3rem 1fr; column-gap:.8rem; }.wall-label b { grid-row:1/3; color:#c8874e; font-size:.65rem; letter-spacing:.15em; }.wall-label h2 { margin:0; font:400 1.35rem/1 'Cormorant Garamond',serif; }.wall-label p { margin:.35rem 0 0; color:#8f928f; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.gallery-end { padding-right:15vw; }.gallery-end a { border-bottom:1px solid #a97242; padding-bottom:.8rem; }
.lightbox { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:3vh 5vw; border:0; color:#eee5d3; background:rgba(5,10,13,.96); }.lightbox::backdrop { background:#050a0d; }.lightbox figure { height:94vh; margin:0; display:grid; grid-template-columns:1fr minmax(160px,22vw); gap:3vw; align-items:center; }.lightbox figure img { box-sizing:border-box; justify-self:end; max-width:68vw; max-height:88vh; padding:10px; border:1px solid #7d684d; object-fit:contain; background:#151718; box-shadow:0 28px 65px rgba(0,0,0,.65),inset 0 0 0 5px #27221c; }.lightbox figcaption { align-self:end; padding-bottom:5vh; }.lightbox figcaption span { color:#c8874e; font-size:.65rem; letter-spacing:.2em; }.lightbox figcaption h2 { margin:1rem 0 .5rem; font:400 clamp(2rem,4vw,4rem)/.9 'Cormorant Garamond',serif; }.lightbox figcaption p { color:#92918b; font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; }.lightbox-close,.lightbox-nav { position:fixed; z-index:4; border:0; color:#eee5d3; background:transparent; cursor:pointer; }.lightbox-close { top:1.5rem; right:2rem; font:300 2rem Inter,sans-serif; }.lightbox-nav { top:50%; font-size:1.8rem; }.lightbox-nav.prev { left:2rem; }.lightbox-nav.next { right:2rem; }

@media (max-width:800px) {
  .room-choices { grid-template-columns:1fr; gap:1.5rem; }.next-room { grid-template-columns:2rem 1fr; }.next-room em { grid-column:2; }
  .reading-header { align-items:flex-start; }.reading-actions { flex-direction:column; align-items:flex-end; gap:.7rem; }.reading-toggle span { display:none; }
  .reading-intro h1 { font-size:18vw; }.poem { width:68vw; }.poem > p { font-size:1.65rem; }.poem > p:nth-of-type(n) { transform:none; }
  .drift-image { width:64vw; margin-bottom:-9vh; }.drift-image.drift-left { margin-left:-18vw; }.drift-image.drift-right { margin-left:24vw; }
  .gallery-page { overflow:auto; }.gallery-page::after,.gallery-vault { display:none; }.gallery-header { grid-template-columns:1fr auto; background:rgba(14,24,30,.92); }.gallery-header > p { display:none; }
  .gallery-corridor { display:block; width:auto; height:auto; overflow:visible; padding:8rem 9vw 15vh; }.gallery-axis { display:none; }
  .rolling-orbit { bottom:2.5rem; opacity:.8; animation-duration:28s; }
  .gallery-welcome,.gallery-end { min-height:80vh; display:flex; flex-direction:column; justify-content:center; }.gallery-welcome h1,.gallery-end h2 { font-size:18vw; }
  .gallery-work { width:max-content; max-width:82vw; margin:0 auto 26vh; transform:none!important; }.gallery-work:nth-of-type(even) { margin-left:0; }.gallery-work:nth-of-type(odd) { margin-right:0; }
  .is-looping .gallery-work.wall-left { margin-left:auto; margin-right:0; }.is-looping .gallery-work.wall-right { margin-left:0; margin-right:auto; }
  .gallery-work.is-panorama,.is-looping .gallery-work.is-panorama { width:max-content; max-width:88vw; margin-left:auto; margin-right:auto; }
  .work-frame img { width:auto; height:auto; max-width:100%; max-height:65vh; object-fit:contain; }.is-panorama .work-frame img { max-height:48vh; }.wall-left .work-frame,.wall-right .work-frame { transform:none; }
  .lightbox { padding:7vh 1rem 2rem; }.lightbox figure { height:88vh; display:flex; flex-direction:column; justify-content:center; gap:1rem; }.lightbox figure img { max-width:88vw; max-height:67vh; }.lightbox figcaption { width:88vw; align-self:center; padding:0; }.lightbox-nav { bottom:1.5rem; top:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .rolling-orbit,.rolling-stone { animation:none; }
  .rolling-orbit { transform:translateX(58vw); }
}

/* Compact text projection */
.reading-page:has(.projection-reader) { overflow:hidden; }
.projection-reader { position:relative; width:100vw; height:100vh; height:100dvh; min-height:100svh; overflow:hidden; }
.projection-reader::before { content:''; position:absolute; inset:8vh 7vw; border:1px solid rgba(97,74,49,.12); pointer-events:none; }
.projection-reader::after { content:''; position:absolute; z-index:0; inset:9vh 12vw; background:url('/protected-image.php?id=zeitspuren-cutout') center 42%/contain no-repeat; opacity:.18; filter:grayscale(.58) sepia(.18) contrast(.82); mix-blend-mode:multiply; pointer-events:none; }
.projection-slide { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(6rem,10vh,9rem) max(8vw,1.5rem) 6rem; opacity:0; visibility:hidden; transform:translate3d(0,28px,0) scale(.985); filter:blur(8px); transition:opacity 1.7s ease,transform 2.2s cubic-bezier(.2,.8,.2,1),filter 2s ease,visibility 0s linear 2s; }
.projection-slide.is-active { opacity:1; visibility:visible; transform:none; filter:none; transition-delay:0s; }
.projection-intro h1 { margin:.8rem 0 1.4rem; max-width:1100px; text-align:center; font:400 clamp(4rem,11vw,10.5rem)/.75 'Cormorant Garamond',serif; letter-spacing:-.06em; }
.projection-intro { text-align:center; }.projection-cue { margin-top:4rem; font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:#8e653f; }
.text-projection { inset:8vh 7vw; display:block; overflow:hidden; padding:3.5rem 5vw 7rem; }
.projection-number { position:absolute; top:1.4rem; left:2rem; color:#a16b3f; font-size:.65rem; letter-spacing:.24em; }
.projection-copy { width:min(1100px,88%); height:100%; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(2.5rem,6vw,6rem); overflow:hidden; padding:0 1rem 1.5rem 0; }
.projection-column { min-width:0; height:100%; overflow-y:auto; padding-right:clamp(1rem,2vw,2rem); scrollbar-width:thin; scrollbar-color:rgba(140,84,46,.35) transparent; }
.projection-column + .projection-column { padding-left:clamp(1.5rem,3vw,3rem); border-left:1px solid rgba(90,66,42,.13); }
.projection-copy p { margin:0 0 1.1rem; font:400 clamp(1.05rem,1.25vw,1.35rem)/1.28 'Cormorant Garamond',serif; text-wrap:pretty; }
.projection-offset .projection-copy { transform:none; }
.projection-outro { text-align:center; }.projection-outro h2 { margin:1rem 0 3rem; font:400 clamp(3.7rem,9vw,8rem)/.8 'Cormorant Garamond',serif; letter-spacing:-.04em; }.projection-outro a { padding:1rem 0;border-bottom:1px solid #8c542e;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; }.projection-outro a span { margin-left:1rem; }
.projection-controls { position:absolute; z-index:32; left:50%; bottom:calc(8vh + 1rem); translate:-50% 0; display:flex; align-items:center; gap:1.2rem; padding:.55rem .8rem; border:1px solid rgba(79,61,44,.12); border-radius:3rem; color:#665e52; background:rgba(232,222,202,.9); box-shadow:0 8px 30px rgba(72,53,37,.08); backdrop-filter:blur(12px); }
.projection-controls button { width:38px; height:38px; border:1px solid rgba(79,61,44,.28); border-radius:50%; color:inherit; background:rgba(232,222,202,.7); cursor:pointer; transition:background .3s,color .3s; }.projection-controls button:hover,.projection-controls button:focus-visible { color:#fff; background:#8c542e; outline:none; }
.projection-controls span { min-width:5rem; text-align:center; font-size:.63rem; letter-spacing:.18em; }.projection-controls b,.projection-controls i { font:inherit; }

@media (max-width:800px) {
  .projection-reader::after { inset:9rem 1.5rem 7rem; background-size:contain; opacity:.15; }
  .projection-reader::before { inset:7rem 1rem 5rem; }
  .projection-slide { padding:6.5rem 2rem 5.5rem; }
  .projection-intro h1 { font-size:18vw; }
  .text-projection { inset:7rem 1rem calc(5rem + env(safe-area-inset-bottom)); padding:3.5rem 1rem calc(9rem + env(safe-area-inset-bottom)); }
  .projection-number { position:absolute; top:1.25rem; left:1rem; }
  .projection-copy { width:100%; height:100%; margin:0; display:block; overflow-y:auto; padding:0 .7rem 1.5rem 0; }
  .projection-column { height:auto; overflow:visible; padding:0; }
  .projection-column + .projection-column { padding:0; border:0; }
  .projection-copy p { font-size:1.2rem; line-height:1.28; margin-bottom:1rem; }
  .projection-offset .projection-copy { transform:none; }
  .projection-controls { bottom:calc(5rem + max(.75rem, env(safe-area-inset-bottom))); }
}