:root{
  --ink:#26221F;
  --paper:#FBF4E8;
  --paper-deep:#F4E9D6;
  --ocean:#CFE7EA;
  --sakura:#F2B8C6;
  --sakura-deep:#E58BA4;
  --matcha:#B7CE8F;
  --tamago:#F2A65A;
  --white:#FFFDF6;
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Karla",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}
h1,h2,h3,.wordmark,.btn{font-family:"Baloo 2",system-ui,sans-serif}
h1,h2,h3{line-height:1.15;margin:0 0 .4em}
a{color:inherit}
img{max-width:100%}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--sakura-deep);outline-offset:3px;border-radius:6px}

/* header */
.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px clamp(16px,4vw,48px);
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(6px);
}
.wordmark{font-weight:800;font-size:1.5rem;text-decoration:none;letter-spacing:.2px}
.wordmark span{color:var(--sakura-deep)}
.site-header nav{display:flex;align-items:center;gap:clamp(10px,2.5vw,26px);font-weight:600}
.site-header nav a{text-decoration:none}
.site-header nav a:not(.btn):hover{color:var(--sakura-deep)}

/* buttons */
.btn{
  display:inline-block;
  background:var(--ink);color:var(--white);
  border:none;cursor:pointer;text-decoration:none;
  font-weight:700;font-size:1rem;
  padding:12px 24px;border-radius:999px;
  box-shadow:0 4px 0 var(--sakura-deep);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--sakura-deep)}
.btn-small{padding:8px 18px;font-size:.9rem}
.btn-ghost{background:var(--white);color:var(--ink);box-shadow:0 4px 0 var(--tamago)}
.btn-ghost:hover{box-shadow:0 2px 0 var(--tamago)}

/* hero */
.hero{text-align:center;padding:clamp(28px,6vw,64px) 20px 8px;max-width:820px;margin:0 auto}
.eyebrow{
  display:inline-block;font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--white);border:2px dashed var(--sakura-deep);color:var(--sakura-deep);
  padding:6px 14px;border-radius:999px;margin-bottom:14px;
}
.hero h1{font-size:clamp(2rem,5.6vw,3.6rem);font-weight:800}
.lede{font-size:clamp(1rem,2.2vw,1.2rem);opacity:.85;margin:0}

/* map */
.map-section{padding:clamp(12px,3vw,32px) clamp(10px,3vw,40px) 8px}
.map-wrap{
  position:relative;max-width:1180px;margin:0 auto;
  background:var(--ocean);
  border-radius:calc(var(--radius) + 8px);
  border:6px solid var(--white);
  box-shadow:0 10px 30px rgba(38,34,31,.12);
  overflow:hidden;
}
#worldMap{display:block;width:100%;height:auto}
.map-legend{
  position:absolute;left:14px;bottom:12px;
  background:var(--white);border-radius:999px;
  padding:6px 14px;font-weight:600;font-size:.85rem;
  box-shadow:0 3px 10px rgba(38,34,31,.12);
}

/* pins */
.pin{cursor:pointer}
.pin:hover .pin-art, .pin:focus-visible .pin-art{transform:scale(1.08)}
.pin-art{transform-box:fill-box;transform-origin:center;transition:transform .18s ease}
.pin-pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

/* heist card */
.heist-card{
  position:absolute;z-index:20;
  width:min(300px, calc(100% - 24px));
  background:var(--white);
  border-radius:var(--radius);
  padding:18px 20px 16px;
  box-shadow:0 14px 34px rgba(38,34,31,.22);
  border:3px solid var(--ink);
}
.heist-card::after{ /* lil tape strip */
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:84px;height:20px;background:var(--sakura);opacity:.85;border-radius:3px;
}
.card-no{margin:0;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sakura-deep)}
.heist-card h3{font-size:1.35rem;margin:.1em 0 .1em}
.card-place{margin:0 0 .5em;font-weight:600;opacity:.75}
.card-blurb{margin:0;font-size:.95rem}
.card-close{
  position:absolute;top:8px;right:10px;
  background:none;border:none;cursor:pointer;
  font-size:1rem;font-weight:700;color:var(--ink);opacity:.6;
}
.card-close:hover{opacity:1}

/* heist log */
.log-section{padding:clamp(36px,6vw,72px) clamp(16px,4vw,48px) 0;max-width:1180px;margin:0 auto;text-align:center}
.log-section h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.section-lede{opacity:.8;margin-top:0}
.log-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(240px,72vw);
  gap:16px;overflow-x:auto;padding:18px 4px 26px;
  scroll-snap-type:x mandatory;text-align:left;
}
.log-card{
  scroll-snap-align:start;
  background:var(--white);border-radius:var(--radius);
  padding:16px;border:3px solid var(--paper-deep);
  display:flex;flex-direction:column;gap:6px;
}
.log-card .log-emoji{font-size:2rem;line-height:1}
.log-card img.log-emoji{width:64px;height:64px;object-fit:contain}
.log-card h3{font-size:1.1rem;margin:0}
.log-card p{margin:0;font-size:.88rem;opacity:.75}
.log-card .log-no{font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sakura-deep)}

/* join */
.join-section{padding:clamp(30px,5vw,60px) clamp(16px,4vw,48px)}
.join-card{
  max-width:680px;margin:0 auto;
  background:var(--white);
  border-radius:calc(var(--radius) + 6px);
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--sakura);
  padding:clamp(24px,4vw,40px);
}
.join-card h2{font-size:clamp(1.5rem,3.2vw,2rem)}
.free-tag{
  display:inline-block;background:var(--matcha);color:var(--ink);
  font-size:.85rem;padding:3px 12px;border-radius:999px;vertical-align:middle;margin-left:6px;
}
.join-perks{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.field-row{display:flex;gap:10px;flex-wrap:wrap}
.field-row input[type=email]{
  flex:1;min-width:210px;
  font:inherit;padding:12px 18px;
  border:3px solid var(--paper-deep);border-radius:999px;
  background:var(--paper);
}
.field-row input[type=email]:focus{border-color:var(--sakura-deep);outline:none}
#nickname{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;opacity:.85;margin-top:14px;cursor:pointer}
.consent input{margin-top:4px;accent-color:var(--sakura-deep)}
.form-msg{min-height:1.4em;font-weight:600;margin:.7em 0 0}
.form-msg.ok{color:#4d7c3a}
.form-msg.err{color:#c2453f}

/* shop */
.shop-section{text-align:center;padding:0 20px clamp(48px,7vw,90px)}
.shop-section h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}

/* footer */
.site-footer{
  background:var(--paper-deep);text-align:center;
  padding:26px 20px;font-size:.9rem;
}
.site-footer p{margin:4px 0}
.fineprint{opacity:.65;font-size:.8rem}

@media (max-width:640px){
  .site-header nav a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pin-pop{animation:none}
  .pin-art{transition:none}
  .btn{transition:none}
}

/* generated map layers */
.cities text{font-family:"Karla",system-ui,sans-serif;font-size:var(--cityfont,11px)}
.cities circle{r:var(--cityr,3px)}
.cities2{opacity:0;transition:opacity .5s ease;pointer-events:none}
#worldMap.show-local .cities2{opacity:1}
.cities2 text{font-family:"Karla",system-ui,sans-serif;font-size:var(--city2font,5.2px);font-weight:600;fill:#26221F;opacity:.75}
.cities2 circle{r:var(--city2r,1.6px);fill:#26221F;opacity:.6}
@media (max-width:640px){.cities{display:none}}

/* pin hover tooltip */
.pin-tip{
  position:absolute;z-index:15;pointer-events:none;
  background:var(--white);border:2.5px solid var(--ink);border-radius:999px;
  padding:5px 14px;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  font-family:"Baloo 2",system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 4px 12px rgba(38,34,31,.18);
  transform:translate(-50%,-100%);
}

/* map zoom controls */
.map-zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:16}
.map-zoom button{
  width:38px;height:38px;border-radius:12px;border:2.5px solid var(--ink);
  background:var(--white);font-size:1.3rem;font-weight:800;line-height:1;cursor:pointer;
  box-shadow:0 3px 0 var(--sakura-deep);font-family:"Baloo 2",system-ui,sans-serif;
}
.map-zoom button:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--sakura-deep)}
#worldMap{touch-action:pan-y} /* page still scrolls over the map */
.map-wrap.is-zoomed #worldMap{touch-action:none} /* zoomed: map owns the gestures */
.map-wrap.is-panning{cursor:grabbing}
.map-wrap.is-zoomed #worldMap{cursor:grab}

/* mobile map */
@media (max-width:640px){
  .map-wrap{height:80dvh;max-height:80vh}
  #worldMap{width:100%;height:100%}
  .continents{filter:none} /* per-frame filter rasterization is what makes phones weep */
  .pin image{filter:none!important}
  .map-zoom button{width:44px;height:44px;font-size:1.5rem}
  .pin-tip{font-size:.68rem;padding:4px 11px;border-width:2px}
  .map-legend{font-size:.72rem;padding:5px 11px}
  .heist-card{padding:14px 16px 12px}
  .heist-card h3{font-size:1.15rem}
}