@font-face{font-family:Manrope;src:url(assets/manrope-cyrillic.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(assets/manrope-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
:root {
  color-scheme:light;
  --ink:#251a39;
  --muted:#62596e;
  --accent:#6545c8;
  --cream:#faf8f3;
  --rule:#e8e0e9;
  font-family:Manrope,system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button:disabled{cursor:default}
svg{display:block}
[hidden]{display:none!important}
.icons{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shell{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.site-header{height:73px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center}
.wordmark{display:inline-flex;gap:10px;align-items:center;font-size:13px;font-weight:800}
.brand-icon{width:32px;height:32px;border-radius:11px;background:var(--accent);color:white;display:grid;place-items:center}
.brand-icon svg{width:20px;height:20px}
.edition,.eyebrow,.map-total{font-weight:800;font-size:10px;letter-spacing:.15em}
.edition,.eyebrow{display:inline-flex;align-items:center;gap:8px}
.edition{color:var(--muted)}
.edition span,.eyebrow span{width:6px;height:6px;border-radius:50%;background:#8a6ce8}
.hero{position:relative;text-align:center;padding:43px 0 42px}
.hero-label{color:var(--accent);padding:9px 13px;border:1px solid #e5daf8;border-radius:99px;background:#f4edfc}
h1,h2,p{margin:0}
.hero h1{font-family:Georgia,serif;font-size:clamp(49px,6.25vw,94px);font-weight:400;line-height:.99;letter-spacing:-.065em;margin:19px 0 18px}
.hero em{color:var(--accent);font-weight:400;letter-spacing:-.07em}
.hero p{font-size:clamp(14px,1.5vw,19px);font-weight:600;color:var(--muted)}
.hero-spark{position:absolute;pointer-events:none;stroke:#a98ee8;fill:none;stroke-width:1.2}
.spark-one{width:39px;top:39%;left:8%}
.spark-two{width:27px;top:67%;right:9%}
.map-section{scroll-margin-top:16px}
.map-frame{background:#fffdfa;border:1px solid #e4dce8;border-radius:27px;overflow:hidden;box-shadow:0 12px 42px #36204b0b}
.map-heading{display:flex;align-items:center;gap:13px;padding:16px 21px}
.map-heading-icon{width:40px;height:40px;display:grid;place-items:center;color:var(--accent);border:1px solid #e9e0f8;border-radius:12px;background:#f5effe;flex:none}
.map-heading-icon svg{width:21px;height:21px}
.map-heading h2{font-size:15px;line-height:1.3;font-weight:800;margin-bottom:3px}
.map-heading p{font-size:12px;color:var(--muted);font-weight:600}
.map-total{margin-left:auto;color:#6245b5;background:#f3edfc;padding:8px 12px;border-radius:99px;white-space:nowrap}
.map-viewport{position:relative;isolation:isolate;height:clamp(450px,43vw,610px);overflow:hidden;background:radial-gradient(ellipse at 70% 35%,#faf5ff 0,#f2edf7 75%);border-block:1px solid #ede5f3}
.map-art{position:absolute;max-width:none;pointer-events:none;user-select:none}
.map-caption{position:absolute;top:56%;left:58%;font-weight:800;font-size:clamp(12px,1.8vw,25px);color:#5b449378;pointer-events:none}
.compass{position:absolute;right:26px;bottom:22px;width:50px;color:#715ba7;font:800 12px Manrope,sans-serif;pointer-events:none}
.compass text{fill:currentColor}
.leader,.pins{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.leader{overflow:visible}
.leader path{fill:none;stroke:#7554cf;stroke-width:1.2;stroke-dasharray:3 4}
.pin{pointer-events:auto;position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:32px;height:32px;border:0;padding:0;border-radius:50%;background:#7955d12b;transition:background .18s,box-shadow .18s;z-index:1}
.pin .dot{width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:#7651d4;box-shadow:0 2px 6px #43317d4d}
.pin[aria-pressed="true"],.pin:hover{background:#714ad851;box-shadow:0 0 0 4px #7756d71c;z-index:2}
.pin[aria-pressed="true"] .dot{background:#5e37ca;width:19px;height:19px}
.pin-label{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);background:#fbf8ffeb;border:1px solid #e4d9f7;border-radius:20px;padding:4px 8px;color:#45316f;white-space:nowrap;font-size:11px;font-weight:800;line-height:1;pointer-events:none}
.pin[aria-pressed="true"] .pin-label{color:#fff;background:#6545c8;border-color:#6545c8}













.city-nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:12px 17px}
.city-nav button{display:inline-flex;align-items:center;gap:8px;border:1px solid #e9e1ee;background:#fff;border-radius:99px;padding:8px 11px;font-size:12px;font-weight:800;transition:background .18s,border-color .18s}
.city-nav button:hover{border-color:#b6a3e4}
.city-nav button[aria-pressed="true"]{background:#f0e9fd;color:#5636aa;border-color:#e2d4fc}
.city-count{display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:50%;background:#ede6f6;color:#664f87;font-size:9px;font-weight:800}
.closing{position:relative;overflow:hidden;background:#eae1fb;border-radius:24px;margin-top:28px;margin-bottom:18px}
.closing-inner{position:relative;padding:39px 44px 42px}
.closing .eyebrow{color:#5837aa}
.closing h2{font:400 clamp(42px,5.3vw,74px)/1.02 Georgia,serif;letter-spacing:-.06em;margin:9px 0 12px}
.closing p{color:#514164;font-size:15px;font-weight:600;line-height:1.6}
.closing-art{position:absolute;right:1%;top:50%;transform:translateY(-50%);width:min(37%,400px);color:#9275d2}
.closing-art svg{width:100%;stroke:currentColor;stroke-width:1}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0 30px;color:var(--muted);font-size:12px;font-weight:700}
.site-footer span span{color:var(--accent)}
.site-footer a:hover{text-decoration:underline}
@media(max-width:800px){
  .shell{width:calc(100% - 40px)}
  .hero{padding:38px 0}
  .hero h1{font-size:clamp(39px,8.2vw,65px)}
  .spark-one{left:2%;width:20px;top:27%}
  .spark-two{right:3%;width:18px;top:77%}
  .map-viewport{height:460px}
  .map-caption{left:auto;right:20px;top:27%;font-size:13px}
  .compass{width:32px;bottom:12px;right:12px}
  .pin-label{font-size:10px;padding:4px 6px}
}
@media(max-width:520px){
  .shell{width:calc(100% - 28px)}
  .site-header{height:59px}
  .brand-icon{width:27px;height:27px;border-radius:9px}
  .brand-icon svg{width:17px;height:17px}
  .wordmark{font-size:11px;gap:7px}
  .edition{font-size:8px}
  .hero{padding:30px 0 31px}
  .hero h1{font-size:clamp(31px,8.8vw,47px);margin:16px 0 13px}
  .hero-label{font-size:8px;padding:7px 10px}
  .hero-spark{display:none}
  .map-frame,.closing{border-radius:19px}
  .map-heading{gap:9px;padding:12px 10px}
  .map-heading-icon{width:30px;height:30px;border-radius:9px}
  .map-heading-icon svg{width:17px;height:17px}
  .map-heading h2{font-size:13px}
  .map-heading p{font-size:10px;line-height:1.35}
  .map-total{font-size:8px;letter-spacing:.08em;padding:7px}
  .map-viewport{height:417px}
  .map-caption{top:9%;font-size:10px;right:12px}
  .pin{width:34px;height:34px}
  .pin-label{display:none}
  .pin[aria-pressed="true"] .pin-label{display:block}


  .city-nav{gap:5px;padding:10px}
  .city-nav button{font-size:11px;padding:7px 8px;gap:5px;min-height:35px}
  .closing{margin-top:17px}
  .closing-inner{padding:27px 21px}
  .closing p{font-size:13px}
  .closing-art{opacity:.42;right:-7%;width:49%;top:33%}
  .desktop-break{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}



.closing h2{max-width:78%;font-size:clamp(40px,5.1vw,69px)}
@media(max-width:800px){.closing h2{max-width:85%}}
.map-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.map-viewport.is-zoomed{cursor:grab;touch-action:none}
.map-viewport.is-dragging{cursor:grabbing;user-select:none}
.zoom-controls{display:flex;position:absolute;z-index:4;top:13px;right:14px;gap:2px;padding:3px;background:#fffdfa;border:1px solid #e4d9f6;border-radius:12px;box-shadow:0 4px 12px #47327a12}
.zoom-controls button{border:0;border-radius:8px;min-width:34px;min-height:34px;background:transparent;font-weight:800;color:#5f40b1;font-size:18px;padding:0 6px}
.zoom-controls button:hover:not(:disabled){background:#f0e8fb}
.zoom-controls button:disabled{opacity:.38}
.zoom-controls #zoom-reset{font-size:10px;min-width:44px;font-variant-numeric:tabular-nums}
@media(max-width:520px){
  .zoom-controls{top:9px;right:9px}
  .zoom-controls button{min-width:36px;min-height:36px}
  .map-caption{top:62px}
}
@media(max-width:800px),(pointer:coarse){
  .map-viewport{touch-action:none}
}

/* Full size messages and original pictures */
.message-detail{margin:0 17px 18px;border:1px solid #e8ddf5;background:linear-gradient(145deg,#fff,#fefcff);border-radius:22px;overflow:hidden;box-shadow:0 8px 26px #44306f0b}
.detail-head{display:flex;align-items:center;gap:13px;padding:21px 25px 17px;border-bottom:1px solid #eee6f5}
.detail-avatar{flex:none;width:52px;height:52px;border-radius:50%;background:#eee6fd;color:#7855d0;display:grid;place-items:center;overflow:hidden;border:2px solid #e6d9fa}
.detail-avatar svg{width:27px;height:27px}.detail-avatar img{width:100%;height:100%;object-fit:cover}
.detail-person h3{font-size:20px;line-height:1.25;margin:0 0 4px}.detail-person p{font-size:12px;font-weight:700;color:#75658b}
.detail-index{margin-left:auto;border-radius:99px;background:#f2ebfc;color:#7052bd;font-size:11px;font-weight:800;padding:8px 11px;white-space:nowrap}
.detail-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px, 45%);gap:26px;padding:24px 25px;align-items:start}
.detail-eyebrow{display:block;font-size:10px;letter-spacing:.13em;font-weight:800;color:#7a5bc3;margin-bottom:14px}
.detail-copy p{white-space:pre-line;overflow-wrap:anywhere;font-size:15px;line-height:1.85;font-weight:600;color:#453954}
.detail-image-button{position:relative;background:#f7f1ff;border:1px solid #e7dcf8;border-radius:17px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:100%;cursor:zoom-in}
.detail-image-button img{display:block;width:100%;max-height:650px;min-height:160px;object-fit:contain;border-radius:10px}
.detail-image-button span{font-size:11px;color:#7657bc;font-weight:800;padding-bottom:4px}
.detail-no-image{display:flex;min-height:180px;border-radius:17px;background:#f0e8ff;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#7652c3;font-size:12px;font-weight:800;text-align:center;padding:25px}
.detail-no-image svg{width:48px;height:48px}
.detail-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 25px;border-top:1px solid #eee6f5;font-size:11px;font-weight:700;color:#796b89;gap:12px}
.detail-navigation{display:flex;gap:7px}.detail-navigation button{background:#f4edfd;border:1px solid #e7dcf6;border-radius:10px;color:#6a4cbe;width:38px;height:35px;font-size:18px}
.detail-navigation button:hover{background:#e8dafa}
.image-lightbox{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;border:0;padding:0;overflow:hidden;background:#1b1029;color:#fff;
}
.image-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.image-lightbox::backdrop{background:#1b1029}
html:has(.image-lightbox[open]){overflow:hidden}
.lightbox-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(6px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left));
  font-size:13px;font-weight:800;color:#f4eafa;
}
.lightbox-close{
  display:grid;place-items:center;flex:none;width:44px;height:44px;
  border:1px solid #ffffff38;border-radius:50%;padding:0;
  background:#39284c;color:white;font-size:28px;line-height:1;
}
.lightbox-close:hover{background:#523a68}
.lightbox-close:focus-visible{outline-color:#e6c9ff}
.lightbox-stage{
  display:grid;place-items:center;min-width:0;min-height:0;
  padding:0 max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.lightbox-stage img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
@media(min-width:801px){
  .lightbox-toolbar{padding-inline:24px}
  .lightbox-stage{padding:0 24px 16px}
}
@media(max-width:700px){.detail-body{grid-template-columns:1fr;gap:20px;padding:16px}.detail-head{padding:16px}.detail-person h3{font-size:17px}.detail-avatar{width:46px;height:46px}.detail-copy p{font-size:14px;line-height:1.7}.detail-image-button img{max-height:580px;min-height:100px}.detail-footer{padding:12px 16px}.message-detail{margin:0 9px 10px;border-radius:16px}.detail-no-image{min-height:115px}}

/* Geographically grounded map, decluttered city markers and compact photo previews */
.clusters{position:absolute;inset:0;pointer-events:none}
.city-cluster{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:#6c49cd;color:#fff;font-size:13px;font-weight:800;box-shadow:0 2px 0 #a18cdb,0 5px 17px #593caa55;cursor:zoom-in;z-index:2}
.city-cluster.contains-selected{background:#43269c;box-shadow:0 0 0 5px #8b6bdf40,0 3px 14px #593caa66}
.city-cluster:hover{transform:translate(-50%,-50%) scale(1.1)}
.pin .pin-label{display:none}
.pin.show-label .pin-label,.pin:hover .pin-label,.pin:focus-visible .pin-label{display:block}
.pin:hover,.pin:focus-visible{z-index:5}






@media(max-width:620px){.city-cluster{width:36px;height:36px}}
/* v3 — invitation, readable wishes and separate location markers */
.pin-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pin-leaders line{stroke:#9075dc;stroke-width:1.5;stroke-dasharray:3 3;opacity:.72}
.clusters,.city-cluster{display:none!important}
.pin{width:41px;height:41px;z-index:2}
.pin .dot{width:19px;height:19px;box-shadow:0 2px 8px #51408066}
.pin-label{font-size:14px;line-height:1.12;padding:6px 10px;max-width:none}
.pin.is-visited{background:#a7a3b34b}
.pin.is-visited .dot{background:#a39cac}
.pin.is-visited:not([aria-pressed="true"]) .pin-label{border-color:#ddd9e1;color:#847e8b;background:#f5f3f6}
.pin.is-visited[aria-pressed="true"] .dot{background:#6f52bd}
.city-nav button.is-visited{color:#8a8490;background:#f3f0f4;border-color:#e5e0e8}
.city-nav button.is-visited .city-count{background:#e6e2e8;color:#847e90}












.map-viewport{height:clamp(530px,48vw,670px)}
.message-detail .detail-person h3{font-size:22px}
.message-detail .detail-person p{font-size:18px}
.message-detail .detail-copy p{font-size:18px;line-height:1.7}
.envelope-intro{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100svh;overflow:hidden;padding:24px 12px}
.envelope-glow{position:absolute;width:500px;height:500px;max-width:90%;border-radius:50%;background:#fff8;filter:blur(50px);pointer-events:none}
.envelope-inner{position:relative;display:flex;align-items:center;flex-direction:column;text-align:center;padding:28px 16px 32px;max-width:600px}
.envelope-illustration{position:relative;width:238px;height:158px;filter:drop-shadow(0 16px 21px #7c5ec234);margin-bottom:29px;transform:rotate(-5deg)}
.envelope-back{position:absolute;inset:20px 0 0;border-radius:11px;background:#cbb6f1}
.letter-top{position:absolute;top:0;left:30px;width:178px;height:125px;border-radius:8px;background:white;z-index:2;display:grid;place-items:center;padding-bottom:35px;font-family:Georgia,serif;font-style:italic;font-size:23px;color:#7150c0;transform:rotate(3deg)}
.envelope-front{position:absolute;inset:20px 0 0;z-index:4;border-radius:10px;background:linear-gradient(156deg,transparent 49.5%,#c7aeef 50%) left bottom /50% 100% no-repeat,linear-gradient(204deg,transparent 49.5%,#b99ce8 50%) right bottom /50% 100% no-repeat,linear-gradient(0deg,#d9c9f6 0%,#d9c9f6 100%);clip-path:polygon(0 15%,50% 68%,100% 15%,100% 100%,0 100%)}
.envelope-flap{position:absolute;inset:20px 0 0;z-index:3;background:#ac8de2;clip-path:polygon(0 0,100% 0,50% 56%)}
.envelope-seal{position:absolute;z-index:5;left:calc(50% - 22px);top:87px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:white;background:#7752d3;font-size:29px;box-shadow:0 3px 8px #7650ba50}
.envelope-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:#7d5bc0;margin-bottom:12px}
.envelope-inner h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em;font-size:clamp(35px,4vw,56px);line-height:1.08;margin-bottom:13px;color:#251a39}
.envelope-inner p{font-size:16px;line-height:1.6;max-width:420px;color:#70627e;margin-bottom:22px}
#open-envelope{border:0;border-radius:99px;padding:16px 32px;color:white;background:#6545c8;font-size:17px;font-weight:800;box-shadow:0 7px 17px #7651c744;transition:transform .2s,background .2s}
#open-envelope:hover{background:#5430b6;transform:translateY(-3px)}
#open-envelope span{margin-left:9px}
@media(max-width:800px){.pin-label{font-size:12px;padding:5px 8px}.pin{width:40px;height:40px}.message-detail .detail-person h3{font-size:20px}.message-detail .detail-person p,.message-detail .detail-copy p{font-size:16px}.map-viewport{height:560px}}
@media(max-width:520px){.map-viewport{height:530px}.pin-label{display:none}.pin.show-label .pin-label,.pin:hover .pin-label,.pin:focus-visible .pin-label{display:block}.envelope-illustration{transform:scale(.82) rotate(-5deg);margin-bottom:12px}.envelope-inner h1{font-size:36px}.envelope-inner p{font-size:14px}.envelope-inner{padding:15px}}

/* v4: all visible desktop city labels stay visible; separated whole markers */
@media (min-width:521px) { .pin.show-label .pin-label {display:block} }
.pin {isolation:isolate}
.pin:focus-visible {outline:3px solid #3c2598;outline-offset:3px}










/* v6 — no persistent map text/connector lines; city placements stay fixed */
.map-caption,.leader,.pin-leaders{display:none!important}

/* v7 — city counts on map markers; visible labels have a padded collision footprint */
.pin-label{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;min-height:30px;padding:5px 9px;font-size:13px;white-space:nowrap}



.city-nav .city-count{display:none}
@media(max-width:800px){.pin-label{font-size:12px;gap:5px;padding:5px 7px}}
@media(max-width:520px){.pin-label{display:none!important}.pin.show-label .pin-label,.pin:hover .pin-label,.pin:focus-visible .pin-label{display:inline-flex!important}}

/* v8 — original geographic placement, label-only collision avoidance */
@media (min-width:521px) {
  .pin-label { top:0; left:0; transform:none; pointer-events:auto; cursor:pointer; }
  .pin { overflow:visible; }
}

/* v10: reveal lower navigation and greeting only after opening the envelope */
.city-nav-section{padding:16px 17px 12px}
.city-nav-title{font-size:16px;line-height:1.35;font-weight:800;margin:0 0 11px;color:#251a39}
.city-nav{padding:0;gap:8px}
.city-nav button{gap:8px;padding:8px 11px;min-height:36px}
.city-nav .city-count{display:inline-grid;place-items:center;flex:none;min-width:21px;height:21px;padding:0 5px;border-radius:99px;background:#f0e7ff;color:#6743c5;font-size:11px;font-weight:900}
.city-nav button[aria-pressed="true"] .city-count{background:#e5d7fa}
.city-nav button.is-visited .city-count{background:#e6e2e8;color:#847e90}
@media(max-width:520px){.city-nav-section{padding:14px 10px 11px}.city-nav-title{font-size:15px}.city-nav button{min-height:35px;padding:7px 9px;gap:6px}}

/* v12 — fixed carousel navigation in the top header beside the slide counter */
.detail-head-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
.detail-head-actions .detail-index{margin-left:0;font-size:14px;padding:10px 13px;color:#6545c8;background:#f1e9fc;font-variant-numeric:tabular-nums}
.detail-head-actions .detail-navigation{display:flex;align-items:center;gap:8px}
.detail-head-actions .detail-navigation button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#6545c8;color:#fff;border:1px solid #6545c8;font-size:23px;font-weight:700;line-height:1;box-shadow:0 3px 10px #6545c82b;transition:background .15s,transform .15s}
.detail-head-actions .detail-navigation button:hover{background:#4f2ab9}
.detail-head-actions .detail-navigation button:focus-visible{outline:3px solid #b7a0f0;outline-offset:2px}
.detail-head-actions .detail-navigation button:disabled{opacity:.4;cursor:default;transform:none}
@media(max-width:700px){
 .detail-head{gap:9px}
 .detail-head-actions{gap:6px}
 .detail-head-actions .detail-index{font-size:12px;padding:8px 9px}
 .detail-head-actions .detail-navigation{gap:5px}
 .detail-head-actions .detail-navigation button{width:34px;height:34px;font-size:20px}
 .detail-person{min-width:0}
 .detail-person h3{overflow-wrap:anywhere}
}
@media(max-width:390px){
 .detail-head{flex-wrap:wrap}

}


/* Shared map and full-size reader */
.map-viewport{height:clamp(450px,42vw,580px);cursor:grab;touch-action:none;background:radial-gradient(ellipse at 39% 48%,#faf6ff,#eee7f8)}
.map-clusters{position:absolute;inset:0;pointer-events:none}
.map-cluster,.pin{width:44px;height:44px}
.map-cluster{position:absolute;pointer-events:auto;display:grid;place-items:center;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#6a49c5;color:white;font-size:14px;font-weight:800;box-shadow:0 0 0 4px #7955d12b,0 4px 12px #3d26663d}
.map-cluster:hover{background:#5533b5}
.map-cluster.is-visited{background:#6d647e}
.map-cluster.is-selected{background:#42268f;box-shadow:0 0 0 5px #8865dc59}
.pin{background:transparent}
.pin .pin-label,.pin:hover .pin-label,.pin:focus-visible .pin-label{display:none!important}
.pin.show-label .pin-label{display:inline-flex!important;left:50%;top:100%;transform:translateX(-50%);pointer-events:none;min-height:27px;padding:4px 8px;font-size:11px}
.pin .dot{width:21px;height:21px;background:#6a49c5;border:2px solid white;box-shadow:0 0 0 4px #7955d129,0 2px 6px #47307545}
.pin[aria-pressed="true"] .dot{width:23px;height:23px}
.zoom-controls{top:12px;right:12px;gap:0;background:#fffdfa;box-shadow:0 3px 14px #3e2c681a}
.zoom-controls button{min-width:44px;min-height:44px}
.city-nav-section{padding:16px 19px 18px}
.city-nav-heading{display:flex;align-items:baseline;justify-content:space-between;gap:7px 16px;flex-wrap:wrap;margin-bottom:10px}
.city-nav-title{margin:0;font-size:12px;color:#514170;letter-spacing:.09em;text-transform:uppercase}
.city-nav-heading p{font-size:12px;color:#6b5b80}
.city-nav button{min-height:44px;padding-inline:12px}
.message-detail{scroll-margin-top:12px;touch-action:pan-y pinch-zoom}
.reader-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 16px 3px 21px;background:#f5effe;border-bottom:1px solid #eee6f5;color:#6448aa;font-size:10px;font-weight:800;letter-spacing:.1em}
.reader-bar button{border:0;background:none;color:#6245af;min-height:44px;font-size:12px;letter-spacing:0;padding:0 7px;font-weight:800}
.reader-bar button:hover{text-decoration:underline}
.detail-head-actions .detail-navigation button{width:44px;height:44px}
@media(max-width:800px){
  .map-heading{padding:13px 14px;gap:10px}
  .map-heading p{display:none}
  .map-total{font-size:9px;letter-spacing:.035em}
  .map-viewport{height:clamp(315px,46svh,405px)}
  .compass{width:29px;right:11px;bottom:11px;opacity:.72}
  .city-nav-section{padding:13px 0 12px}
  .city-nav-heading{margin:0 14px 6px}
  .city-nav-title,.city-nav-heading p{font-size:10px}
  .city-nav{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:3px 14px 7px;scroll-padding-inline:14px;scrollbar-width:thin;scrollbar-color:#d6c8f2 transparent}
  .city-nav button{flex:none;white-space:nowrap}
  .reader-bar{padding-inline:14px}
}
@media(max-width:350px){.map-heading{padding-inline:9px}.map-total{padding-inline:6px}}
.map-preview{position:absolute;z-index:3;width:min(272px,calc(100% - 20px));padding:8px 12px 10px;background:#fffdfa;border:1px solid #e4d9f6;border-radius:15px;box-shadow:0 9px 25px #412a752d;cursor:auto}
.map-preview:focus{outline:none}
.preview-heading,.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px}
.preview-heading h3{margin:0;color:#6545c8;font-size:12px;font-weight:800}
.preview-heading button,.preview-navigation button{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:50%;background:#f0e9fb;color:#5837a9;font-size:21px;line-height:1;padding:0}
.preview-heading button{background:transparent}
.preview-heading button:hover,.preview-navigation button:hover{background:#e5d8fa}
.preview-copy strong{font-size:15px}
.preview-copy p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.45;color:#645672;margin-top:3px}
.preview-toolbar{margin-top:8px}
.preview-read{min-height:38px;border:0;border-radius:8px;background:#6545c8;color:white;font-size:11px;font-weight:800;padding:4px 10px}
.preview-read:hover{background:#5234ae}
.preview-navigation{display:flex;gap:4px}

/* Festive palette */
:root{
  --ink:#28153d;
  --muted:#62506e;
  --accent:#6630c2;
  --cream:#fff5ef;
  --rule:#e9d4ec;
  --festive-gradient:linear-gradient(115deg,#6933ce,#9c368f);
}
body{
  background:radial-gradient(ellipse at 4% 1%,#ffdabd 0,transparent 37rem),
    radial-gradient(ellipse at 96% 11%,#ead8ff 0,transparent 43rem),
    linear-gradient(180deg,#fff6ed,#fffafd 68%,#fff4ec);
}
.brand-icon,#open-envelope,.preview-read{background:var(--festive-gradient)}
.hero-label{background:#fff3f7;border-color:#eac3e5;color:#8d2b7b}
.hero-label span,.edition span{background:#c64b9b}
.hero em{color:#7e31b4;background:var(--festive-gradient);background-clip:text;-webkit-text-fill-color:transparent}
.hero-spark{stroke:#ad58ba;fill:#fff2e180}
.map-frame{background:#fffafc;border-color:#e7c9ef;box-shadow:0 15px 48px #52276a19}
.map-heading{background:linear-gradient(110deg,#fffbf5,#f9eaff)}
.map-heading-icon{background:#edd9ff;border-color:#ddbcff}
.map-total{background:#ecd7ff;color:#633198}
.map-viewport{background:radial-gradient(ellipse at 25% 50%,#fff5f8,#f2dbfa);border-block-color:#e5c7ed}
.zoom-controls{border-color:#dcb9ef;background:#fff9fd}
.map-cluster{background:#7136c9;box-shadow:0 0 0 4px #a36deb48,0 4px 12px #49247c4a}
.map-cluster:hover,.map-cluster.is-selected{background:#9a287e}
.pin .dot{background:#7136c9;box-shadow:0 0 0 4px #a36deb48,0 2px 6px #49247c45}
.pin[aria-pressed="true"] .dot{background:#a42b83}
.pin[aria-pressed="true"] .pin-label{background:#8d2b7b;border-color:#8d2b7b;color:#fff}
.city-nav-section{background:linear-gradient(115deg,#fff9f4,#fbf0ff)}
.city-nav button:not(.is-visited){border-color:#e5cbed;background:#fffafd}
.city-nav button:hover{border-color:#b670d8}
.city-nav button[aria-pressed="true"]{background:#eed9ff;color:#64289d;border-color:#dcb0f3}
.city-nav button[aria-pressed="true"] .city-count{background:#dcbaf8;color:#542088}
.map-preview{border-color:#e5c5ef}
.preview-heading h3{color:#862579}
.reader-bar{background:linear-gradient(115deg,#f4e4ff,#ffe9f5);color:#762485}
.envelope-intro{background:radial-gradient(ellipse at 24% 22%,#ffe5cd,transparent 65%),linear-gradient(135deg,#ffedf7,#e5c5ff)}
.envelope-back{background:#b28ae7}
.envelope-flap{background:#b080e8}
.envelope-front{background:linear-gradient(156deg,transparent 49.5%,#d7b3ff 50%) left bottom /50% 100% no-repeat,linear-gradient(204deg,transparent 49.5%,#c38ced 50%) right bottom /50% 100% no-repeat,#e8c9ff}
.envelope-seal{background:#a03088}
.closing{color:#fff;background:linear-gradient(120deg,#5e28bf,#85329e 58%,#962877)}
.closing .eyebrow,.closing p{color:#fff4fd}
.closing .eyebrow span{background:#ffc5dd}
.closing-art{color:#f5c2ef}

/* Illustrated preview over the map */
.map-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.map-stage:has(.map-preview:not([hidden])){background:#f2dbfa}
.map-stage>.map-viewport,.map-stage>.map-preview{grid-area:1/1}
.map-preview{position:relative;display:grid;grid-template-rows:auto auto auto;justify-self:start;margin:17px 0 12px;width:min(440px,calc(100% - 36px));padding:15px 18px;background:#fffdfd;border-radius:18px}
.preview-heading{margin-bottom:8px}
.preview-heading h3{padding:6px 11px;border-radius:99px;background:#efe0ff;color:#692bb0;font-size:16px;line-height:1.2}
.preview-heading button{background:#f6edff;font-size:23px}
.preview-body{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d2b9eb transparent}
.preview-person{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.preview-person strong{font-size:20px;line-height:1.2}
.preview-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#eee0ff;color:#7136c9;overflow:hidden}
.preview-avatar svg{width:22px;height:22px}
.preview-avatar img{width:100%;height:100%;object-fit:cover}
#preview-text{margin:0 0 10px;max-height:104px;overflow:auto;white-space:pre-line;overflow-wrap:anywhere;color:#4f3e60;font-size:16px;line-height:1.55;scrollbar-width:thin;scrollbar-color:#cdb7e4 transparent}
.preview-image-button{position:relative;display:block;width:100%;padding:0;border:0;border-radius:10px;overflow:hidden;background:#f5ecfc;cursor:zoom-in}
.preview-image-button img{width:100%;height:290px;display:block;object-fit:contain}
.preview-image-button span{position:absolute;right:7px;bottom:7px;padding:5px 8px;border-radius:7px;background:#fff;color:#6531b7;font-size:10px;font-weight:800;box-shadow:0 2px 7px #51327320}
.preview-toolbar{margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid #eadcf5}
.preview-index{color:#6930b9;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.preview-read{margin-left:auto;background:#f3e7ff;color:#592ca4}
.preview-read:hover{background:#ead9fd}
.preview-navigation button{background:#6a35c8;color:#fff;width:40px;height:40px}
.preview-navigation button:hover{background:#5727ac}
@media(max-width:800px){
  .map-stage{--preview-image-height:clamp(200px,62vw,270px)}
  .map-preview{margin-top:58px;width:min(350px,calc(100% - 20px));padding:9px 11px;border-radius:14px}
  .preview-heading{margin-bottom:4px}
  .preview-heading h3{font-size:13px}
  .preview-person{margin-bottom:5px;gap:7px}
  .preview-person strong{font-size:16px}
  .preview-avatar{width:30px;height:30px}
  .preview-avatar svg{width:17px;height:17px}
  #preview-text{max-height:91px;font-size:15px;margin-bottom:8px}
  .preview-image-button img{height:var(--preview-image-height)}
  .preview-toolbar{margin:0 0 6px;padding-bottom:5px}
  .preview-index{font-size:12px}
  .preview-navigation button{width:36px;height:36px}
}

/* The invitation opens before the celebration page appears. */
.envelope-intro{background:radial-gradient(ellipse at 35% 22%,#ffdfc7,transparent 67%),linear-gradient(135deg,#fff2e7,#f8e3fd 55%,#e5c7ff)}
.envelope-inner{padding-block:34px 26px}
.envelope-illustration{margin-bottom:34px}
.envelope-spark{position:absolute;z-index:6;color:#a650bf;line-height:1}
.envelope-spark-left{left:-28px;top:33px;font-size:33px}
.envelope-spark-right{right:-25px;top:8px;font-size:22px;color:#bc4f9c}
.envelope-flap{transform-origin:center top}
.envelope-intro.is-opening{animation:invitation-out 790ms ease both;pointer-events:none}
.is-opening .envelope-flap{animation:envelope-unfold 360ms ease-in-out both}
.is-opening .letter-top{animation:letter-rise 520ms 135ms cubic-bezier(.2,.7,.25,1) both}
.is-opening .envelope-seal{animation:seal-release 210ms ease-out both}
.celebration:not([hidden]) .hero,.celebration:not([hidden]) .map-section{
  animation:celebration-in 650ms cubic-bezier(.2,.65,.3,1) both;
}
.celebration:not([hidden]) .map-section{animation-delay:110ms}
@keyframes envelope-unfold{
  48%{transform:scaleY(.08)}
  50%{z-index:1}
  100%{z-index:1;transform:scaleY(-.72)}
}
@keyframes letter-rise{
  to{transform:translateY(-62px) rotate(0)}
}
@keyframes seal-release{
  to{opacity:0;transform:scale(1.2)}
}
@keyframes invitation-out{
  0%,63%{opacity:1}
  100%{opacity:0}
}
@keyframes celebration-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* Keep carousel controls independent of the current message height. */
.map-frame,.message-detail{overflow:clip}
.reader-bar{position:sticky;top:0;z-index:1}
.reader-bar .detail-head-actions{flex:none}
.reader-bar #back-to-map{flex:none;white-space:nowrap}
.preview-heading h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-toolbar .preview-index{min-width:3em}
.preview-toolbar .preview-read{white-space:nowrap}
@media(max-width:350px){
  .preview-toolbar .preview-read{font-size:10px;padding-inline:6px}
}

html{overflow-anchor:none}