/* ============================================================
   Milo — Eighteen
   ============================================================ */

:root{
  --ink:        #0c0a0d;
  --ink-2:      #131016;
  --surface:    #191420;
  --line:       rgba(255,238,214,.13);
  --text:       #f6efe6;
  --muted:      #a2968c;
  --gold:       #e9b949;
  --gold-2:     #f7dd9a;
  --rose:       #e08a6a;
  --gap:        6px;
  --pad:        20px;
  --maxw:       1560px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--ink);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.locked{ overflow:hidden; }

img,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }

::selection{ background:var(--gold); color:#1a1206; }

/* film grain ------------------------------------------------ */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:60; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  33%{ transform:translate(-2%,1.5%) }
  66%{ transform:translate(1.5%,-1%) }
}

/* reveal ---------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   ZUGANG
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:var(--pad);
  background:
    radial-gradient(120% 80% at 50% 30%, #1a1420 0%, var(--ink) 62%);
  transition:opacity .7s var(--ease), visibility .7s;
}
html:not(.gated) .gate{ opacity:0; visibility:hidden; pointer-events:none; }

.gate-box{ text-align:center; width:min(100%,340px); }

.gate-kicker{
  margin:0 0 20px;
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
.gate-num{
  margin:0;
  font-family:"Fraunces",Georgia,serif; font-weight:300;
  font-size:clamp(4.5rem,22vw,7rem); line-height:.9; letter-spacing:-.04em;
  background:linear-gradient(168deg,var(--gold-2) 8%,var(--gold) 48%,#b07d24 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gate-hint{
  margin:22px 0 16px;
  font-size:.78rem; color:#d9cec2; font-weight:300;
}

.gate-input{
  display:block; width:100%;
  padding:16px 0;
  text-align:center;
  font-size:1.7rem; letter-spacing:.7em; text-indent:.7em;
  font-family:"Fraunces",Georgia,serif;
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  transition:border-color .3s, background .3s;
}
.gate-input:focus{ border-color:rgba(233,185,73,.5); background:rgba(233,185,73,.06); }
.gate-input::placeholder{ color:#4b4450; letter-spacing:.5em; }

.gate-btn{
  margin-top:14px; width:100%;
  padding:14px 0; border-radius:999px;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:#1a1206;
  background:linear-gradient(120deg,var(--gold-2),var(--gold));
  transition:filter .3s, transform .2s;
}
.gate-btn:hover{ filter:brightness(1.08); }
.gate-btn:active{ transform:scale(.985); }

.gate-err{
  margin:14px 0 0; min-height:1.2em;
  font-size:.72rem; color:var(--rose);
}
.gate-tip{
  margin:26px 0 0;
  font-size:.62rem; letter-spacing:.14em; color:#6d6470;
}

.gate-box.shake{ animation:shake .45s; }
@keyframes shake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-9px) }
  40%{ transform:translateX(8px) }
  60%{ transform:translateX(-5px) }
  80%{ transform:translateX(3px) }
}

/* ============================================================
   MUSIK-SCHALTER
   ============================================================ */
.music{
  position:fixed; z-index:70;
  top:calc(7px + env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(18,15,21,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--muted);
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  opacity:0; transform:scale(.85); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease),
             color .35s, border-color .35s, background .35s;
}
.music.ready{ opacity:1; transform:none; pointer-events:auto; }
.music:hover{ color:var(--text); border-color:rgba(233,185,73,.34); }
.music:active{ transform:scale(.93); }
.music:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.music svg{
  width:21px; height:21px;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.music .sp-body{ fill:currentColor; stroke:none; }

/* aus: Kreuz statt Schallwellen */
.music .sp-waves{ opacity:0; transition:opacity .3s; }
.music .sp-off{ opacity:.9; transition:opacity .3s; }

.music.on{
  color:var(--gold);
  border-color:rgba(233,185,73,.42);
  background:rgba(233,185,73,.12);
}
.music.on .sp-waves{ opacity:1; }
.music.on .sp-off{ opacity:0; }
.music.on .sp-waves path{ transform-origin:12px 12px; animation:wave 2.2s ease-in-out infinite; }
.music.on .sp-waves path:last-child{ animation-delay:.25s; }
@keyframes wave{
  0%,100%{ opacity:.45 }
  50%    { opacity:1 }
}

/* der Schalter darf die Lightbox nicht verdecken */
body.locked .music{ opacity:0; pointer-events:none; }


/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:calc(var(--pad) + env(safe-area-inset-top)) var(--pad) 90px;
  overflow:hidden;
  isolation:isolate;
}

.hero-bg{ position:absolute; inset:0; z-index:-2; background:#000; }
.hero-bg .slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 2.4s ease-in-out;
  will-change:opacity,transform;
  animation:kb 22s ease-in-out infinite alternate;
}
.hero-bg .slide.on{ opacity:.44; }
@keyframes kb{ from{ transform:scale(1.04) } to{ transform:scale(1.16) } }

.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(12,10,13,.18) 0%, rgba(12,10,13,.72) 55%, var(--ink) 100%),
    linear-gradient(180deg, rgba(12,10,13,.85) 0%, transparent 26%, transparent 60%, var(--ink) 100%);
}

.hero-inner{ text-align:center; max-width:820px; position:relative; }

.kicker{
  margin:0 0 22px;
  font-size:clamp(.58rem,2.6vw,.7rem);
  letter-spacing:clamp(.2em,1.2vw,.42em);
  text-transform:uppercase;
  color:var(--gold); font-weight:500;
  text-wrap:balance;
  transition-delay:.05s;
}

.bignum{
  margin:0;
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-size:clamp(7.5rem, 40vw, 20rem);
  line-height:.82;
  letter-spacing:-.04em;
  background:linear-gradient(168deg, var(--gold-2) 8%, var(--gold) 46%, #b07d24 92%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 14px 44px rgba(233,185,73,.16));
  transition-delay:.12s;
}
.bignum span{ display:inline-block; }

.hero-name{
  margin:18px 0 0;
  font-size:clamp(.95rem,4.6vw,1.5rem);
  letter-spacing:.36em; text-indent:.36em;
  font-weight:300; color:var(--text);
  transition-delay:.2s;
}

.rule{
  width:64px; height:1px; margin:30px auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition-delay:.26s;
}

.hero-sub{
  margin:0; font-size:clamp(.92rem,3.4vw,1.08rem);
  color:#e2d7ca; font-weight:300;
  transition-delay:.32s;
}
.dim{ color:var(--muted); }
#heroSpan{ display:inline-block; margin-top:10px; font-size:.78rem; letter-spacing:.22em; }

.scroll-cue{
  position:absolute; bottom:calc(26px + env(safe-area-inset-bottom)); left:50%;
  transform:translateX(-50%);
  width:26px; height:44px; border:1px solid rgba(246,239,230,.28);
  border-radius:14px; display:grid; justify-items:center; padding-top:8px;
}
.scroll-cue span{
  width:3px; height:8px; border-radius:2px; background:var(--gold);
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{ 0%{opacity:0;transform:translateY(0)} 35%{opacity:1} 75%{opacity:0;transform:translateY(15px)} 100%{opacity:0} }

/* ============================================================
   STORY + STATS
   ============================================================ */
.story{
  max-width:1000px; margin:0 auto;
  padding:clamp(64px,13vw,140px) var(--pad) clamp(40px,8vw,70px);
  text-align:center;
}
.lede{
  margin:0 auto;
  max-width:33ch;
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-size:clamp(1.22rem,5.4vw,2.15rem);
  line-height:1.42; letter-spacing:-.01em;
  color:#efe5d8;
}

.firstframe{
  margin:26px 0 0;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); opacity:.85;
  transition-delay:.1s;
}

.stats{
  margin:clamp(30px,6vw,54px) 0 0;
  display:grid; gap:2px;
  grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);
  background:var(--line);
  border-radius:14px; overflow:hidden;
}
.stats > div{
  background:var(--ink);
  padding:22px 10px 20px;
}
.stats dt{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.7rem,7vw,2.5rem);
  font-weight:400; line-height:1;
  color:var(--gold);
}
.stats dd{
  margin:9px 0 0;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   YEAR RAIL
   ============================================================ */
.rail{
  position:sticky; top:0; z-index:40;
  background:rgba(12,10,13,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.rail-track{
  display:flex; gap:4px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none;
  /* rechts extra Luft, damit die letzte Jahreszahl nicht
     unter dem Lautsprecher-Symbol endet */
  padding:9px 56px 9px max(var(--pad),12px);
  -webkit-overflow-scrolling:touch;
}
.rail-track::-webkit-scrollbar{ display:none; }
.rail-btn{
  flex:0 0 auto;
  padding:7px 14px; border-radius:999px;
  font-size:.8rem; font-variant-numeric:tabular-nums;
  color:var(--muted);
  border:1px solid transparent;
  transition:color .3s, background .3s, border-color .3s;
  white-space:nowrap;
}
.rail-btn:hover{ color:var(--text); }
.rail-btn.active{
  color:var(--gold); border-color:rgba(233,185,73,.4);
  background:rgba(233,185,73,.09);
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-root{ padding:0 0 clamp(50px,9vw,90px); }

.yearsec{ padding:clamp(46px,9vw,86px) max(var(--pad),12px) 0; scroll-margin-top:58px; }

.year-head{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 clamp(18px,3.5vw,26px);
  max-width:var(--maxw); margin-inline:auto;
}
.year-num{
  margin:0;
  font-family:"Fraunces",Georgia,serif;
  font-weight:300; letter-spacing:-.02em;
  font-size:clamp(2.1rem,10vw,3.6rem);
  line-height:1;
  color:var(--text);
}
.year-num em{ font-style:normal; color:var(--gold); }
.year-line{ flex:1; height:1px; background:var(--line); }
.year-count{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}

.grid{
  display:flex; flex-wrap:wrap; gap:var(--gap);
  max-width:var(--maxw); margin-inline:auto;
}

.cell{
  position:relative; overflow:hidden;
  border-radius:5px;
  background:var(--surface);
  cursor:pointer;
  opacity:0;
  transform:scale(.985);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.cell.in{ opacity:1; transform:none; }
.cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;
  filter:saturate(.94);
}
.cell::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5));
  opacity:0; transition:opacity .45s;
}
.cell:hover img{ transform:scale(1.045); filter:saturate(1.06); }
.cell:hover::after{ opacity:1; }
.cell:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.badge{
  position:absolute; z-index:2; top:9px; left:9px;
  font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px;
  background:rgba(12,10,13,.72);
  border:1px solid rgba(246,239,230,.2);
  backdrop-filter:blur(6px);
}
.badge-first{
  background:rgba(233,185,73,.94);
  border-color:transparent;
  color:#1a1206; font-weight:600;
}

.play{
  position:absolute; z-index:2; inset:0; margin:auto;
  width:52px; height:52px; border-radius:50%;
  background:rgba(12,10,13,.5);
  border:1px solid rgba(246,239,230,.55);
  backdrop-filter:blur(4px);
  display:grid; place-items:center;
  pointer-events:none;
}
.play::after{
  content:''; margin-left:3px;
  border-left:14px solid var(--text);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}

.cap{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:12px 12px 10px;
  font-size:.68rem; color:#f0e7db;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s, transform .4s;
  pointer-events:none;
}
.cell:hover .cap{ opacity:1; transform:none; }
.cap b{ font-weight:500; }
.cap span{ color:#c9bcae; }

.loading{ display:flex; gap:7px; justify-content:center; padding:90px 0; }
.loading span{
  width:7px; height:7px; border-radius:50%; background:var(--gold); opacity:.3;
  animation:pulse 1.3s infinite;
}
.loading span:nth-child(2){ animation-delay:.18s }
.loading span:nth-child(3){ animation-delay:.36s }
@keyframes pulse{ 0%,100%{opacity:.22;transform:scale(.85)} 50%{opacity:1;transform:scale(1)} }

/* ============================================================
   MAP
   ============================================================ */
.mapsection{ padding:clamp(50px,10vw,110px) max(var(--pad),12px) clamp(40px,8vw,80px); }
.sec-head{ max-width:var(--maxw); margin:0 auto clamp(20px,4vw,34px); text-align:center; }
.sec-head h2{
  margin:0;
  font-family:"Fraunces",Georgia,serif; font-weight:300;
  font-size:clamp(1.7rem,7.5vw,3rem); letter-spacing:-.02em;
}
.sec-head p{ margin:12px 0 0; font-size:.85rem; }

.mapwrap{
  position:relative;
  /* Leaflet's panes/controls use z-index 400-800. Without a stacking context here
     they escape and paint over the sticky rail and the lightbox. */
  z-index:0; isolation:isolate;
  max-width:var(--maxw); margin:0 auto;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--ink-2);
}
#map{ height:min(62svh,560px); width:100%; background:#0d0b10; }
.leaflet-container{ font-family:inherit; background:#0d0b10; }
.leaflet-control-attribution{
  background:rgba(12,10,13,.72)!important; color:#8b8078!important; font-size:9px!important;
}
.leaflet-control-attribution a{ color:#a2968c!important; }
.leaflet-bar a{ background:#191420!important; color:#f6efe6!important; border-color:var(--line)!important; }
.leaflet-bar a:hover{ background:#241c2e!important; }

.pin{
  width:100%; height:100%; border-radius:50%;
  border:2px solid var(--gold);
  background-size:cover; background-position:center;
  box-shadow:0 3px 14px rgba(0,0,0,.6);
  transition:transform .25s var(--ease);
}
.pin:hover{ transform:scale(1.18); }

.leaflet-tooltip.pin-tip{
  background:rgba(12,10,13,.92); color:var(--text);
  border:1px solid var(--line); border-radius:6px;
  font-size:.68rem; letter-spacing:.04em; padding:5px 9px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.leaflet-tooltip.pin-tip::before{ border-top-color:rgba(12,10,13,.92); }

.map-hint{
  position:absolute; z-index:500; left:12px; bottom:12px;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 12px; border-radius:999px;
  background:rgba(12,10,13,.8); border:1px solid var(--line);
  color:var(--muted); backdrop-filter:blur(8px);
  transition:opacity .5s;
}
.map-hint.gone{ opacity:0; pointer-events:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  text-align:center;
  padding:clamp(50px,10vw,100px) var(--pad) calc(60px + env(safe-area-inset-bottom));
}
.foot .rule{ margin-bottom:34px; }
.foot-big{
  margin:0;
  font-family:"Fraunces",Georgia,serif; font-weight:300;
  font-size:clamp(1.7rem,8vw,3.1rem); letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--gold-2),var(--gold) 55%,var(--rose));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.foot-sub{ margin:14px 0 0; color:var(--muted); font-size:.9rem; font-weight:300; }

/* ---- handgeschriebener Gruß ---- */
.signature{
  margin:clamp(46px,9vw,78px) auto clamp(34px,6vw,52px);
  display:inline-block;
  color:#f2e6d4;
}
/* die leichte Schräglage muss die Einblend-Animation überleben */
.signature.reveal    { transform:translateY(22px) rotate(-2.2deg); }
.signature.reveal.in { transform:rotate(-2.2deg); }
.sig-line,.sig-name{
  margin:0;
  font-family:"Caveat","Segoe Script","Bradley Hand",cursive;
  font-weight:400;
  line-height:1.05;
  letter-spacing:.005em;
}
.sig-line{
  font-size:clamp(1.6rem,7vw,2.5rem);
  opacity:.92;
}
.sig-name{
  margin-top:6px;
  font-weight:600;
  font-size:clamp(2.1rem,9.5vw,3.4rem);
  color:var(--gold-2);
  padding-left:.55em;
  text-shadow:0 2px 18px rgba(233,185,73,.16);
}
.sig-flourish{
  display:block;
  width:clamp(150px,44vw,230px);
  height:auto;
  margin:2px 0 0 auto;
  fill:none;
  stroke:var(--gold);
  stroke-width:2;
  stroke-linecap:round;
  opacity:.5;
  stroke-dasharray:230;
  stroke-dashoffset:230;
}
.signature.in .sig-flourish{
  animation:draw 1.5s .35s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }
.totop{
  display:inline-block; text-decoration:none;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); padding:11px 20px;
  border:1px solid var(--line); border-radius:999px;
  transition:color .3s, border-color .3s;
}
.totop:hover{ color:var(--gold); border-color:rgba(233,185,73,.45); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(7,6,8,.97);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  display:grid;
  grid-template-rows:1fr auto;
  opacity:0; transition:opacity .32s var(--ease);
}
.lb[hidden]{ display:none; }
.lb.on{ opacity:1; }

.lb-stage{
  position:relative;
  display:grid; place-items:center;
  min-height:0;                 /* let the image shrink inside the 1fr row */
  padding:calc(52px + env(safe-area-inset-top)) 10px 6px;
  overflow:hidden;
  touch-action:pan-y;
}
.lb-stage img,.lb-stage video{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 26px 90px rgba(0,0,0,.72);
  animation:lbin .5s var(--ease);
}
@keyframes lbin{ from{ opacity:0; transform:scale(.975) } to{ opacity:1; transform:none } }

.lb-close{
  position:absolute; z-index:3;
  top:calc(10px + env(safe-area-inset-top)); right:10px;
  width:44px; height:44px; border-radius:50%;
  font-size:1.6rem; line-height:1;
  color:var(--text);
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  display:grid; place-items:center;
}
.lb-close:hover{ background:rgba(255,255,255,.14); }

.lb-nav{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:46px; height:66px;
  font-size:2rem; line-height:1;
  color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:8px;
  display:none; place-items:center;
}
.lb-nav:hover{ background:rgba(255,255,255,.13); }
.lb-prev{ left:12px } .lb-next{ right:12px }

.lb-bar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:14px max(var(--pad),14px) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:rgba(12,10,13,.6);
}
.lb-meta{ min-width:0; }
.lb-date{
  margin:0;
  font-family:"Fraunces",Georgia,serif; font-weight:400;
  font-size:1.05rem; letter-spacing:-.01em;
}
.lb-info{
  margin:4px 0 0; font-size:.72rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lb-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.lb-count{
  font-size:.68rem; color:var(--muted); font-variant-numeric:tabular-nums;
  letter-spacing:.1em;
}
.lb-mapbtn{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted);
  transition:color .3s,border-color .3s;
}
.lb-mapbtn.on,.lb-mapbtn:hover{ color:var(--gold); border-color:rgba(233,185,73,.45); }

.lb-map{
  height:38svh; width:100%;
  border-top:1px solid var(--line);
  background:#0d0b10;
}
.lb-map[hidden]{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:560px){
  :root{ --gap:8px; --pad:32px; }
  .stats{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width:900px){
  :root{ --gap:10px; --pad:48px; }
  .stats{ grid-template-columns:repeat(6,1fr); }
  .stats > div{ padding:30px 12px 26px; }
  .lb-nav{ display:grid; }
  .lb-stage{ padding:64px 76px 10px; }
  .lb-map{ height:300px; }
  .year-head{ gap:22px; }
}

@media (min-width:1200px){
  .lb{ grid-template-columns:1fr; }
}

/* pointer-coarse: no hover effects that trap taps */
@media (hover:none){
  .cell:hover img{ transform:none; }
  .cell::after{ opacity:0; }
  .cell .cap{
    opacity:1; transform:none;
    padding:22px 8px 6px;
    font-size:.6rem; letter-spacing:.01em;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));
  }
}

/* on the narrowest tiles the place name has no room — the lightbox has it */
@media (max-width:640px){
  .cap span{ display:none; }
  .badge-first{ font-size:.5rem; padding:3px 6px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .reveal{ opacity:1; transform:none; }
  .signature.reveal, .signature.reveal.in{ transform:rotate(-2.2deg); }
  .sig-flourish{ stroke-dashoffset:0; }
  .cell{ opacity:1; transform:none; }
  .grain{ display:none; }
}