:root {
    --paper:  #f4ecdc;
    --paper-2:#e9dec6;
    --ink:    #2b2118;
    --brown:  #6b4a2f;
    --brown-d:#4a321f;
    --grey:   #8a8478;
    --line:   #c9bb9d;
    --outline:#dcc29a;   /* light brown halo around the site title */
    --pin:      #b8322a; /* post-office red for the map points */
    --pin-hover:#d6402f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--paper);
    color: var(--ink);
    font-family: "IM Fell English", Georgia, serif;
}

/* ---------- Map ---------- */

#map {
    position: fixed;
    inset: 0;
    background: var(--paper-2);
}

/* Old-print look: warm sepia over the Swiss topographic tiles */
#map .leaflet-tile-pane {
    filter: sepia(.8) saturate(.85) contrast(.92) brightness(1.04);
}

/* Soft aged edges */
.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
    box-shadow: inset 0 0 120px rgba(74, 50, 31, .45), inset 0 0 0 10px rgba(244, 236, 220, .55);
}

.site-title {
    position: fixed;
    top: 14px;
    left: 22px;
    margin: 0;
    z-index: 600;
    font-family: "Pinyon Script", cursive;
    font-weight: 500;
    font-size: clamp(60px, 5.5vw, 80px);
    line-height: 1.1;
    color: var(--brown-d);
    /* Thicken the thin calligraphy with a stroke in the same colour... */
    -webkit-text-stroke: 1.6px var(--brown-d);
    /* ...then wrap it in a light-brown outline so it stands out from the map labels behind */
    text-shadow:
        -4px -4px 0 var(--outline), 4px -4px 0 var(--outline),
        -4px  4px 0 var(--outline), 4px  4px 0 var(--outline),
         0   -3px 0 var(--outline), 0    3px 0 var(--outline),
        -3px  0   0 var(--outline), 3px  0   0 var(--outline),
         0 0 10px var(--outline), 0 0 18px rgba(244, 236, 220, .9);
    pointer-events: none;
}

/* Leaflet controls, repainted */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 1px 4px rgba(43, 33, 24, .35) !important;
}
.leaflet-control-zoom a {
    background: var(--paper) !important;
    color: var(--brown-d) !important;
    border-color: var(--line) !important;
    font-family: "IM Fell English", serif;
}
.leaflet-control-zoom a:hover { background: var(--paper-2) !important; }
.leaflet-control-attribution {
    background: rgba(244, 236, 220, .8) !important;
    font-size: 10px;
    color: var(--brown-d);
}
.leaflet-control-attribution a { color: var(--brown-d); }
.leaflet-container { font-family: "IM Fell English", serif; }

/* ---------- Markers (little brown postcard pins) ---------- */

.pin {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
}
.pin span {
    display: block;
    width: 24px;
    height: 24px;
    margin: 4px;
    background: var(--pin);                 /* post-office red: stands out on the sepia map */
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 1.5px var(--brown-d), 0 3px 7px rgba(0, 0, 0, .55);
    transform: rotate(-6deg);
    transition: transform .15s ease, background .15s ease;
    position: relative;
}
.pin span::before {            /* the "stamp" */
    content: "";
    position: absolute;
    top: 2px; right: 2px;
    width: 8px; height: 9px;
    background: var(--paper);
}
.pin span::after {             /* lines of text */
    content: "";
    position: absolute;
    left: 3px; bottom: 5px;
    width: 11px; height: 2px;
    background: var(--paper);
    box-shadow: 0 -4px 0 var(--paper);
}
.pin:hover span { transform: rotate(3deg) scale(1.2); background: var(--pin-hover); }

/* ---------- Modal ---------- */

.modal[hidden] { display: none; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(43, 33, 24, .6);
    backdrop-filter: blur(2px);
}

.postcard {
    position: relative;
    width: min(900px, 100%);
    max-height: 100%;
    overflow: auto;
    background: var(--paper);
    padding: 22px 26px 18px;
    border: 1px solid var(--line);
    outline: 8px solid var(--paper);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
    animation: pop .22s ease-out;
}
@keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } }

.postcard h2 {
    margin: 0 36px 14px 0;
    font-family: "Pinyon Script", cursive;
    font-weight: 400;
    font-size: clamp(26px, 4vw, 38px);
    color: var(--brown-d);
}

.modal-close {
    position: absolute;
    top: 8px; right: 12px;
    background: none;
    border: 0;
    font-size: 34px;
    line-height: 1;
    color: var(--brown-d);
    cursor: pointer;
}
.modal-close:hover { color: var(--ink); }

/* ---------- Before / after slider ---------- */

.compare {
    --pos: 50%;
    position: relative;
    width: 100%;
    background: var(--paper-2);
    border: 1px solid var(--brown);
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
    cursor: ew-resize;
    max-height: 68vh;
}
.compare-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.compare-new { position: relative; }          /* sets the box size */
.compare-old {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
    filter: sepia(.35) contrast(1.02);
}

.compare-handle {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--pos);
    width: 3px;
    margin-left: -1.5px;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--brown-d);
    outline: none;
}
.grip {
    position: absolute;
    top: 50%; left: 50%;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--brown-d);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.grip::before, .grip::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
}
.grip::before { left: 5px;  border-right-color: var(--brown-d); border-left: 0; }
.grip::after  { right: 5px; border-left-color:  var(--brown-d); border-right: 0; }
.compare-handle:focus-visible .grip { outline: 2px dashed var(--brown); outline-offset: 3px; }

.captions {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 10px;
    font-size: 16px;
    font-style: italic;
    color: var(--brown-d);
}
.captions p { margin: 0; flex: 1; }
.captions p:last-child { text-align: right; }
.captions p:empty { display: none; }

@media (max-width: 560px) {
    .postcard { padding: 16px 14px 12px; }
    .captions { flex-direction: column; gap: 4px; }
    .captions p:last-child { text-align: left; }
    .vignette { box-shadow: inset 0 0 70px rgba(74, 50, 31, .4); }
}