@font-face{font-family:'Mrs Saint Delafield';src:url('/demo/christmas/assets/fonts/MrsSaintDelafield-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#f4efe5;--ink:#293529;--muted:#626b5d;--opening:min(100vw,1100px);--u:min(72vw,38vh,420px);--u:min(72vw,38svh,420px);--field:calc(var(--u)*4.15);--letter:clamp(320px,92vw,700px);--ending:min(100vw,1100px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink)}body{font-family:'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px}button{font:inherit}img{display:block}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.review-note{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));z-index:3;padding:7px 10px;margin:0;background:rgba(244,239,229,.92);color:#34432e;font-size:10px;letter-spacing:.04em;pointer-events:none}.skip-letter{position:fixed;top:60px;left:18px;z-index:5;background:var(--paper);padding:12px;transform:translateX(-200%)}.skip-letter:focus{transform:none}
.journey{width:100%;height:100vh;height:100svh;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#849077 var(--paper)}.journey:focus-visible{outline:2px solid #a7b697;outline-offset:-4px}.world{position:relative;isolation:isolate;display:flex;width:max-content;height:100%;min-height:0;background:var(--paper)}.atmosphere{position:absolute;top:0;height:100%;object-fit:cover;pointer-events:none;z-index:-1;filter:brightness(.64)}.atmosphere-opening{left:0;width:calc(var(--opening) + var(--u)*.6);object-position:25% center;mask-image:linear-gradient(to right,#000 72%,transparent);-webkit-mask-image:linear-gradient(to right,#000 72%,transparent)}.atmosphere-ending{right:0;width:calc(var(--ending) + 18px);object-position:25% center;mask-image:linear-gradient(to right,transparent,#000 10%);-webkit-mask-image:linear-gradient(to right,transparent,#000 10%)}.opening,.letter-scene,.ending{height:100%;position:relative;flex-shrink:0;display:flex;align-items:center}.opening{width:var(--opening);padding:60px clamp(32px,7vw,120px);color:#fffaf0}.opening-copy{padding-bottom:5vh}.eyebrow{text-transform:uppercase;font-size:10px;line-height:1.6;letter-spacing:.18em;font-weight:400;margin:0 0 24px}.opening h1,.ending h2{font:400 clamp(54px,8vw,108px)/.98 Georgia,'Times New Roman',serif;letter-spacing:-.045em;margin:0}.dedication{font:400 clamp(17px,2vw,23px)/1.5 Georgia,serif;margin:28px 0 0}.unfold,.again{position:absolute;bottom:max(86px,12vh);left:clamp(32px,7vw,120px);display:inline-flex;align-items:center;gap:16px;min-height:44px;text-decoration:none;font-size:12px;letter-spacing:.01em}.unfold span{font-size:25px}.photograph-field{position:relative;flex:0 0 var(--field);height:100%;margin-left:-24px;margin-right:calc(var(--u)*.08)}.memory{position:absolute;margin:0}.memory a{display:block;background:#fffaf0;padding:5px;box-shadow:0 3px 12px #34442d12}.memory img{width:100%;height:auto}.memory figcaption{margin:10px 0 0;padding:0 4px;color:#56614e;font:italic clamp(11px,1vw,13px)/1.4 Georgia,serif}.memory-walk{left:0;top:25%;width:calc(var(--u)*1.18)}.memory-baking{left:calc(var(--u)*1.35);top:10%;width:calc(var(--u)*.72)}.memory-room{left:calc(var(--u)*.2);top:61%;width:var(--u)}.memory-dog{left:calc(var(--u)*1.43);top:60%;width:calc(var(--u)*.88)}.memory-table{left:calc(var(--u)*2.56);top:20%;width:calc(var(--u)*1.12)}.memory-snow{left:calc(var(--u)*2.65);top:61%;width:calc(var(--u)*1.35)}
.letter-scene{width:var(--letter);padding:70px clamp(26px,5vw,64px) 66px}.letter-scroll{max-height:100%;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#c2c4b7 transparent;padding:8px 8px 16px;scroll-margin-left:32px}.letter-scroll:focus-visible{outline:1px solid #7a896c;outline-offset:3px}.letter-scroll>.eyebrow{margin:0 0 14px;color:#626b5d;font-size:9px}.letter-scroll h2{font:400 clamp(30px,4vw,48px)/1.13 Georgia,serif;letter-spacing:-.035em;margin:0 0 30px;overflow-wrap:anywhere}.letter-copy{font:400 clamp(17px,1.5vw,20px)/1.65 Georgia,serif;overflow-wrap:anywhere}.letter-copy p{margin:0 0 21px}.signature{font:400 clamp(34px,4vw,42px)/1.35 'Mrs Saint Delafield','Snell Roundhand',cursive;margin:28px 0 0;overflow-wrap:anywhere}.ending{width:var(--ending);color:#fffaf0;padding:60px clamp(32px,7vw,120px)}.ending-copy{padding-bottom:5vh}.ending .eyebrow{font-size:10px;margin-bottom:24px}.ending h2{font-size:clamp(46px,6.6vw,82px)}.wordmark{width:140px;height:auto;margin-top:42px;filter:brightness(0) invert(1)}.again{font-size:12px;bottom:max(86px,12vh)}.journey-tools{position:fixed;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:3;display:flex;gap:18px;align-items:center;justify-content:space-between;background:rgba(244,239,229,.96);color:#3a4834;max-width:440px;padding:4px 14px;min-height:44px;font-size:10px;line-height:1.5}.journey-tools a{display:inline-flex;align-items:center;min-height:36px;white-space:nowrap;text-decoration:none}.journey-tools progress{appearance:none;-webkit-appearance:none;border:0;background:#d7d9cf;height:2px;min-width:30px;width:72px;flex:1;color:#4e6342}.journey-tools progress::-webkit-progress-bar{background:#d7d9cf}.journey-tools progress::-webkit-progress-value{background:#4e6342}.journey-tools progress::-moz-progress-bar{background:#4e6342}.movement-hint{white-space:nowrap}
.photo-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100svh;max-height:none;padding:60px 16px 48px;margin:0;border:0;background:#182118f7;color:#fffaf0;overflow:hidden}.photo-viewer:not([open]){display:none}.photo-viewer::backdrop{background:#182118}.photo-viewer>img{width:100%;height:100%;object-fit:contain}.viewer-close{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));min-width:70px;min-height:44px;border:0;color:#fffaf0;background:transparent;font-size:12px}.viewer-close span{font-size:24px;margin-left:8px;vertical-align:middle}.viewer-description{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:24px;right:24px;text-align:center;font:13px/1.5 Georgia,serif;margin:0}.photo-viewer[open]{animation:appear .16s ease-out}@keyframes appear{from{opacity:0}to{opacity:1}}@media(max-width:700px){.opening h1{font-size:clamp(50px,14vw,68px)}.opening .eyebrow{margin-bottom:22px}.dedication{font-size:18px;max-width:230px}.letter-scene{padding-left:22px;padding-right:26px}.letter-scroll h2{font-size:31px}.letter-copy{font-size:18px;line-height:1.6}.desktop-break{display:none}.ending h2{font-size:clamp(43px,12vw,58px)}.wordmark{width:120px}.journey-tools{gap:12px;padding-left:12px;padding-right:12px}.movement-hint{font-size:9px}.review-note{font-size:9px}}
@media(max-height:500px){:root{--u:min(50vw,30vh,220px);--u:min(50vw,30svh,220px);--opening:min(85vw,850px);--ending:min(85vw,850px)}.opening,.ending{padding-top:44px;padding-bottom:60px}.opening-copy,.ending-copy{padding-bottom:0}.opening h1{font-size:clamp(38px,10vh,60px)}.opening .eyebrow,.ending .eyebrow{margin-bottom:12px}.dedication{font-size:16px;margin-top:14px}.unfold,.again{bottom:55px;font-size:11px}.ending h2{font-size:38px}.wordmark{width:92px;margin-top:18px}.memory-walk{top:18%}.memory-baking{top:12%}.memory-room,.memory-dog,.memory-snow{top:54%}.memory-table{top:14%}.memory figcaption{font-size:10px;margin-top:6px}.letter-scene{padding-top:48px;padding-bottom:64px}.letter-scroll h2{font-size:30px}.journey-tools{bottom:8px;min-height:38px}.journey-tools a{min-height:30px}.review-note{top:8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Letter ink stays on uninterrupted paper; descriptions remain available in the viewer. */
.memory figcaption{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}