/* Self-hosted, never from Google's servers (docs/research/website-staging.md Step 1 item 4). OFL, licences beside them. */
@font-face { font-family:Fraunces; font-style:normal; font-weight:300 600; font-display:swap; src:url(/fonts/fraunces.woff2) format("woff2"); }
@font-face { font-family:Fraunces; font-style:italic; font-weight:300 600; font-display:swap; src:url(/fonts/fraunces-italic.woff2) format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/inter.woff2) format("woff2"); }
:root { --bone:#F5F3EE; --sand:#E7E2D6; --ink:#1F1F1D; --slate:#4A5870; --graphite:#181818; --card:#242424; --light:#E8E8E8;
        --muted:#55524c; --green:#34c759; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bone); color:var(--ink); font-family:Inter, system-ui, sans-serif; min-width:1100px; }

nav { position:fixed; inset:24px 32px auto; display:flex; align-items:center; justify-content:space-between; z-index:50; }
.mark { font:italic 400 30px/1 Fraunces; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.8); color:var(--ink); }
.links { display:flex; gap:6px; padding:5px; border-radius:999px; font:500 13px Inter; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.links a { padding:8px 14px; border-radius:999px; }
.links a.on { background:var(--ink); color:var(--bone); }
.btn { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px; font:600 15px Inter;
       background:var(--ink); color:var(--bone); }
nav .btn { padding:10px 18px; font-size:13px; }

/* a scene: headline left, the tile in the middle, the sentence right */
.scene { position:relative; height:100vh; min-height:720px; overflow:hidden; }
.scene[data-bg="white"] { background:#fff; } .scene[data-bg="sand"] { background:var(--sand); }
.scene[data-bg="graphite"] { background:var(--graphite); color:var(--light); }
.scene[data-bg="graphite"] .btn { background:var(--bone); color:var(--ink); }
.scene[data-bg="graphite"] .tile, .js .stage[data-bg="graphite"] .tile { box-shadow:0 0 0 1px rgba(232,232,232,.14), 0 40px 90px rgba(0,0,0,.55); }
.head { position:absolute; left:64px; top:50%; transform:translateY(-50%); width:340px; z-index:6;
        font:400 56px/1.04 Fraunces; letter-spacing:-.025em; font-variation-settings:"opsz" 144; }
.words { position:absolute; right:64px; top:50%; transform:translateY(-50%); width:300px; z-index:6; font:400 17px/1.5 Inter; }
.words p { margin-bottom:22px; opacity:.85; }
.center { position:absolute; left:50%; top:50%; z-index:4; }
.tile { position:absolute; height:min(66vh,600px); aspect-ratio:6/13; left:0; top:0; transform:translate(-50%,-47%);
        border-radius:40px; overflow:hidden; background:var(--graphite); box-shadow:0 40px 90px rgba(31,31,29,.22); }
.tile img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.tile.photo { background:linear-gradient(160deg,#e9d8c6,#b99a7d); }
.tile.photo span { position:absolute; left:16px; top:16px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.75);
                   font:500 12px Inter; color:var(--muted); }
.card { position:absolute; background:#fff; color:var(--ink); border-radius:20px; padding:14px 17px; z-index:8; white-space:nowrap;
        font:500 14px/1.35 Inter; box-shadow:0 18px 44px rgba(31,31,29,.18); }
.card .t { font:600 15px/1.2 Inter; margin-bottom:2px; }
.muted { color:var(--muted); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; background:var(--green); }
.avatar { width:38px; height:38px; border-radius:50%; flex:none; background:linear-gradient(135deg,#d7b49a,#9a8a5a); }
.row { display:flex; gap:11px; align-items:center; }
.stamp { display:inline-block; margin-top:6px; padding:4px 10px; border-radius:999px; background:#eef5ee; color:#2f7a3e; font:600 12px Inter; }

/* 1 the hero: the name huge behind the tile */
.giant { position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); font:italic 300 560px/1 Fraunces; letter-spacing:-.04em;
         color:rgba(74,88,112,.09); white-space:nowrap; z-index:1; }

/* 2 the doors: the tile becomes three */
.doors .tile { height:min(50vh,440px); }
.doors .label { position:absolute; left:0; top:calc(min(50vh,440px) * .53 + 14px); transform:translateX(-50%); width:220px;
                font:500 14px/1.4 Inter; }
.doors .label b { display:block; font:600 16px Inter; margin-bottom:2px; }
.doors .d1 { --x:-250px; } .doors .d3 { --x:250px; }
.doors .d1, .doors .d3 { transform:translateX(var(--x)); }

/* 3 the map: klippers stand up out of the tile */
.pin { position:absolute; z-index:7; display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-100%); }
.pin .face { width:54px; height:54px; border-radius:50%; border:4px solid #fff; box-shadow:0 10px 24px rgba(31,31,29,.3);
             background:linear-gradient(135deg,#d7b49a,#9a8a5a); }
.pin .stick { width:3px; height:34px; background:#fff; box-shadow:0 0 0 1px rgba(31,31,29,.1); }
.pin .shadow { width:24px; height:8px; border-radius:50%; background:rgba(31,31,29,.35); filter:blur(2px); }

/* 4 both sides: the tile splits in two */
.two .a { --x:-175px; } .two .b { --x:175px; }
.two .tile { height:min(60vh,540px); } .two .head { width:300px; } .two .a { --x:-160px; } .two .b { --x:160px; }
.two .side { position:absolute; left:0; top:0; transform:translateX(var(--x)); }
.two .who { position:absolute; left:0; top:calc(min(60vh,540px) * -.47 - 30px); transform:translateX(-50%);
            font:600 12px Inter; letter-spacing:.16em; text-transform:uppercase; opacity:.7; white-space:nowrap; }

/* 7 ready: the three steps side by side, the button under the headline */
.end .tile { height:min(50vh,440px); } .end .center { margin-left:50px; }
.end .e1 { --x:-230px; } .end .e3 { --x:230px; }
.end .e1, .end .e3 { position:absolute; left:0; top:0; transform:translateX(var(--x)); }
.end .label { position:absolute; left:0; top:calc(min(50vh,440px) * .53 + 14px); transform:translateX(-50%); white-space:nowrap;
              font:600 15px Inter; }
.end .words { left:64px; right:auto; top:calc(50% + 90px); transform:none; }
.n { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--bone);
     font:700 12px Inter; margin-right:8px; counter-increment:step; }
.n::before { content:counter(step); }
.end { counter-reset:step; } .end .n { background:var(--bone); color:var(--ink); }

.after { background:var(--graphite); color:var(--light); padding:120px 64px 48px; }
.after h2 { font:400 48px/1.05 Fraunces; letter-spacing:-.02em; margin-bottom:36px; }
.faq { max-width:760px; }
.faq div { display:flex; justify-content:space-between; padding:20px 4px; border-top:1px solid rgba(232,232,232,.16); font:500 18px Inter; }
.faq div i { font-style:normal; opacity:.6; }
footer { display:flex; gap:28px; margin-top:96px; font:500 13px Inter; opacity:.7; }
footer b { font:italic 400 22px/1 Fraunces; margin-right:auto; }

/* with the script: one stage, pinned; the scenes swap in it as you scroll */
.js .story { height:calc(var(--n) * 100vh); position:relative; }
.js .stage { position:sticky; top:0; height:100vh; min-height:720px; overflow:hidden; background:var(--bone);
             transition:background-color .8s var(--ease), color .8s var(--ease); }
.js .stage[data-bg="white"] { background:#fff; } .js .stage[data-bg="sand"] { background:var(--sand); }
.js .stage[data-bg="graphite"] { background:var(--graphite); color:var(--light); }
.js .scene { position:absolute; inset:0; height:auto; min-height:0; background:none; color:inherit; pointer-events:none; }
.js .scene.on { pointer-events:auto; }
.js .scene .head, .js .scene .words { opacity:0; transition:opacity .6s ease, margin .8s var(--ease); margin-top:24px; }
.js .scene.on .head, .js .scene.on .words { opacity:1; margin-top:0; transition-delay:.15s; }
.js .scene.past .head, .js .scene.past .words { margin-top:-24px; }
.js .scene .center { opacity:0; transition:opacity .35s ease .3s, margin .9s var(--ease); margin-top:80px; }
.js .scene.on .center { opacity:1; margin-top:0; transition:opacity .45s ease, margin .9s var(--ease); }
.js .scene.past .center { margin-top:-80px; }
.js .scene:not(.on):not(.out) * { transition:none; }
.js .scene .giant { opacity:0; transition:opacity .6s ease; } .js .scene.on .giant { opacity:1; }
html[data-bg="graphite"] nav .btn { background:var(--bone); color:var(--ink); }
.js .scene .card, .js .scene .pin, .js .scene .label { opacity:0; translate:0 18px; transition:opacity .5s ease, translate .8s var(--ease); }
.js .scene.on .card, .js .scene.on .pin, .js .scene.on .label { opacity:1; translate:0 0; transition-delay:var(--d,.5s); }
.js .doors .d1, .js .doors .d3, .js .two .side { transition:transform 1s var(--ease) .2s; }
.js .doors:not(.on) .d1, .js .doors:not(.on) .d3, .js .two:not(.on) .side { transform:translateX(0); }
.js .end .e1, .js .end .e3 { transition:transform 1s var(--ease) .2s; }
.js .end:not(.on) .e1, .js .end:not(.on) .e3 { transform:translateX(0); }
.js .hero.on .tile { animation:land 1.8s var(--ease) both; }
@keyframes land { from { transform:translate(-50%,-47%) translate(-380px,-260px) rotate(-18deg) scale(.7); opacity:0; } 50% { opacity:1; } }
a { color:inherit; text-decoration:none; }