*{box-sizing:border-box}html,body{margin:0;background:#f5f0e6;color:#243e2e;font-family:Arial,sans-serif}body{height:100svh;min-height:620px;overflow:hidden}button,a{font:inherit;color:inherit}a{text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #be522d;outline-offset:5px}header{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:27px 4.5%}.brand{font-size:48px;font-weight:800;letter-spacing:-4px;line-height:1}.brand span{font-size:30px;margin-left:8px;color:#bd4e2c;display:inline-block;vertical-align:top}.header-note{font-size:9px;letter-spacing:2px;margin-left:8vw}header button{border:1px solid #fff6;background:#f5f0e6;color:#243e2e;border-radius:30px;padding:13px 23px;font-size:12px}header button span{padding-left:20px}.scene{position:absolute;inset:0 0 0 45%;overflow:hidden;background:#534333;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}.photo{position:absolute;inset:0;clip-path:inset(0 0 0 100%);transition:clip-path 1s cubic-bezier(.76,0,.24,1);z-index:0}.photo.active{clip-path:inset(0);z-index:2}.photo.leaving{clip-path:inset(0);z-index:1}.photo img{height:100%;width:100%;object-fit:cover;transform:scale(1.1);transition:transform 9s linear;object-position:55% 50%}.photo.active img{transform:scale(1)}.shade{position:absolute;inset:0;z-index:3;background:linear-gradient(transparent 65%,#241c16aa)}.caption{position:absolute;bottom:125px;left:13%;right:12%;z-index:4;color:#fff;display:flex;gap:20px;align-items:center;font-size:12px}.caption span:first-child{font-size:10px;letter-spacing:2px}#pause{position:absolute;bottom:115px;right:5%;z-index:4;border:1px solid #fff7;border-radius:50%;width:38px;height:38px;color:#fff;background:#2223}.message{position:absolute;top:26%;left:6%;z-index:4;max-width:51%}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(62px,7vw,110px);line-height:.94;letter-spacing:-5px;margin:27px 0 25px}h1 em{color:#bc4f2b}p{font-size:14px;line-height:1.9;margin:0 0 24px}.primary{display:flex;align-items:center;gap:35px;background:#253e2f;color:#fffdf0;border:0;border-radius:5px;padding:18px 25px;font-size:13px}.primary span{font-size:24px;line-height:1}.status{display:block;font-size:10px;margin-top:13px;color:#61705b}.chapters{position:absolute;z-index:5;bottom:42px;left:6%;right:6%;display:flex;background:#f5f0e6;border-top:1px solid #253e2f44;border-bottom:1px solid #253e2f44}.chapters button{flex:1;text-align:left;border:0;background:none;padding:22px;font-family:Georgia,serif;font-size:21px;position:relative}.chapters button+button{border-left:1px solid #253e2f33}.chapters button span{font-family:Arial,sans-serif;font-size:9px;margin-right:16px;color:#768373}.chapters .selected:after{content:"";position:absolute;left:0;top:-2px;right:0;height:3px;background:#be522d}.stamp{position:absolute;z-index:4;right:5%;top:19%;width:120px;height:120px;border-radius:50%;background:#edca62;color:#483e26;display:flex;flex-direction:column;justify-content:center;text-align:center;transform:rotate(12deg);font:italic 16px Georgia,serif;box-shadow:0 10px 30px #0002;animation:stamp-in 1.1s .7s both}.stamp b{font-size:20px}.stamp span{font-size:30px;margin-top:5px}footer{position:absolute;z-index:5;bottom:13px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:9px}footer button{border:0;background:#f5f0e6b0;font-size:9px}dialog{border:0;border-radius:14px;background:#f5f0e6;color:#253e2f;width:min(470px,90vw);padding:45px}dialog::backdrop{background:#1b2d24aa;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}dialog h2{font:36px Georgia,serif}#close{position:absolute;top:10px;right:15px;background:none;border:0;font-size:28px}@keyframes stamp-in{0%{opacity:0;transform:rotate(-20deg) scale(.4)}to{opacity:1;transform:rotate(12deg) scale(1)}}@media(max-width:700px){body{min-height:680px}header{padding:21px 24px}.brand{font-size:38px}.header-note{display:none}header button{padding:11px 17px}.scene{inset:47% 0 0;clip-path:none}.scene img{object-position:50% 52%}.message{top:100px;left:25px;max-width:95%}.eyebrow{font-size:7px}h1{font-size:54px;letter-spacing:-2.8px;margin:16px 0}h1 br{display:none}h1 em{display:block}p{font-size:12px;line-height:1.7;margin-bottom:14px}.primary{padding:13px 18px;gap:20px;font-size:12px}.status{position:absolute;left:215px;bottom:8px;width:110px;font-size:9px;line-height:1.5}.stamp{top:50%;right:20px;width:90px;height:90px;font-size:13px}.stamp b{font-size:15px}.stamp span{font-size:23px}.caption{bottom:115px;left:25px;font-size:10px}#pause{bottom:106px}.chapters{left:18px;right:18px;bottom:38px}.chapters button{font-size:14px;padding:15px 9px;line-height:1.15}.chapters button span{display:block;margin-bottom:5px}footer{left:20px;right:20px;font-size:8px}footer a{background:#f5f0e6c9;padding:3px}.shade{background:linear-gradient(transparent 25%,#241c16aa)}}@media(max-height:700px)and (min-width:701px){.message{top:23%}h1{font-size:65px;margin:20px 0}.message p{font-size:12px;margin-bottom:15px}.primary{padding:13px 20px}.chapters button{padding:17px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.header-note{position:absolute;left:20%;margin:0;max-width:25%;line-height:1.6}@media(max-width:700px){h1{font-size:50px}}@media(max-height:679px)and (max-width:700px){body{overflow-y:auto}}
