@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap');

:root{color-scheme:dark;--ivory:#f5f0e6}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#29271f}
body{color:var(--ivory);font-family:Manrope,Arial,sans-serif}
button{-webkit-tap-highlight-color:transparent}
.landing{position:relative;isolation:isolate;height:100svh;min-height:460px;overflow:hidden}
.gallery,.shade{position:absolute;inset:0;z-index:-1}
.gallery{background:#444137}
.scene{position:absolute;width:100%;height:100%;object-fit:cover;object-position:var(--position);opacity:0;transform:scale(1.035);transition:opacity 2.4s ease,transform 12s linear}
.scene.active{opacity:1;transform:scale(1)}
.shade{background:linear-gradient(180deg,rgba(19,22,17,.17),rgba(19,22,17,.24) 30%,rgba(19,22,17,.40) 65%,rgba(19,22,17,.51)),rgba(25,28,20,.18)}
.identity{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px 52px;text-align:center}
.wordmark{margin:0;display:flex;flex-direction:column;align-items:center;font-weight:400;animation:arrive 1.7s cubic-bezier(.2,.7,.2,1) both}
.brand-logo{display:block;width:clamp(240px,25vw,360px);max-width:100%;height:auto}
.announcement{display:flex;flex-direction:column;align-items:center;margin-top:48px;animation:arrive 1.7s .3s cubic-bezier(.2,.7,.2,1) both}
.rule{height:35px;width:1px;background:rgba(245,240,230,.5)}
.announcement p{font-size:clamp(14px,1.2vw,16px);font-weight:400;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;margin:24px 0 0}
.edge{position:absolute;left:40px;right:40px;display:flex;justify-content:space-between;pointer-events:none;opacity:.5}
.edge span{height:16px;width:16px}
.top-edge{top:40px}.bottom-edge{bottom:40px}
.top-edge span:first-child{border-left:1px solid;border-top:1px solid}.top-edge span:last-child{border-right:1px solid;border-top:1px solid}
.bottom-edge span:first-child{border-left:1px solid;border-bottom:1px solid}.bottom-edge span:last-child{border-right:1px solid;border-bottom:1px solid}
footer{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;animation:arrive 1.5s .6s both}
.pagination{display:flex;align-items:center;gap:2px}
.dot{width:30px;height:36px;border:0;background:none;cursor:pointer;position:relative;padding:0;color:inherit}
.dot:after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--ivory);opacity:.4;transform:translate(-50%,-50%);transition:width .5s,opacity .5s}
.dot.selected:after{width:18px;border-radius:5px;opacity:1}.dot:hover:after{opacity:1}
.playback{display:grid;place-items:center;width:36px;height:36px;background:none;border:0;cursor:pointer;color:var(--ivory);opacity:.7;transition:opacity .3s}
.playback:hover{opacity:1}.playback svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}.playback .play-icon{display:none}
.playback[aria-pressed="true"] .pause-icon{display:none}.playback[aria-pressed="true"] .play-icon{display:block}
button:focus-visible{outline:1px solid var(--ivory);outline-offset:3px;border-radius:3px}
@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.edge{left:22px;right:22px}.top-edge{top:24px}.bottom-edge{bottom:24px}.brand-logo{width:clamp(220px,64vw,290px)}.announcement{margin-top:38px}footer{bottom:24px}.identity{padding-bottom:40px}.scene{object-position:var(--position)}}
@media(max-height:540px) and (min-width:601px){.brand-logo{width:210px}.announcement{margin-top:22px}.rule{height:20px}.announcement p{margin-top:15px}footer{bottom:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.scene{transform:none}}