@charset "utf-8";
/* Page-specific layer for travels.html.
   Rules already provided by site.css / components.css have
   been removed; this is only what is unique to this page. */
@layer components {
header .wrap{max-width:1120px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;align-items:center}
nav a:hover{color:var(--verm)}
.crumb a:hover{color:var(--verm)}
.hero-travel{text-align:center;padding:40px 0 6px}
.hero-travel h1{font-family:'Cormorant Garamond',serif;font-size:46px;font-weight:600;color:var(--indigo)}
.hero-travel p{color:var(--soft);font-style:italic;font-size:19px;margin-top:6px}
.mapframe{position:relative;margin:24px auto 12px;max-width:1080px;border:16px solid #3a2c1a;border-radius:3px;
  box-shadow:0 22px 60px rgba(34,30,25,.4);background:#3a2c1a}
.mapframe .mapimg{display:block;width:100%;height:auto;border-radius:1px}
.pins{position:absolute;inset:16px}
.pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;transition:transform .18s ease;transform-origin:bottom center;z-index:2}
.pin:hover{transform:translate(-50%,-100%) scale(1.07) rotate(-1deg);z-index:9}
.pin .mini{width:120px;background:#fdf8ec;border-radius:2px;padding:5px;box-shadow:0 8px 20px rgba(0,0,0,.45);
  border:1px solid #e6dcc2;transform:rotate(var(--rot))}
.pin .mini img{width:100%;height:70px;object-fit:cover;border-radius:1px;display:block}
.pin .mini .cap{font-family:'Special Elite',cursive;font-size:11px;color:var(--sepia-deep);text-align:center;padding-top:5px}
.pin .tack{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #e8635a, #9e2c1c);box-shadow:0 2px 4px rgba(0,0,0,.5);z-index:3}
.pins .threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.thread{stroke:rgba(168,51,32,.72);stroke-width:1.4}
.tackpt{position:absolute;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);z-index:4;background:radial-gradient(circle at 34% 30%,#e8635a,#be4327);box-shadow:0 2px 5px rgba(0,0,0,.5)}
.tackpt.notail{background:radial-gradient(circle at 34% 30%,#d8a24a,#9c7c36)}
.mini .ph{height:70px;border:1px dashed #c9bda0;border-radius:1px;background:#f6f0e2;color:#a2977f;font-family:'Special Elite',cursive;font-size:9.5px;display:flex;align-items:center;justify-content:center;letter-spacing:.06em}
.pin.soon{opacity:.72;cursor:default}
.pin.soon .mini{box-shadow:0 5px 14px rgba(0,0,0,.32)}
@media(max-width:760px){.mini{width:88px}.mini img,.mini .ph{height:52px}.cap{font-size:9px}.tackpt{width:11px;height:11px}}
.legend{text-align:center;color:var(--soft);font-style:italic;font-size:15px;margin:6px 0 34px}
@media(max-width:760px){.pins{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;padding:20px;inset:auto}.mapframe .mapimg{display:none}.mapframe{border-width:10px;background:#e9dcc0}.pin{position:static;transform:none}.pin:hover{transform:scale(1.04)}.pin .mini{width:100%;transform:none}}
}