:root { color-scheme: dark; background: #100d09; color: #f9efde; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #100d09; }
#journey { --scene-height: 100vh; --scene-overlap: calc(var(--scene-height) * .7); --scene-step: calc(var(--scene-height) - var(--scene-overlap)); max-width: 560px; margin: auto; }
@supports (height: 100dvh) { #journey { --scene-height: 100dvh; } }
.stage { position: relative; background: #100d09; isolation: isolate; }
#scenes { display: flex; flex-direction: column; }
.scene { position: relative; height: var(--scene-height); flex: none; isolation: isolate; }
.scene + .scene { margin-top: calc(var(--scene-step) - var(--scene-height)); }
/* One pixel of constant bleed covers fractional-pixel snap rounding. */
.dish-media { position: absolute; inset: -1px 0; z-index: 0; }
.scene:not(:first-child) .dish-media { -webkit-mask-image: linear-gradient(to bottom, transparent var(--scene-overlap), #000 var(--scene-overlap)); mask-image: linear-gradient(to bottom, transparent var(--scene-overlap), #000 var(--scene-overlap)); }
.photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dish-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 38%, rgba(15,10,6,.08) 49%, rgba(15,10,6,.7) 75%, rgba(10,7,4,.96) 100%); }
.header { position: fixed; z-index: 100; top: 0; left: 50%; transform: translateX(-50%); width: min(100%, 560px); display: flex; align-items: center; justify-content: center; padding: calc(19px + env(safe-area-inset-top)) 20px 36px; background: linear-gradient(#100d09b8, #100d0938 65%, transparent); pointer-events: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.logo { width: clamp(145.6px, 47.04vw, 212.8px); max-width: 100%; height: auto; object-fit: contain; }
.info { position: absolute; z-index: 1; bottom: calc(20px + env(safe-area-inset-bottom)); left: 24px; right: 24px; text-align: center; will-change: opacity; }
/* The finite navigation buffer has no meaningful beginning/end scrollbar. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(43.2px, 12vw, 62.4px); line-height: 1.06; margin: 0; text-wrap: balance; }
.ornament { display: block; width: 96px; height: 1px; background: linear-gradient(90deg, transparent, #c8a368, transparent); margin: 18px auto; position: relative; }
.ornament::after { content: ''; width: 5px; height: 5px; position: absolute; left: calc(50% - 2.5px); top: -2px; transform: rotate(45deg); background: #d5b780; }
.description { margin: 0 auto; max-width: 340px; font-size: 14.56px; line-height: 1.7; color: #ede0ce; }
.tagline { font-family: Georgia, 'Times New Roman', serif; font-size: 15.4px; font-style: italic; line-height: 1.5; color: #d5b780; margin: 12px auto 0; max-width: 340px; }
.scroll-cue { margin-top: 25px; display: flex; flex-direction: column; align-items: center; gap: 9px; color: #cfbda1; font-size: 8px; text-transform: uppercase; letter-spacing: 1.7px; }
.scroll-cue svg { width: 12px; height: 24px; animation: drift 2.8s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(3px); opacity: .9; } }
@media (max-height: 650px) { .info { bottom: calc(12px + env(safe-area-inset-bottom)); } .ornament { margin: 12px auto; } .scroll-cue { margin-top: 14px; gap: 5px; } .tagline { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }