@charset "UTF-8";

/* Title artwork only; base cards keep their existing layout and styling. */
.destinations.section { padding-top: 0; }
.destinations-intro {
    --intro-height: clamp(230px, 23vw, 300px);
    --intro-art-height: clamp(200px, 20vw, 260px);
    position: relative;
    min-height: var(--intro-height);
    overflow: hidden;
    background: var(--paper);
    isolation: isolate;
}
.destinations-intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: calc(var(--intro-art-height) * 1416 / 496);
    height: var(--intro-art-height);
    background: url("img/s3_title_bg.jpg") left top / 100% 100% no-repeat;
    mix-blend-mode: multiply;
    mask-image: linear-gradient(90deg, #000 75%, transparent), linear-gradient(0deg, transparent, #000 22%);
    mask-composite: intersect;
    pointer-events: none;
}
.destinations-intro-inner { min-height: var(--intro-height); }
.destinations .destinations-heading {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 25px 12% 0;
    text-align: center;
}
.destinations-heading .eyebrow {
    margin: 0 0 14px;
    color: #477452;
    font: 500 12px/1.5 var(--sans);
    letter-spacing: .16em;
}
.destinations-heading .eyebrow::after {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    margin: 10px auto 0;
    background: #7d9b80;
}
.destinations-heading h2 {
    color: #171e18;
}
.destinations-heading h2 span { color: inherit; }
.destinations .destinations-heading > p:last-child {
    margin: 10px 0 0;
    color: #343f35;
    font: 400 15px/1.9 var(--serif);
    letter-spacing: .035em;
}
.destinations-map {
    position: absolute;
    z-index: 1;
    top: 22px;
    right: -18px;
    width: min(28vw, 340px);
    margin: 0;
}
.destinations-map img { height: auto; }
.destinations-bamboo {
    position: absolute;
    z-index: 2;
    top: 0;
    right: -12px;
    width: 160px;
    height: auto;
    opacity: .7;
    pointer-events: none;
}
/* Remove only the old title/map spacer, not the card styling. */
.destinations .destination-list { margin-top: 0; }

@media (min-width: 921px) {
    .destinations-intro {
        --intro-height: clamp(230px, 23vw, 420px);
        --intro-art-height: clamp(200px, 20vw, 420px);
        overflow: visible;
    }
    /* Anchor the map to the whole section, not the narrower reading column. */
    .destinations .destinations-intro-inner { position: static; }
    .destinations .destinations-heading { padding-top: 85px; }
    .destinations-map {
        right: 24px;
        width: min(29vw, 560px);
    }
    .destinations-map img { opacity: .75; }
    .destinations-bamboo { right: 0; }
}

@media (max-width: 920px) and (min-width: 641px) {
    .destinations .destinations-heading { padding: 35px 26% 0 3%; }
    .destinations .destinations-heading > p:last-child { font-size: 13px; }
    .destinations-map { top: 38px; right: -12px; width: 28vw; }
}
@media (max-width: 640px) {
    .destinations-intro {
        --intro-art-height: 210px;
        min-height: 0;
        overflow: hidden;
    }
    .destinations-intro::before {
        left: -24px;
        opacity: .45;
        mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 95%);
        mask-composite: add;
    }
    .destinations-intro-inner {
        display: grid;
        justify-items: center;
        gap: 20px;
        min-height: 0;
        padding: 40px 0 32px;
    }
    .destinations .destinations-heading { padding: 0; }
    .destinations-heading .eyebrow { font-size: 11px; margin-bottom: 16px; }
    .destinations-heading h2 {
        margin: 0;
    }
    .destinations-heading h2 span { display: block; }
    .destinations .destinations-heading > p:last-child {
        max-width: 300px;
        margin: 16px auto 0;
        padding: 0 8px;
        font-size: 13px;
        line-height: 1.9;
        letter-spacing: .02em;
        text-wrap: pretty;
    }
    .destinations-map {
        position: relative;
        top: auto;
        right: auto;
        width: min(82%, 290px);
        margin: 0;
    }
    .destinations-map img { opacity: .82; }
    .destinations-bamboo { right: -18px; width: 88px; opacity: .45; }
    .destinations .destination-list { gap: 48px; }
    .destinations .destination-card { gap: 24px; }
    .destinations .destination-card + .destination-card {
        padding-top: 32px;
        border-top: 1px solid #d7e1d4;
    }
    .destinations .destination-copy { min-width: 0; }
    .destinations .destination-copy h3 { font-size: clamp(23px, 6.4vw, 28px); line-height: 1.5; }
    .destinations .destination-highlight { font-size: 17px; line-height: 1.75; }
    .destinations .destination-tags { gap: 8px; }
    .destinations .destination-tags li { padding: 6px 12px; font-size: 11px; }
    .destinations .status-note { margin-top: 32px; }
}