/* One camera, one study space. The photographs supply the lighting, not drawn props. */
body.experience-page { background: rgb(var(--sky-paper)); }
.study-room { position: fixed; inset: 0 0 0 34%; z-index: -1; overflow: hidden; background: #655a49; }
.study-room img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.study-room-night { opacity: var(--room-night, 0); }
.room-frame { position: absolute; left: var(--frame-left, 0px); top: var(--frame-top, 0px); width: var(--frame-width, 100%); height: var(--frame-height, 100%); }
.room-lamp-off { opacity: var(--lamp-off, 0); }
.room-windows-west { opacity: var(--windows-west, 0); mask-image: radial-gradient(ellipse 4% 5% at 50% 32%, #000 55%, transparent), radial-gradient(ellipse 4% 5% at 52% 40%, #000 55%, transparent); }
.room-windows-center { opacity: var(--windows-center, 0); mask-image: radial-gradient(ellipse 4% 5% at 59% 45%, #000 55%, transparent), radial-gradient(ellipse 4% 5% at 63% 35%, #000 55%, transparent), radial-gradient(ellipse 4% 5% at 68% 48%, #000 55%, transparent); }
.room-windows-east { opacity: var(--windows-east, 0); mask-image: radial-gradient(ellipse 4% 8% at 91% 30%, #000 55%, transparent), radial-gradient(ellipse 4% 4% at 71% 31%, #000 55%, transparent); }
.room-stars { opacity: var(--stars, 0); mask-image: linear-gradient(#000 22%, transparent 29%); }
.room-deep-night { opacity: var(--deep-night, 0); }
.room-blackout { position: fixed; inset: 0; background: #000; opacity: var(--ending-dark, 0); z-index: 10; pointer-events: none; }
.experience-header { opacity: var(--header-opacity, 1); visibility: var(--header-visibility, visible); }
.experience-copy:not(.experience-finale), .experience-caption { opacity: var(--story-opacity, 1); }
.experience-main { min-height: 560svh; }
.experience-ending { min-height: 245svh; }
.experience-ending .experience-finale { position: fixed; inset: 0; width: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 15; color: #f4f1eb; opacity: var(--finale, 0); visibility: var(--finale-visibility, hidden); padding: 24px; }
.experience-finale h2 { font-size: clamp(48px, 8vw, 100px); line-height: 1.1; letter-spacing: -.06em; font-weight: 600; }
.finale-sub { font-size: 13px; margin: 24px 0 28px; letter-spacing: .06em; }
.experience-finale .experience-download { color: #151515; background: #f4f1eb; border: 0; border-radius: 3px; padding: 17px 25px; font-size: 13px; gap: 24px; }
.experience-finale .experience-facts { color: #aaa; }
.experience-footer { z-index: 20; }
.experience-header { background: transparent; padding: 25px 4vw; }
.experience-header .day-clock { position: fixed; left: 4vw; top: 95px; right: auto; transform: none; padding: 0; background: transparent; font-variant-numeric: tabular-nums; }
.experience-header .clock-digits { font-family: ui-monospace, monospace; font-size: 20px; letter-spacing: .03em; }
.experience-header .clock-period { font: 10px -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .08em; margin-left: 5px; opacity: .7; }
.experience-header .clock-phase { display: none; }
.experience-scene { padding: 150px 4vw 100px; align-items: center; }
.experience-copy, .experience-caption { width: 28vw; }
.experience-copy::before, .experience-caption::before { display: none; }
.experience-scene h1, .experience-scene h2, .experience-caption p { font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; font-weight: 500; font-size: clamp(25px, 2.5vw, 40px); letter-spacing: -.035em; line-height: 1.7; }
.experience-sub { font-size: 11px; letter-spacing: 0; max-width: 22em; }
.experience-kicker { margin-bottom: 25px; }
.experience-moment { flex-direction: row; }
.experience-caption { padding: 0; }
.experience-caption span { display: block; font-size: 11px; line-height: 1.9; }
.experience-evening { align-items: center; }
.experience-footer { position: relative; z-index: 20; }
.experience-ending .experience-finale h2 { font-size: clamp(48px, 8vw, 100px); line-height: 1.1; letter-spacing: -.06em; font-weight: 600; }
@media(min-width:701px) {
 .room-ready .experience-copy:not(.experience-finale), .room-ready .experience-caption { position: fixed; top: 36vh; left: 4vw; width: 26vw; z-index: 5; visibility: var(--copy-visibility, hidden); }
}
@media(max-width: 700px) {
 .study-room { inset: 34svh 0 0; }
 .study-room img { object-position: 44% center; }
 .experience-header { padding: 17px 7vw; background: rgb(var(--sky-paper)); }
 .experience-header .day-clock { position: static; padding: 0; right: auto; }
 .experience-scene { min-height: 110svh; padding: 100px 7vw 0; align-items: flex-start; }
 .experience-copy, .experience-caption { width: 100%; }
 .room-ready .experience-copy, .room-ready .experience-caption { position: fixed; top: 100px; left: 7vw; width: 86vw; z-index: 5; visibility: var(--copy-visibility, hidden); }
 .experience-scene h1, .experience-scene h2, .experience-caption p { font-size: clamp(23px, 6.3vw, 31px); line-height: 1.55; }
 .experience-kicker { display: none; }
 .experience-sub { margin-top: 13px; font-size: 10px; }
 .experience-moment { justify-content: flex-start; }
 .experience-caption p { margin-bottom: 12px; }
 .experience-caption span { font-size: 10px; }
 .experience-ending { min-height: 115svh; }
 .experience-download { margin-top: 6px; padding: 9px 0; font-size: 11px; }
 .experience-facts { margin-top: 10px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.experience-page { transition: none; } }
/* The finale is centered after the image has completely faded, also on phones. */
@media(max-width:700px) {
 .experience-ending { min-height: 245svh; }
 .room-ready .experience-ending .experience-finale { inset: 0; width: auto; z-index: 15; visibility: var(--finale-visibility, hidden); }
 .experience-finale h2 { font-size: clamp(46px, 12vw, 64px); }
 .experience-footer nav { flex-wrap: wrap; }
}