/* SOGAZ UI Library · Color scheme / Dark · Typography
   Source: GHjKxlGR1vQmbhNIQOezh5, read 2026-10-22.
   Exact resolved values from Figma variables. */
@font-face{font-family:Inter;src:url('InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Inter Display';src:url('InterDisplay-Light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
:root{color-scheme:light;--background-primary:#fff;--background-secondary:#f4f5f8;--text-default:#152149;--text-secondary:rgb(21 33 73 / .66);--text-tertiary:rgb(21 33 73 / .5);--text-inverse:#fff;--accent:#184de5;--accent-text:#2b5ce9;--border:#d1d6e3;--map-fill:#e9eefc;--map-fill-end:#dce5fb;--map-border:#bdcdf5;--map-point-border:#fff}
h1{font-family:'Inter Display',Inter,sans-serif!important;font-weight:300!important;font-size:57px!important;line-height:64px!important;letter-spacing:0!important}
.stat strong{font-family:'Inter Display',Inter,sans-serif;font-weight:300!important;letter-spacing:0!important}
.lead{font-size:16px!important;line-height:24px!important}
.selection strong{font-family:'Inter Display',Inter,sans-serif;font-weight:300;letter-spacing:.32px}
.eyebrow{font-size:12px!important;line-height:16px!important;letter-spacing:.9px!important}
.tooltip{font-family:Inter,sans-serif;font-size:14px;font-weight:600;line-height:20px}
@media(max-width:700px){h1{font-size:36px!important;line-height:44px!important}.lead{font-size:16px!important}}

/* Each future full-screen landing block uses .landing-screen.
   Document scrolling snaps to its start; tall blocks remain scrollable. */
html{scroll-snap-type:y mandatory;scroll-behavior:smooth;scroll-padding-top:0}
.landing-screen{min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.test-screen{background:var(--background-secondary);width:100%;}

.map-controls{position:absolute;top:20px;right:24px;z-index:2;display:flex;align-items:center;gap:4px;background:var(--background-secondary);border:1px solid var(--border);padding:4px;border-radius:12px}
.map-controls button{height:40px;min-width:40px;padding:0 12px;border:0;border-radius:8px;color:var(--text-default);background:transparent;cursor:pointer;font:500 14px Inter,sans-serif}
.map-controls button:hover:not(:disabled){background:var(--map-fill)}
.map-controls button:disabled{opacity:.3;cursor:default}
.map-controls #zoom-in,.map-controls #zoom-out{font-size:24px}
.map-controls #zoom-level{font-size:12px;min-width:44px;text-align:center;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.map-help{position:absolute;bottom:0;left:24px;font-size:11px;color:var(--text-tertiary);pointer-events:none}
.map svg{cursor:grab;touch-action:pan-y pinch-zoom}
.map.is-zoomed svg{touch-action:none}
.map svg:active{cursor:grabbing}
.point{cursor:pointer}
@media(max-width:700px){.map{padding-top:62px}.map-controls{top:10px;right:8px}.map-help{position:static;display:block;text-align:center;font-size:10px;margin-top:8px}}
.memories{height:185svh;position:relative;background:var(--background-primary);scroll-snap-align:start;scroll-snap-stop:always}
.memories-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;display:grid;place-items:center}
.memories-heading{text-align:center;position:relative;z-index:0;transform:translateY(var(--text-shift,0px));will-change:transform}
.memories-heading p{font:400 12px/16px Inter,sans-serif;letter-spacing:1.5px;color:var(--text-secondary);margin:0 0 20px}
.memories-heading h2{font:300 clamp(74px,12vw,180px)/.98 'Inter Display',Inter,sans-serif;letter-spacing:-.035em;color:var(--accent-text);margin:0}
.memories-heading>span{display:block;font:400 16px/24px Inter,sans-serif;color:var(--text-secondary);margin-top:24px}
.photo-stack{position:absolute;inset:0;z-index:1;pointer-events:none}
.memory-photo{position:absolute;width:clamp(180px,24vw,360px);margin:0;background:var(--background-secondary);padding:12px 12px 0;box-shadow:0 24px 70px #0005;transform:translateY(var(--shift,0px)) rotate(var(--rotation,0deg));will-change:transform}
.photo-placeholder{aspect-ratio:4/3;background:var(--map-fill);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.photo-placeholder:before{content:'';width:65%;height:1px;background:var(--map-border);position:absolute;transform:rotate(-35deg)}
.photo-number{font:300 62px/1 'Inter Display',Inter,sans-serif;color:var(--map-border);z-index:1;background:var(--map-fill);padding:8px}
.photo-await{font:400 11px/16px Inter,sans-serif;color:var(--text-tertiary);z-index:1;background:var(--map-fill);padding:0 8px}
.memory-photo figcaption{font:400 15px/20px Inter,sans-serif;letter-spacing:0;color:var(--text-default);padding:18px 5px 22px;text-align:center}
.photo-a{left:4%;top:3%;--rotation:-9deg;width:29vw;max-width:420px}
.photo-b{right:5%;top:-9%;--rotation:8deg;width:23vw}
.photo-c{right:-3%;top:48%;--rotation:-6deg;width:25vw}
.photo-d{left:31%;top:76%;--rotation:5deg;width:30vw;max-width:440px}
.photo-e{left:-5%;top:62%;--rotation:7deg;width:24vw}
.photo-f{left:47%;top:-25%;--rotation:-5deg;width:23vw}
@media(min-width:1500px){.photo-a{left:8%}.photo-c{right:3%}.photo-e{left:0}}
@media(max-width:700px){.memories{height:165svh}.memories-heading h2{font-size:clamp(62px,14vw,100px)}.memories-heading p{font-size:10px}.memories-heading>span{font-size:12px;margin-top:18px}.memory-photo{padding:7px 7px 0;width:42vw}.memory-photo figcaption{font-size:11px;line-height:15px;padding:11px 2px 13px}.photo-number{font-size:38px}.photo-await{font-size:9px}.photo-a{left:-5%;top:7%;width:51vw}.photo-b{right:-6%;top:-1%;width:46vw}.photo-c{right:-9%;top:65%;width:48vw}.photo-d{left:24%;top:89%;width:51vw}.photo-e{left:-8%;top:70%;width:43vw}.photo-f{display:none}}
@media(prefers-reduced-motion:reduce){.memories{height:100svh}.memory-photo,.memories-heading{will-change:auto}}
/* Allow the photo layers to cross section boundaries without a hard crop. */
html{overflow-x:clip}
.memories{z-index:2;overflow:visible}
.memories-stage{overflow:visible}
.photo-stack{overflow:visible}
/* Room for the cards above the sticky composition, clear of the map screen. */
.memories{padding-top:34svh;height:219svh}
@media(max-width:700px){.memories{padding-top:22svh;height:187svh}}
@media(prefers-reduced-motion:reduce){.memories{height:134svh}}