:root { color-scheme: light; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #ffffff; }
body { -webkit-font-smoothing: antialiased;
       font-family: "Playfair Display", "Times New Roman", Times, serif; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #ffffff;
         touch-action: none; transition: opacity .25s linear; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* captions: the old one leaves quickly, the new one arrives once the dots are moving */
.cap { position: fixed; left: 0; right: 0; top: calc(clamp(20px, 4vh, 48px) + env(safe-area-inset-top, 0px));
       padding: 0 24px; text-align: center; z-index: 1;
       opacity: 0; filter: blur(8px); transform: scale(.96);
       transition: opacity .25s ease, filter .25s ease, transform .25s ease; pointer-events: none; }
.cap.on { opacity: 1; filter: blur(0); transform: none;
          transition: opacity .6s ease .5s, filter .7s ease .5s, transform .7s ease .5s; }
.kick { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px;
        font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #6f7471; }
.kick::before, .kick::after { content: ""; width: 28px; height: 1px; background: #c9cdcb; }
.cap h2 { margin: 0; font-weight: 900; font-size: clamp(50px, min(9vw, 15vh), 128px); line-height: .95; letter-spacing: -0.02em;
          text-transform: capitalize; color: #2b2f2d; }
.cap p { margin: .55em auto 0; max-width: 30ch; font-weight: 400; font-style: italic; font-size: clamp(19px, 2.1vw, 28px); line-height: 1.3; color: #5f7467; }
.cap.last p { margin-top: 0; max-width: 20ch; font-style: normal; font-weight: 500; font-size: clamp(30px, min(4.2vw, 8vh), 58px); line-height: 1.1; letter-spacing: -0.01em; color: #2b2f2d; }
.cap.last em { font-style: italic; font-weight: 400; color: #4f6658; }
.cta { position: fixed; left: 50%; transform: translateX(-50%); z-index: 2;
       bottom: calc(clamp(72px, 13vh, 140px) + env(safe-area-inset-bottom, 0px));
       opacity: 0; pointer-events: none; transition: opacity .25s ease;
       display: inline-block; padding: .72em 1.5em; border-radius: 999px; background: #2b2f2d; color: #ffffff;
       font-weight: 700; font-size: 16px; text-decoration: none; }
.cta.on { opacity: 1; pointer-events: auto; transition: opacity .6s ease 1.2s; }

/* step controls */
.steps { position: fixed; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 2;
         display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; }
.steps button { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0;
                cursor: pointer; color: #6b716e; -webkit-tap-highlight-color: transparent; font: inherit; }
.nav { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
.nav svg { width: 18px; height: 18px; display: block; }
.nav:hover { color: #2b2f2d; }
.nav:disabled { opacity: .3; cursor: default; }
.bars { display: flex; align-items: center; gap: 6px; }
.bar { width: clamp(22px, 5.2vw, 44px); height: 40px; display: flex; align-items: center; }
.bar i { display: block; position: relative; width: 100%; height: 3px; border-radius: 2px; background: #e1e3e2; overflow: hidden; }
.bar:hover i { background: #cfd2d0; }
.bar b { position: absolute; inset: 0; background: #3a3f3c; transform-origin: left center; transform: scaleX(0); }
.steps button:focus-visible, .cta:focus-visible { outline: 2px solid #4f6658; outline-offset: 3px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .cap, .cap.on { filter: none; transform: none; transition: opacity .4s; }
}