/* ============================================================
   ТЕТЯНА · Маршрут — scroll-tour, old-money skin
   (reuses palette tokens from site.css)
   ============================================================ */
.tour{--map-filter:grayscale(1) sepia(.32) brightness(1.03) contrast(.92) saturate(.85)}
.tour body{overflow-x:hidden}

/* ---------- intro ---------- */
.t-intro{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px clamp(22px,5vw,64px) 60px}
.t-intro .k,.t-outro .k{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--camel)}
.t-intro .k{margin-bottom:26px}
.t-intro h1{font-family:var(--serif);font-weight:300;color:var(--ink);font-size:clamp(2.2rem,5vw,4rem);line-height:1.12;letter-spacing:-.01em;max-width:17ch;text-wrap:balance}
.t-intro h1 em{font-style:italic;color:var(--green)}
.t-intro>p{margin-top:24px;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-soft);max-width:52ch;line-height:1.6}
.t-trip{margin-top:22px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--camel);border:1px solid var(--hair);border-radius:2px;padding:9px 18px}
.t-hint{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink-mute);font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.t-hint i{display:block;width:1px;height:46px;background:var(--camel);transform-origin:top;animation:tcue 2.4s ease-in-out infinite}
@keyframes tcue{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}
.t-chips{margin-top:30px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:640px}
.t-chips span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--hair);border-radius:2px;padding:7px 13px}

/* ---------- start picker ---------- */
.startbox{margin-top:30px;width:min(600px,94vw);background:var(--bg);border:1px solid var(--hair);border-radius:3px;padding:22px;text-align:left}
.sb-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--camel);margin-bottom:14px}
.sb-row{display:flex;gap:10px;flex-wrap:wrap}
.sb-geo{flex:0 0 auto;border:1px solid var(--ink);background:none;color:var(--ink);font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;padding:12px 16px;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease)}
.sb-geo:hover{background:var(--green);color:var(--bg);border-color:var(--green)}
.sb-search{flex:1 1 220px;display:flex;gap:8px;min-width:200px}
.sb-search input{flex:1;border:none;border-bottom:1px solid var(--hair);background:none;padding:11px 2px;font-family:var(--sans);font-weight:300;font-size:15px;color:var(--ink);outline:none}
.sb-search input:focus{border-color:var(--camel)}
.sb-search button{border:1px solid var(--hair);background:none;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-radius:2px;padding:0 16px;cursor:pointer;transition:border-color .4s var(--ease),color .4s var(--ease)}
.sb-search button:hover{border-color:var(--camel);color:var(--ink)}
.sb-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sb-presets b{cursor:pointer;font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--ink-soft);background:none;border:1px solid var(--hair);border-radius:2px;padding:8px 13px;transition:.3s var(--ease)}
.sb-presets b:hover{border-color:var(--camel);color:var(--ink)}
.sb-presets b.on{background:var(--green);color:var(--bg);border-color:var(--green)}
.sb-current{margin-top:15px;font-size:13px;color:var(--ink-mute)}
.sb-current b{color:var(--camel);font-weight:400}
.sb-msg{margin-top:8px;font-size:12.5px;color:var(--ink-mute);min-height:1.1em;font-style:italic;font-family:var(--serif)}

/* ---------- scroll stage ---------- */
.track{position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg-2)}
#map{position:absolute;inset:0;width:100%;height:100%;background:var(--bg-2);transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
.leaflet-container{font-family:var(--sans);background:var(--bg-2)}
.leaflet-pane.base-pane{filter:var(--map-filter)}
.leaflet-control-attribution{font-size:10px;background:rgba(244,241,234,.75);color:var(--ink-mute)}
.leaflet-control-attribution a{color:var(--camel)}
.vign{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 240px 60px rgba(244,241,234,.55);z-index:340}

/* markers */
.m-metro{width:38px;height:38px;border-radius:50%;background:var(--bg);border:2px solid var(--green);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;color:var(--green);font-size:17px;box-shadow:0 6px 16px rgba(20,20,15,.18)}
.m-pin{position:relative;width:40px;height:40px}
.m-pin .p{position:absolute;left:50%;top:0;width:34px;height:34px;background:var(--green);border-radius:50% 50% 50% 0;transform:translateX(-50%) rotate(-45deg);box-shadow:0 8px 18px rgba(20,20,15,.35);border:2px solid var(--bg)}
.m-pin .n{position:absolute;left:50%;top:8px;width:22px;height:22px;background:var(--bg);border-radius:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-size:13px;color:var(--green)}
.m-home{width:40px;height:40px;border-radius:50%;background:var(--camel);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--bg);font-size:16px;box-shadow:0 8px 18px rgba(20,20,15,.3)}
.m-poi{width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--camel)}
.lbl{background:var(--bg);color:var(--ink);border:1px solid var(--hair);border-radius:2px;padding:5px 11px;font-size:12px;letter-spacing:.04em;box-shadow:0 4px 12px rgba(20,20,15,.12)}
.lbl.jk{background:var(--green);color:var(--bg-2);border-color:var(--green)}
.leaflet-tooltip-top.lbl:before{border-top-color:var(--hair)}
.leaflet-tooltip-top.lbl.jk:before{border-top-color:var(--green)}
.poi-lbl{background:rgba(244,241,234,.94);border:1px solid var(--hair);border-radius:2px;padding:3px 9px;color:var(--ink-soft);font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ---------- dive overlays (residence plates) ---------- */
#dives{position:absolute;inset:0;pointer-events:none;z-index:360;display:flex;align-items:center;justify-content:center}
.dive{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;will-change:opacity}
.dive-frame{position:relative;width:min(92vw,940px);height:min(80vh,620px);border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:linear-gradient(158deg,#EFEAE0 0%,#E4DDCF 100%);will-change:transform,filter;box-shadow:0 40px 100px rgba(20,20,15,.28)}
.dive-img{position:absolute;inset:0;background-size:cover;background-position:center}
.dive-plate{position:absolute;inset:0}
.dive-plate svg{position:absolute;inset:0;width:100%;height:100%}
.dive-name{position:absolute;left:0;right:0;top:12%;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,3.4vw,2.8rem);color:rgba(42,59,49,.35)}
.dive-card{position:absolute;left:clamp(22px,4vw,44px);right:clamp(22px,4vw,44px);bottom:clamp(22px,4vh,40px);will-change:transform,opacity}
.dive-card .num{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--camel);margin-bottom:12px}
.dive-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--ink);line-height:1.1}
.dive-card .loc{margin-top:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.dive-card .row{margin-top:18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dive-card .teaser{font-size:.95rem;color:var(--ink-soft)}
.dive-card .cta{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:12px 22px;transition:background .5s var(--ease),color .5s var(--ease)}
.dive-card .cta:hover{background:var(--green);color:var(--bg);border-color:var(--green)}

/* ---------- HUD ---------- */
.hud{position:absolute;inset:0;pointer-events:none;z-index:400}
.counter{position:absolute;top:clamp(84px,12vh,104px);right:24px;background:var(--bg);border:1px solid var(--hair);border-radius:2px;padding:11px 16px;text-align:right}
.counter .big{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.counter .sm{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:6px}
.startpill{position:absolute;top:clamp(84px,12vh,104px);left:24px;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--hair);border-radius:2px;padding:9px 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);transition:border-color .4s var(--ease)}
.startpill:hover{border-color:var(--camel)}
.caps{position:absolute;left:0;right:0;bottom:74px;display:flex;justify-content:center;pointer-events:none}
.cap{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);background:rgba(244,241,234,.92);border:1px solid var(--hair);border-radius:2px;padding:14px 26px;text-align:center}
.cap.on{opacity:1;transform:none}
.cap .ck{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--camel);margin-bottom:7px}
.cap .ct{font-family:var(--serif);font-weight:400;font-size:clamp(18px,3vw,30px);line-height:1.06;color:var(--ink)}
.pbar{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(207,198,180,.5)}
.pbar i{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--camel);display:block}
.dots{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:flex;gap:10px}
.dots b{width:6px;height:6px;border-radius:50%;background:var(--hair);transition:.4s var(--ease)}
.dots b.on{background:var(--camel);transform:scale(1.4)}
.dots b.done{background:var(--green)}

/* ---------- outro ---------- */
.t-outro{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--green-dark);color:var(--bg-2);padding:60px clamp(22px,5vw,64px)}
.t-outro .k{color:var(--brass);margin-bottom:20px}
.t-outro h2{font-family:var(--serif);font-weight:300;color:var(--bg);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.1;letter-spacing:-.01em;max-width:18ch;text-wrap:balance}
.t-outro h2 em{font-style:italic;color:var(--brass)}
.t-outro>p{margin-top:22px;font-size:clamp(1rem,1.5vw,1.15rem);color:#CDBFA9;max-width:56ch;line-height:1.6}
.t-obtn{margin-top:34px;display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* force mode for static capture (?p=) */
.tour body.force .t-intro,.tour body.force .t-outro,.tour body.force .header,.tour body.force .footer,.tour body.force .cnc-launch,.tour body.force .cnc-panel{display:none}
.tour body.force .track{height:100svh!important}
.tour body.force .stage{position:fixed;inset:0}

@media (max-width:620px){
  .counter,.startpill{top:76px}
  .dive-frame{height:min(74vh,560px)}
}
@media (prefers-reduced-motion:reduce){.t-hint i{animation:none}}

/* ---------- нічний режим ---------- */
html.night .t-outro{color:var(--ink-soft)}
html.night .t-outro h2{color:var(--ink)}
html.night .leaflet-container,html.night .stage,html.night #map{background:#12140C}
html.night .leaflet-pane.base-pane{filter:grayscale(1) invert(.9) sepia(.5) hue-rotate(4deg) saturate(1.2) brightness(.9) contrast(.9)}
html.night .vign{box-shadow:inset 0 0 240px 70px rgba(18,20,12,.62)}
html.night .leaflet-control-attribution{background:rgba(18,20,12,.75);color:var(--ink-mute)}
/* dive лишається кремовою «підсвіченою» плитою — тримаємо текст темним */
html.night .dive-card h3{color:#1C1B18}
html.night .dive-card .loc{color:#6B675C}
html.night .dive-card .teaser{color:#3A3A32}
html.night .dive-card .cta{color:#1C1B18;border-color:#1C1B18}
html.night .dive-card .cta:hover{background:#2A3B31;color:#F4F1EA;border-color:#2A3B31}