/* A quiet visual sequence. No article panels or interaction demos. */
.experience-page { --bar: 0px; }
.experience-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 5vw; color: var(--sky-ink); background: rgba(var(--sky-paper), .96); }
.experience-brand { font-size: 20px; font-weight: 650; letter-spacing: -.055em; }
.experience-header .day-clock { position: absolute; left: 50%; transform: translateX(-50%); }
.experience-header .clock-digits { font-size: 20px; font-weight: 400; }
.experience-header .clock-phase { font-size: 9px; }
.experience-header button { border: 0; border-bottom: 1px solid var(--sky-line); border-radius: 0; background: transparent; font-size: 10px; padding: 10px 0; }
.experience-main { overflow: clip; }
.experience-scene { position: relative; min-height: 100svh; padding: 150px 12vw 100px; display: flex; align-items: center; }
.experience-copy { position: relative; isolation: isolate; }
.experience-copy::before { content: ''; position: absolute; inset: -100px -100px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse, rgba(var(--sky-paper), .94) 20%, rgba(var(--sky-paper), .75) 40%, transparent 72%); }
.experience-kicker { font: 9px ui-monospace, monospace; letter-spacing: .19em; margin: 0 0 38px; }
.experience-scene h1, .experience-scene h2 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 500; letter-spacing: .035em; line-height: 1.6; margin: 0; }
.experience-scene h1 { font-size: clamp(40px, 5.8vw, 78px); }
.experience-scene h2 { font-size: clamp(32px, 4.4vw, 58px); }
.experience-sub { font-size: 13px; line-height: 2; margin-top: 32px; letter-spacing: .06em; }
.experience-scroll { position: absolute; bottom: 42px; left: 12vw; display: flex; gap: 25px; align-items: center; font: 9px ui-monospace, monospace; letter-spacing: .15em; }
.experience-scroll span { font-size: 20px; }
.experience-moment { min-height: 105svh; padding-block: 130px; align-items: center; gap: 7vw; }
.experience-photo { width: 54%; flex-shrink: 0; margin: 0; }
.experience-photo .desk-crop { aspect-ratio: 1.12; }
.experience-caption { position: relative; isolation: isolate; }
.experience-caption::before { content: ''; position: absolute; inset: -70px; z-index: -1; background: radial-gradient(ellipse, rgba(var(--sky-paper), .98) 25%, transparent 72%); }
.experience-caption p { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.8; margin: 0 0 22px; }
.experience-caption span { font-size: 11px; }
.experience-evening { min-height: 105svh; align-items: flex-start; padding-top: 22svh; }
.experience-ending { min-height: 105svh; padding-top: 180px; }
.experience-download { display: inline-flex; align-items: center; gap: 50px; padding: 17px 0; margin-top: 18px; border-bottom: 1px solid currentColor; font-size: 13px; }
.experience-facts { font-size: 10px; margin-top: 20px; color: var(--sky-muted); }
.experience-footer { padding: 40px 5vw; background: rgb(var(--sky-paper)); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; font-size: 11px; }
.experience-footer nav { display: flex; gap: 25px; }
.experience-footer small { font-size: 9px; color: var(--sky-muted); }
@media(max-width: 700px) {
 .experience-header { padding: 15px 22px; gap: 12px; }
 .experience-brand { font-size: 17px; }
 .experience-header .day-clock { position: static; transform: none; margin: 0; gap: 6px; }
 .experience-header .clock-digits { font-size: 18px; }
 .experience-header .clock-phase { display: none; }
 .experience-header button { font-size: 9px; }
 .experience-scene { padding: 120px 8vw 90px; }
 .experience-copy::before { inset: -60px -30px; }
 .experience-scene h1 { font-size: clamp(34px, 9vw, 52px); }
 .experience-scene h2 { font-size: clamp(27px, 7.5vw, 42px); }
 .experience-sub { font-size: 12px; }
 .experience-scroll { left: 8vw; bottom: 38px; font-size: 8px; }
 .experience-moment { flex-direction: column; align-items: flex-start; justify-content: center; gap: 45px; }
 .experience-photo { width: 100%; }
 .experience-photo .desk-crop { aspect-ratio: 1.4; }
 .experience-caption { padding-left: 8vw; }
 .experience-caption p { font-size: 28px; }
 .experience-caption::before { inset: -35px; }
 .experience-evening { padding-top: 23svh; }
 .experience-footer { align-items: flex-start; flex-direction: column; padding: 35px 8vw; }
}
@media(prefers-reduced-motion: reduce) { .experience-scene { min-height: 80svh; } }