/*
 * tour-v5.css — Tour Detail V5 stylesheet (STATIC, hand-edited)
 * ─────────────────────────────────────────────────────────────────────────
 * THIS IS THE SOURCE. Edit this file directly — no build step, no Tailwind
 * compile. Change a rule, refresh the page, done. It is served straight to
 * the browser (linked from resources/views/page/tour-detail-v5.blade.php with
 * a ?v=filemtime cache-bust), so edits appear immediately.
 *
 * HISTORY: V5 was originally authored in Tailwind v4 (source kept as
 * resources/css/tour-v5.tailwind-source.css.bak for reference only). On
 * 2026-07-14 that compiled output was frozen into this plain, self-contained
 * stylesheet so the page is easy to redesign without fighting Tailwind's
 * purge, prefix, and manual build. Do NOT run `npm run build:tour-v5` — it no
 * longer exists, and running the old command would overwrite this file.
 *
 * STRUCTURE:
 *   1. `@layer properties` + the `.tw\:*` rules below are the frozen Tailwind
 *      utilities that the markup still references (e.g. class="tw:flex").
 *      They are ordinary CSS now — keep them, extend them, or replace a
 *      `tw:*` class in the blade with a semantic `.tv5-*` class over time.
 *   2. The `.tv5-*` rules (search "tv5-") are the hand-written editorial
 *      components (facts card, hero, map pins, accommodation grid, …).
 *
 * SCOPE: everything is scoped under `.tour-v5` (the page's <main>) so the
 * shared Bootstrap header/footer stay untouched. No preflight is included.
 *
 * SEO: this file only styles. It changes nothing in the DOM, headings, text,
 * meta, or URLs — safe to edit freely without affecting search ranking.
 */

@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *,:before,:after,::backdrop {
            --tw-translate-x:0;
            --tw-translate-y:0;
            --tw-translate-z:0;
            --tw-border-style:solid;
            --tw-gradient-position:initial;
            --tw-gradient-from:#0000;
            --tw-gradient-via:#0000;
            --tw-gradient-to:#0000;
            --tw-gradient-stops:initial;
            --tw-gradient-via-stops:initial;
            --tw-gradient-from-position:0%;
            --tw-gradient-via-position:50%;
            --tw-gradient-to-position:100%;
            --tw-leading:initial;
            --tw-font-weight:initial;
            --tw-tracking:initial;
            --tw-ordinal:initial;
            --tw-slashed-zero:initial;
            --tw-numeric-figure:initial;
            --tw-numeric-spacing:initial;
            --tw-numeric-fraction:initial;
            --tw-shadow:0 0 #0000;
            --tw-shadow-color:initial;
            --tw-shadow-alpha:100%;
            --tw-inset-shadow:0 0 #0000;
            --tw-inset-shadow-color:initial;
            --tw-inset-shadow-alpha:100%;
            --tw-ring-color:initial;
            --tw-ring-shadow:0 0 #0000;
            --tw-inset-ring-color:initial;
            --tw-inset-ring-shadow:0 0 #0000;
            --tw-ring-inset:initial;
            --tw-ring-offset-width:0px;
            --tw-ring-offset-color:#fff;
            --tw-ring-offset-shadow:0 0 #0000;
            --tw-backdrop-blur:initial;
            --tw-backdrop-brightness:initial;
            --tw-backdrop-contrast:initial;
            --tw-backdrop-grayscale:initial;
            --tw-backdrop-hue-rotate:initial;
            --tw-backdrop-invert:initial;
            --tw-backdrop-opacity:initial;
            --tw-backdrop-saturate:initial;
            --tw-backdrop-sepia:initial;
            --tw-duration:initial;
            --tw-content:""
        }
    }
}
:root,:host {
    --tw-font-serif:"Playfair Display", Georgia, "Times New Roman", serif;
    --tw-color-black:#000;
    --tw-color-white:#fff;
    --tw-spacing:.25rem;
    --tw-container-xl:36rem;
    --tw-container-2xl:42rem;
    --tw-container-3xl:48rem;
    --tw-container-4xl:56rem;
    --tw-container-5xl:64rem;
    --tw-text-sm:.875rem;
    --tw-text-sm--line-height:calc(1.25 / .875);
    --tw-text-base:1rem;
    --tw-text-base--line-height:calc(1.5 / 1);
    --tw-text-lg:1.125rem;
    --tw-text-lg--line-height:calc(1.75 / 1.125);
    --tw-text-xl:1.25rem;
    --tw-text-xl--line-height:calc(1.75 / 1.25);
    --tw-text-2xl:1.5rem;
    --tw-text-2xl--line-height:calc(2 / 1.5);
    --tw-text-3xl:1.875rem;
    --tw-text-3xl--line-height:calc(2.25 / 1.875);
    --tw-text-4xl:2.25rem;
    --tw-text-4xl--line-height:calc(2.5 / 2.25);
    --tw-text-5xl:3rem;
    --tw-text-5xl--line-height:1;
    --tw-font-weight-light:300;
    --tw-font-weight-normal:400;
    --tw-font-weight-medium:500;
    --tw-font-weight-semibold:600;
    --tw-tracking-tight:-.025em;
    --tw-leading-snug:1.375;
    --tw-leading-relaxed:1.625;
    --tw-radius-sm:.25rem;
    --tw-animate-bounce:bounce 1s infinite;
    --tw-blur-sm:8px;
    --tw-default-transition-duration:.15s;
    --tw-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
    --tw-color-ivory:#faf9f6;
    --tw-color-parchment:#f2efe8;
    --tw-color-ink:#201f1d;
    --tw-color-stone:#5b574d;
    --tw-color-mist:#8b877c;
    --tw-color-line:#e4e0d5;
    --tw-color-olive-300:#a9b58f;
    --tw-color-olive-500:#6b8051;
    --tw-color-olive-700:#4a5e2f;
    --tw-color-olive-900:#33421f;
    --tw-color-gold:#b9995b
}
.tw\:pointer-events-none {
    pointer-events:none
}
.tw\:absolute {
    position:absolute
}
.tw\:fixed {
    position:fixed
}
.tw\:relative {
    position:relative
}
.tw\:sticky {
    position:sticky
}
.tw\:inset-0 {
    inset:0
}
.tw\:inset-3 {
    inset:calc(var(--tw-spacing) * 3)
}
.tw\:inset-x-0 {
    inset-inline:0
}
.tw\:top-1\/2 {
    top:50%
}
.tw\:right-4 {
    right:calc(var(--tw-spacing) * 4)
}
.tw\:bottom-0 {
    bottom:0
}
.tw\:bottom-6 {
    bottom:calc(var(--tw-spacing) * 6)
}
.tw\:left-1\/2 {
    left:50%
}
.tw\:left-4 {
    left:calc(var(--tw-spacing) * 4)
}
.tw\:z-40 {
    z-index:40
}
.tw\:z-50 {
    z-index:50
}
.tw\:order-1 {
    order:1
}
.tw\:order-2 {
    order:2
}
.tw\:m-0 {
    margin:0
}
.tw\:mx-1 {
    margin-inline:var(--tw-spacing)
}
.tw\:mx-2 {
    margin-inline:calc(var(--tw-spacing) * 2)
}
.tw\:mx-auto {
    margin-inline:auto
}
.tw\:mt-0\.5 {
    margin-top:calc(var(--tw-spacing) * .5)
}
.tw\:mt-1 {
    margin-top:var(--tw-spacing)
}
.tw\:mt-1\.5 {
    margin-top:calc(var(--tw-spacing) * 1.5)
}
.tw\:mt-2 {
    margin-top:calc(var(--tw-spacing) * 2)
}
.tw\:mt-3 {
    margin-top:calc(var(--tw-spacing) * 3)
}
.tw\:mt-4 {
    margin-top:calc(var(--tw-spacing) * 4)
}
.tw\:mt-5 {
    margin-top:calc(var(--tw-spacing) * 5)
}
.tw\:mt-6 {
    margin-top:calc(var(--tw-spacing) * 6)
}
.tw\:mt-7 {
    margin-top:calc(var(--tw-spacing) * 7)
}
.tw\:mt-8 {
    margin-top:calc(var(--tw-spacing) * 8)
}
.tw\:mt-10 {
    margin-top:calc(var(--tw-spacing) * 10)
}
.tw\:mt-14 {
    margin-top:calc(var(--tw-spacing) * 14)
}
.tw\:mt-auto {
    margin-top:auto
}
.tw\:mr-1 {
    margin-right:var(--tw-spacing)
}
.tw\:mr-2 {
    margin-right:calc(var(--tw-spacing) * 2)
}
.tw\:mb-1\.5 {
    margin-bottom:calc(var(--tw-spacing) * 1.5)
}
.tw\:mb-3 {
    margin-bottom:calc(var(--tw-spacing) * 3)
}
.tw\:mb-4 {
    margin-bottom:calc(var(--tw-spacing) * 4)
}
.tw\:mb-6 {
    margin-bottom:calc(var(--tw-spacing) * 6)
}
.tw\:mb-7 {
    margin-bottom:calc(var(--tw-spacing) * 7)
}
.tw\:mb-10 {
    margin-bottom:calc(var(--tw-spacing) * 10)
}
.tw\:ml-1 {
    margin-left:var(--tw-spacing)
}
.tw\:ml-2 {
    margin-left:calc(var(--tw-spacing) * 2)
}
.tw\:ml-4 {
    margin-left:calc(var(--tw-spacing) * 4)
}
.tw\:ml-auto {
    margin-left:auto
}
.tw\:block {
    display:block
}
.tw\:flex {
    display:flex
}
.tw\:grid {
    display:grid
}
.tw\:hidden {
    display:none
}
.tw\:inline-block {
    display:inline-block
}
.tw\:inline-flex {
    display:inline-flex
}
.tw\:h-2 {
    height:calc(var(--tw-spacing) * 2)
}
.tw\:h-14 {
    height:calc(var(--tw-spacing) * 14)
}
.tw\:h-16 {
    height:calc(var(--tw-spacing) * 16)
}
.tw\:h-40 {
    height:calc(var(--tw-spacing) * 40)
}
.tw\:h-44 {
    height:calc(var(--tw-spacing) * 44)
}
.tw\:h-52 {
    height:calc(var(--tw-spacing) * 52)
}
.tw\:h-56 {
    height:calc(var(--tw-spacing) * 56)
}
.tw\:h-\[200px\] {
    height:200px
}
.tw\:h-\[320px\] {
    height:320px
}
.tw\:h-\[420px\] {
    height:420px
}
.tw\:h-\[calc\(100svh-3\.5rem\)\] {
    height:calc(100svh - 3.5rem)
}
.tw\:h-full {
    height:100%
}
.tw\:h-px {
    height:1px
}
.tw\:max-h-\[540px\] {
    max-height:540px
}
.tw\:min-h-\[360px\] {
    min-height:360px
}
.tw\:w-2 {
    width:calc(var(--tw-spacing) * 2)
}
.tw\:w-8 {
    width:calc(var(--tw-spacing) * 8)
}
.tw\:w-9 {
    width:calc(var(--tw-spacing) * 9)
}
.tw\:w-10 {
    width:calc(var(--tw-spacing) * 10)
}
.tw\:w-20 {
    width:calc(var(--tw-spacing) * 20)
}
.tw\:w-full {
    width:100%
}
.tw\:max-w-2xl {
    max-width:var(--tw-container-2xl)
}
.tw\:max-w-3xl {
    max-width:var(--tw-container-3xl)
}
.tw\:max-w-4xl {
    max-width:var(--tw-container-4xl)
}
.tw\:max-w-5xl {
    max-width:var(--tw-container-5xl)
}
.tw\:max-w-\[240px\] {
    max-width:240px
}
.tw\:max-w-xl {
    max-width:var(--tw-container-xl)
}
.tw\:min-w-0 {
    min-width:0
}
.tw\:flex-1 {
    flex:1
}
.tw\:shrink-0 {
    flex-shrink:0
}
.tw\:-translate-x-1\/2 {
    --tw-translate-x:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y)
}
.tw\:-translate-y-1\/2 {
    --tw-translate-y:calc(calc(1 / 2 * 100%) * -1);
    translate:var(--tw-translate-x) var(--tw-translate-y)
}
.tw\:animate-bounce {
    animation:var(--tw-animate-bounce)
}
.tw\:list-none {
    list-style-type:none
}
.tw\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.tw\:flex-col {
    flex-direction:column
}
.tw\:flex-wrap {
    flex-wrap:wrap
}
.tw\:items-baseline {
    align-items:baseline
}
.tw\:items-center {
    align-items:center
}
.tw\:items-end {
    align-items:flex-end
}
.tw\:justify-between {
    justify-content:space-between
}
.tw\:justify-center {
    justify-content:center
}
.tw\:gap-0 {
    gap:0
}
.tw\:gap-1\.5 {
    gap:calc(var(--tw-spacing) * 1.5)
}
.tw\:gap-2 {
    gap:calc(var(--tw-spacing) * 2)
}
.tw\:gap-3 {
    gap:calc(var(--tw-spacing) * 3)
}
.tw\:gap-4 {
    gap:calc(var(--tw-spacing) * 4)
}
.tw\:gap-5 {
    gap:calc(var(--tw-spacing) * 5)
}
.tw\:gap-6 {
    gap:calc(var(--tw-spacing) * 6)
}
.tw\:gap-7 {
    gap:calc(var(--tw-spacing) * 7)
}
.tw\:gap-8 {
    gap:calc(var(--tw-spacing) * 8)
}
.tw\:gap-10 {
    gap:calc(var(--tw-spacing) * 10)
}
.tw\:gap-12 {
    gap:calc(var(--tw-spacing) * 12)
}
.tw\:gap-x-2 {
    column-gap:calc(var(--tw-spacing) * 2)
}
.tw\:gap-x-4 {
    column-gap:calc(var(--tw-spacing) * 4)
}
.tw\:gap-x-8 {
    column-gap:calc(var(--tw-spacing) * 8)
}
.tw\:gap-y-2 {
    row-gap:calc(var(--tw-spacing) * 2)
}
.tw\:gap-y-6 {
    row-gap:calc(var(--tw-spacing) * 6)
}
.tw\:overflow-hidden {
    overflow:hidden
}
.tw\:overflow-x-auto {
    overflow-x:auto
}
.tw\:overflow-y-auto {
    overflow-y:auto
}
.tw\:rounded-full {
    border-radius:3.40282e38px
}
.tw\:rounded-sm {
    border-radius:var(--tw-radius-sm)
}
.tw\:border {
    border-style:var(--tw-border-style);
    border-width:1px
}
.tw\:border-y {
    border-block-style:var(--tw-border-style);
    border-block-width:1px
}
.tw\:border-t {
    border-top-style:var(--tw-border-style);
    border-top-width:1px
}
.tw\:border-b {
    border-bottom-style:var(--tw-border-style);
    border-bottom-width:1px
}
.tw\:border-b-2 {
    border-bottom-style:var(--tw-border-style);
    border-bottom-width:2px
}
.tw\:border-ink\/20 {
    border-color:var(--tw-color-ink)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:border-ink\/20 {
        border-color:color-mix(in oklab, var(--tw-color-ink) 20%, transparent)
    }
}
.tw\:border-line {
    border-color:var(--tw-color-line)
}
.tw\:border-olive-500\/50 {
    border-color:var(--tw-color-olive-500)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:border-olive-500\/50 {
        border-color:color-mix(in oklab, var(--tw-color-olive-500) 50%, transparent)
    }
}
.tw\:border-transparent {
    border-color:#0000
}
.tw\:border-white\/35 {
    border-color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:border-white\/35 {
        border-color:color-mix(in oklab, var(--tw-color-white) 35%, transparent)
    }
}
.tw\:border-white\/40 {
    border-color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:border-white\/40 {
        border-color:color-mix(in oklab, var(--tw-color-white) 40%, transparent)
    }
}
.tw\:border-white\/60 {
    border-color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:border-white\/60 {
        border-color:color-mix(in oklab, var(--tw-color-white) 60%, transparent)
    }
}
.tw\:bg-black\/60 {
    background-color:var(--tw-color-black)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:bg-black\/60 {
        background-color:color-mix(in oklab, var(--tw-color-black) 60%, transparent)
    }
}
.tw\:bg-ink {
    background-color:var(--tw-color-ink)
}
.tw\:bg-ivory,.tw\:bg-ivory\/95 {
    background-color:var(--tw-color-ivory)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:bg-ivory\/95 {
        background-color:color-mix(in oklab, var(--tw-color-ivory) 95%, transparent)
    }
}
.tw\:bg-olive-500,.tw\:bg-olive-500\/30 {
    background-color:var(--tw-color-olive-500)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:bg-olive-500\/30 {
        background-color:color-mix(in oklab, var(--tw-color-olive-500) 30%, transparent)
    }
}
.tw\:bg-olive-500\/60 {
    background-color:var(--tw-color-olive-500)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:bg-olive-500\/60 {
        background-color:color-mix(in oklab, var(--tw-color-olive-500) 60%, transparent)
    }
}
.tw\:bg-olive-900 {
    background-color:var(--tw-color-olive-900)
}
.tw\:bg-parchment {
    background-color:var(--tw-color-parchment)
}
.tw\:bg-white,.tw\:bg-white\/50 {
    background-color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:bg-white\/50 {
        background-color:color-mix(in oklab, var(--tw-color-white) 50%, transparent)
    }
}
.tw\:bg-white\/70 {
    background-color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:bg-white\/70 {
        background-color:color-mix(in oklab, var(--tw-color-white) 70%, transparent)
    }
}
.tw\:bg-gradient-to-b {
    --tw-gradient-position:to bottom in oklab;
    background-image:linear-gradient(var(--tw-gradient-stops))
}
.tw\:bg-gradient-to-t {
    --tw-gradient-position:to top in oklab;
    background-image:linear-gradient(var(--tw-gradient-stops))
}
.tw\:bg-\[radial-gradient\(ellipse_85\%_70\%_at_15\%_100\%\,rgba\(0\,0\,0\,0\.5\)\,transparent_68\%\)\] {
    background-image:radial-gradient(85% 70% at 15% 100%,#00000080,#0000 68%)
}
.tw\:from-black\/25 {
    --tw-gradient-from:var(--tw-color-black)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:from-black\/25 {
        --tw-gradient-from:color-mix(in oklab, var(--tw-color-black) 25%, transparent)
    }
}
.tw\:from-black\/25 {
    --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
}
.tw\:from-black\/75 {
    --tw-gradient-from:var(--tw-color-black)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:from-black\/75 {
        --tw-gradient-from:color-mix(in oklab, var(--tw-color-black) 75%, transparent)
    }
}
.tw\:from-black\/75 {
    --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
}
.tw\:from-black\/80 {
    --tw-gradient-from:var(--tw-color-black)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:from-black\/80 {
        --tw-gradient-from:color-mix(in oklab, var(--tw-color-black) 80%, transparent)
    }
}
.tw\:from-black\/80 {
    --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
}
.tw\:via-black\/10 {
    --tw-gradient-via:var(--tw-color-black)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:via-black\/10 {
        --tw-gradient-via:color-mix(in oklab, var(--tw-color-black) 10%, transparent)
    }
}
.tw\:via-black\/10 {
    --tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-via-stops)
}
.tw\:via-black\/30 {
    --tw-gradient-via:var(--tw-color-black)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:via-black\/30 {
        --tw-gradient-via:color-mix(in oklab, var(--tw-color-black) 30%, transparent)
    }
}
.tw\:via-black\/30 {
    --tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-via-stops)
}
.tw\:to-black\/10 {
    --tw-gradient-to:var(--tw-color-black)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:to-black\/10 {
        --tw-gradient-to:color-mix(in oklab, var(--tw-color-black) 10%, transparent)
    }
}
.tw\:to-black\/10 {
    --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
}
.tw\:to-black\/80 {
    --tw-gradient-to:var(--tw-color-black)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:to-black\/80 {
        --tw-gradient-to:color-mix(in oklab, var(--tw-color-black) 80%, transparent)
    }
}
.tw\:to-black\/80 {
    --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
}
.tw\:to-transparent {
    --tw-gradient-to:transparent;
    --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
}
.tw\:object-cover {
    object-fit:cover
}
.tw\:p-3 {
    padding:calc(var(--tw-spacing) * 3)
}
.tw\:p-5 {
    padding:calc(var(--tw-spacing) * 5)
}
.tw\:p-6 {
    padding:calc(var(--tw-spacing) * 6)
}
.tw\:p-8 {
    padding:calc(var(--tw-spacing) * 8)
}
.tw\:px-1 {
    padding-inline:var(--tw-spacing)
}
.tw\:px-2 {
    padding-inline:calc(var(--tw-spacing) * 2)
}
.tw\:px-4 {
    padding-inline:calc(var(--tw-spacing) * 4)
}
.tw\:px-5 {
    padding-inline:calc(var(--tw-spacing) * 5)
}
.tw\:px-6 {
    padding-inline:calc(var(--tw-spacing) * 6)
}
.tw\:px-7 {
    padding-inline:calc(var(--tw-spacing) * 7)
}
.tw\:px-10 {
    padding-inline:calc(var(--tw-spacing) * 10)
}
.tw\:py-2\.5 {
    padding-block:calc(var(--tw-spacing) * 2.5)
}
.tw\:py-3 {
    padding-block:calc(var(--tw-spacing) * 3)
}
.tw\:py-3\.5 {
    padding-block:calc(var(--tw-spacing) * 3.5)
}
.tw\:py-4 {
    padding-block:calc(var(--tw-spacing) * 4)
}
.tw\:py-5 {
    padding-block:calc(var(--tw-spacing) * 5)
}
.tw\:py-14 {
    padding-block:calc(var(--tw-spacing) * 14)
}
.tw\:py-16 {
    padding-block:calc(var(--tw-spacing) * 16)
}
.tw\:py-20 {
    padding-block:calc(var(--tw-spacing) * 20)
}
.tw\:pt-4 {
    padding-top:calc(var(--tw-spacing) * 4)
}
.tw\:pt-5 {
    padding-top:calc(var(--tw-spacing) * 5)
}
.tw\:pt-8 {
    padding-top:calc(var(--tw-spacing) * 8)
}
.tw\:pt-12 {
    padding-top:calc(var(--tw-spacing) * 12)
}
.tw\:pt-24 {
    padding-top:calc(var(--tw-spacing) * 24)
}
.tw\:pr-1 {
    padding-right:var(--tw-spacing)
}
.tw\:pb-0\.5 {
    padding-bottom:calc(var(--tw-spacing) * .5)
}
.tw\:pb-1 {
    padding-bottom:var(--tw-spacing)
}
.tw\:pb-6 {
    padding-bottom:calc(var(--tw-spacing) * 6)
}
.tw\:pb-16 {
    padding-bottom:calc(var(--tw-spacing) * 16)
}
.tw\:text-center {
    text-align:center
}
.tw\:text-left {
    text-align:left
}
.tw\:font-serif {
    font-family:var(--tw-font-serif)
}
.tw\:text-2xl {
    font-size:var(--tw-text-2xl);
    line-height:var(--tw-leading,var(--tw-text-2xl--line-height))
}
.tw\:text-3xl {
    font-size:var(--tw-text-3xl);
    line-height:var(--tw-leading,var(--tw-text-3xl--line-height))
}
.tw\:text-4xl {
    font-size:var(--tw-text-4xl);
    line-height:var(--tw-leading,var(--tw-text-4xl--line-height))
}
.tw\:text-lg {
    font-size:var(--tw-text-lg);
    line-height:var(--tw-leading,var(--tw-text-lg--line-height))
}
.tw\:text-sm {
    font-size:var(--tw-text-sm);
    line-height:var(--tw-leading,var(--tw-text-sm--line-height))
}
.tw\:text-xl {
    font-size:var(--tw-text-xl);
    line-height:var(--tw-leading,var(--tw-text-xl--line-height))
}
.tw\:text-\[0\.6rem\] {
    font-size:.6rem
}
.tw\:text-\[0\.7rem\] {
    font-size:.7rem
}
.tw\:text-\[0\.8rem\] {
    font-size:.8rem
}
.tw\:text-\[0\.9rem\] {
    font-size:.9rem
}
.tw\:text-\[0\.65rem\] {
    font-size:.65rem
}
.tw\:text-\[0\.66rem\] {
    font-size:.66rem
}
.tw\:text-\[0\.68rem\] {
    font-size:.68rem
}
.tw\:text-\[0\.72rem\] {
    font-size:.72rem
}
.tw\:text-\[0\.74rem\] {
    font-size:.74rem
}
.tw\:text-\[0\.76rem\] {
    font-size:.76rem
}
.tw\:text-\[0\.78rem\] {
    font-size:.78rem
}
.tw\:text-\[0\.82rem\] {
    font-size:.82rem
}
.tw\:text-\[0\.85rem\] {
    font-size:.85rem
}
.tw\:text-\[0\.86rem\] {
    font-size:.86rem
}
.tw\:text-\[0\.92rem\] {
    font-size:.92rem
}
.tw\:text-\[0\.95rem\] {
    font-size:.95rem
}
.tw\:text-\[1\.9rem\] {
    font-size:1.9rem
}
.tw\:leading-\[1\.12\] {
    --tw-leading:1.12;
    line-height:1.12
}
.tw\:leading-relaxed {
    --tw-leading:var(--tw-leading-relaxed);
    line-height:var(--tw-leading-relaxed)
}
.tw\:leading-snug {
    --tw-leading:var(--tw-leading-snug);
    line-height:var(--tw-leading-snug)
}
.tw\:font-light {
    --tw-font-weight:var(--tw-font-weight-light);
    font-weight:var(--tw-font-weight-light)
}
.tw\:font-medium {
    --tw-font-weight:var(--tw-font-weight-medium);
    font-weight:var(--tw-font-weight-medium)
}
.tw\:font-normal {
    --tw-font-weight:var(--tw-font-weight-normal);
    font-weight:var(--tw-font-weight-normal)
}
.tw\:font-semibold {
    --tw-font-weight:var(--tw-font-weight-semibold);
    font-weight:var(--tw-font-weight-semibold)
}
.tw\:tracking-\[0\.1em\] {
    --tw-tracking:.1em;
    letter-spacing:.1em
}
.tw\:tracking-\[0\.2em\] {
    --tw-tracking:.2em;
    letter-spacing:.2em
}
.tw\:tracking-\[0\.05em\] {
    --tw-tracking:.05em;
    letter-spacing:.05em
}
.tw\:tracking-\[0\.08em\] {
    --tw-tracking:.08em;
    letter-spacing:.08em
}
.tw\:tracking-\[0\.12em\] {
    --tw-tracking:.12em;
    letter-spacing:.12em
}
.tw\:tracking-\[0\.14em\] {
    --tw-tracking:.14em;
    letter-spacing:.14em
}
.tw\:tracking-\[0\.16em\] {
    --tw-tracking:.16em;
    letter-spacing:.16em
}
.tw\:tracking-\[0\.18em\] {
    --tw-tracking:.18em;
    letter-spacing:.18em
}
.tw\:tracking-\[0\.24em\] {
    --tw-tracking:.24em;
    letter-spacing:.24em
}
.tw\:tracking-tight {
    --tw-tracking:var(--tw-tracking-tight);
    letter-spacing:var(--tw-tracking-tight)
}
.tw\:whitespace-nowrap {
    white-space:nowrap
}
.tw\:text-gold {
    color:var(--tw-color-gold)
}
.tw\:text-ink,.tw\:text-ink\/90 {
    color:var(--tw-color-ink)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:text-ink\/90 {
        color:color-mix(in oklab, var(--tw-color-ink) 90%, transparent)
    }
}
.tw\:text-mist {
    color:var(--tw-color-mist)
}
.tw\:text-olive-300 {
    color:var(--tw-color-olive-300)
}
.tw\:text-olive-500 {
    color:var(--tw-color-olive-500)
}
.tw\:text-olive-700 {
    color:var(--tw-color-olive-700)
}
.tw\:text-stone {
    color:var(--tw-color-stone)
}
.tw\:text-white,.tw\:text-white\/60 {
    color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:text-white\/60 {
        color:color-mix(in oklab, var(--tw-color-white) 60%, transparent)
    }
}
.tw\:text-white\/70 {
    color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:text-white\/70 {
        color:color-mix(in oklab, var(--tw-color-white) 70%, transparent)
    }
}
.tw\:text-white\/75 {
    color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:text-white\/75 {
        color:color-mix(in oklab, var(--tw-color-white) 75%, transparent)
    }
}
.tw\:text-white\/80 {
    color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:text-white\/80 {
        color:color-mix(in oklab, var(--tw-color-white) 80%, transparent)
    }
}
.tw\:text-white\/85 {
    color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:text-white\/85 {
        color:color-mix(in oklab, var(--tw-color-white) 85%, transparent)
    }
}
.tw\:text-white\/90 {
    color:var(--tw-color-white)
}
@supports (color:color-mix(in lab, red, red)) {
    .tw\:text-white\/90 {
        color:color-mix(in oklab, var(--tw-color-white) 90%, transparent)
    }
}
.tw\:uppercase {
    text-transform:uppercase
}
.tw\:italic {
    font-style:italic
}
.tw\:not-italic {
    font-style:normal
}
.tw\:tabular-nums {
    --tw-numeric-spacing:tabular-nums;
    font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)
}
.tw\:underline-offset-4 {
    text-underline-offset:4px
}
.tw\:shadow-\[0_-4px_20px_rgba\(0\,0\,0\,0\.08\)\] {
    --tw-shadow:0 -4px 20px var(--tw-shadow-color,#00000014);
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
.tw\:shadow-\[0_0_0_3px_var\(--color-ivory\)\] {
    --tw-shadow:0 0 0 3px var(--tw-shadow-color,var(--color-ivory));
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
.tw\:shadow-\[0_1px_0_var\(--color-line\)\] {
    --tw-shadow:0 1px 0 var(--tw-shadow-color,var(--color-line));
    box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
.tw\:backdrop-blur-sm {
    --tw-backdrop-blur:blur(var(--tw-blur-sm));
    -webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
}
.tw\:transition {
    transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
    transition-timing-function:var(--tw-ease,var(--tw-default-transition-timing-function));
    transition-duration:var(--tw-duration,var(--tw-default-transition-duration))
}
.tw\:duration-700 {
    --tw-duration:.7s;
    transition-duration:.7s
}
.tw\:\[text-shadow\:0_1px_3px_rgba\(0\,0\,0\,0\.5\)\,0_4px_20px_rgba\(0\,0\,0\,0\.55\)\] {
    text-shadow:0 1px 3px #00000080,0 4px 20px #0000008c
}
.tw\:\[text-shadow\:0_1px_8px_rgba\(0\,0\,0\,0\.7\)\] {
    text-shadow:0 1px 8px #000000b3
}
.tw\:\[text-shadow\:0_2px_16px_rgba\(0\,0\,0\,0\.4\)\] {
    text-shadow:0 2px 16px #0006
}
@media (hover:hover) {
    .tw\:group-hover\:scale-\[1\.04\]:is(:where(.tw\:group):hover *) {
        scale:1.04
    }
    .tw\:group-hover\:scale-\[1\.05\]:is(:where(.tw\:group):hover *) {
        scale:1.05
    }
    .tw\:group-hover\:text-olive-700:is(:where(.tw\:group):hover *) {
        color:var(--tw-color-olive-700)
    }
    .tw\:group-hover\:text-white:is(:where(.tw\:group):hover *) {
        color:var(--tw-color-white)
    }
}
.tw\:placeholder\:text-mist::placeholder {
    color:var(--tw-color-mist)
}
.tw\:last\:border-b-0:last-child {
    border-bottom-style:var(--tw-border-style);
    border-bottom-width:0
}
.tw\:last\:pb-8:last-child {
    padding-bottom:calc(var(--tw-spacing) * 8)
}
@media (hover:hover) {
    .tw\:hover\:border-ink:hover {
        border-color:var(--tw-color-ink)
    }
    .tw\:hover\:border-olive-300:hover {
        border-color:var(--tw-color-olive-300)
    }
    .tw\:hover\:border-olive-700:hover {
        border-color:var(--tw-color-olive-700)
    }
    .tw\:hover\:border-white:hover {
        border-color:var(--tw-color-white)
    }
    .tw\:hover\:bg-white:hover {
        background-color:var(--tw-color-white)
    }
    .tw\:hover\:text-ink:hover {
        color:var(--tw-color-ink)
    }
    .tw\:hover\:text-olive-700:hover {
        color:var(--tw-color-olive-700)
    }
    .tw\:hover\:text-olive-900:hover {
        color:var(--tw-color-olive-900)
    }
    .tw\:hover\:text-white:hover,.tw\:hover\:text-white\/80:hover {
        color:var(--tw-color-white)
    }
    @supports (color:color-mix(in lab, red, red)) {
        .tw\:hover\:text-white\/80:hover {
            color:color-mix(in oklab, var(--tw-color-white) 80%, transparent)
        }
    }
    .tw\:hover\:underline:hover {
        text-decoration-line:underline
    }
}
.tw\:focus\:border-olive-500:focus {
    border-color:var(--tw-color-olive-500)
}
.tw\:focus\:outline-none:focus {
    --tw-outline-style:none;
    outline-style:none
}
@media (min-width:40rem) {
    .tw\:sm\:inline {
        display:inline
    }
    .tw\:sm\:h-64 {
        height:calc(var(--tw-spacing) * 64)
    }
    .tw\:sm\:h-\[260px\] {
        height:260px
    }
    .tw\:sm\:h-\[420px\] {
        height:420px
    }
    .tw\:sm\:w-auto {
        width:auto
    }
    .tw\:sm\:grid-cols-2 {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .tw\:sm\:grid-cols-3 {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .tw\:sm\:flex-row {
        flex-direction:row
    }
    .tw\:sm\:gap-5 {
        gap:calc(var(--tw-spacing) * 5)
    }
    .tw\:sm\:gap-10 {
        gap:calc(var(--tw-spacing) * 10)
    }
    .tw\:sm\:px-6 {
        padding-inline:calc(var(--tw-spacing) * 6)
    }
    .tw\:sm\:text-4xl {
        font-size:var(--tw-text-4xl);
        line-height:var(--tw-leading,var(--tw-text-4xl--line-height))
    }
    .tw\:sm\:text-base {
        font-size:var(--tw-text-base);
        line-height:var(--tw-leading,var(--tw-text-base--line-height))
    }
    .tw\:sm\:text-sm {
        font-size:var(--tw-text-sm);
        line-height:var(--tw-leading,var(--tw-text-sm--line-height))
    }
}
@media (min-width:48rem) {
    .tw\:md\:inline-flex {
        display:inline-flex
    }
}
@media (min-width:64rem) {
    .tw\:lg\:absolute {
        position:absolute
    }
    .tw\:lg\:sticky {
        position:sticky
    }
    .tw\:lg\:top-1\/2 {
        top:50%
    }
    .tw\:lg\:top-\[calc\(var\(--ts-header-height\,90px\)\+72px\)\] {
        top:calc(var(--ts-header-height,90px) + 72px)
    }
    .tw\:lg\:-right-\[4\.5px\] {
        right:-4.5px
    }
    .tw\:lg\:right-6 {
        right:calc(var(--tw-spacing) * 6)
    }
    .tw\:lg\:left-6 {
        left:calc(var(--tw-spacing) * 6)
    }
    .tw\:lg\:order-1 {
        order:1
    }
    .tw\:lg\:order-2 {
        order:2
    }
    .tw\:lg\:col-span-3 {
        grid-column:span 3/span 3
    }
    .tw\:lg\:col-span-4 {
        grid-column:span 4/span 4
    }
    .tw\:lg\:col-span-5 {
        grid-column:span 5/span 5
    }
    .tw\:lg\:col-span-6 {
        grid-column:span 6/span 6
    }
    .tw\:lg\:col-span-7 {
        grid-column:span 7/span 7
    }
    .tw\:lg\:col-span-8 {
        grid-column:span 8/span 8
    }
    .tw\:lg\:col-span-9 {
        grid-column:span 9/span 9
    }
    .tw\:lg\:col-start-5 {
        grid-column-start:5
    }
    .tw\:lg\:mt-14 {
        margin-top:calc(var(--tw-spacing) * 14)
    }
    .tw\:lg\:mt-20 {
        margin-top:calc(var(--tw-spacing) * 20)
    }
    .tw\:lg\:mb-12 {
        margin-bottom:calc(var(--tw-spacing) * 12)
    }
    .tw\:lg\:mb-14 {
        margin-bottom:calc(var(--tw-spacing) * 14)
    }
    .tw\:lg\:block {
        display:block
    }
    .tw\:lg\:flex {
        display:flex
    }
    .tw\:lg\:hidden {
        display:none
    }
    .tw\:lg\:inline {
        display:inline
    }
    .tw\:lg\:inline-flex {
        display:inline-flex
    }
    .tw\:lg\:h-72 {
        height:calc(var(--tw-spacing) * 72)
    }
    .tw\:lg\:h-\[300px\] {
        height:300px
    }
    .tw\:lg\:h-\[520px\] {
        height:520px
    }
    .tw\:lg\:h-\[540px\] {
        height:540px
    }
    .tw\:lg\:min-h-\[420px\] {
        min-height:420px
    }
    .tw\:lg\:w-\[240px\] {
        width:240px
    }
    .tw\:lg\:-translate-y-1\/2 {
        --tw-translate-y:calc(calc(1 / 2 * 100%) * -1);
        translate:var(--tw-translate-x) var(--tw-translate-y)
    }
    .tw\:lg\:grid-cols-2 {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .tw\:lg\:grid-cols-3 {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .tw\:lg\:grid-cols-12 {
        grid-template-columns:repeat(12,minmax(0,1fr))
    }
    .tw\:lg\:grid-cols-\[64px_minmax\(0\,1fr\)\] {
        grid-template-columns:64px minmax(0,1fr)
    }
    .tw\:lg\:flex-row {
        flex-direction:row
    }
    .tw\:lg\:items-start {
        align-items:flex-start
    }
    .tw\:lg\:gap-4 {
        gap:calc(var(--tw-spacing) * 4)
    }
    .tw\:lg\:gap-6 {
        gap:calc(var(--tw-spacing) * 6)
    }
    .tw\:lg\:gap-10 {
        gap:calc(var(--tw-spacing) * 10)
    }
    .tw\:lg\:gap-16 {
        gap:calc(var(--tw-spacing) * 16)
    }
    .tw\:lg\:p-10 {
        padding:calc(var(--tw-spacing) * 10)
    }
    .tw\:lg\:py-3\.5 {
        padding-block:calc(var(--tw-spacing) * 3.5)
    }
    .tw\:lg\:py-20 {
        padding-block:calc(var(--tw-spacing) * 20)
    }
    .tw\:lg\:py-24 {
        padding-block:calc(var(--tw-spacing) * 24)
    }
    .tw\:lg\:py-28 {
        padding-block:calc(var(--tw-spacing) * 28)
    }
    .tw\:lg\:pt-16 {
        padding-top:calc(var(--tw-spacing) * 16)
    }
    .tw\:lg\:pt-28 {
        padding-top:calc(var(--tw-spacing) * 28)
    }
    .tw\:lg\:pb-8 {
        padding-bottom:calc(var(--tw-spacing) * 8)
    }
    .tw\:lg\:pb-24 {
        padding-bottom:calc(var(--tw-spacing) * 24)
    }
    .tw\:lg\:text-2xl {
        font-size:var(--tw-text-2xl);
        line-height:var(--tw-leading,var(--tw-text-2xl--line-height))
    }
    .tw\:lg\:text-4xl {
        font-size:var(--tw-text-4xl);
        line-height:var(--tw-leading,var(--tw-text-4xl--line-height))
    }
    .tw\:lg\:text-5xl {
        font-size:var(--tw-text-5xl);
        line-height:var(--tw-leading,var(--tw-text-5xl--line-height))
    }
    .tw\:lg\:text-xl {
        font-size:var(--tw-text-xl);
        line-height:var(--tw-leading,var(--tw-text-xl--line-height))
    }
    .tw\:lg\:text-\[1\.7rem\] {
        font-size:1.7rem
    }
    .tw\:lg\:text-\[2\.9rem\] {
        font-size:2.9rem
    }
    .tw\:lg\:leading-relaxed {
        --tw-leading:var(--tw-leading-relaxed);
        line-height:var(--tw-leading-relaxed)
    }
    .tw\:lg\:before\:absolute:before {
        content:var(--tw-content);
        position:absolute
    }
    .tw\:lg\:before\:top-0:before {
        content:var(--tw-content);
        top:0
    }
    .tw\:lg\:before\:bottom-0:before {
        content:var(--tw-content);
        bottom:0
    }
    .tw\:lg\:before\:left-16:before {
        content:var(--tw-content);
        left:calc(var(--tw-spacing) * 16)
    }
    .tw\:lg\:before\:w-px:before {
        content:var(--tw-content);
        width:1px
    }
    .tw\:lg\:before\:bg-olive-500\/30:before {
        content:var(--tw-content);
        background-color:var(--tw-color-olive-500)
    }
    @supports (color:color-mix(in lab, red, red)) {
        .tw\:lg\:before\:bg-olive-500\/30:before {
            background-color:color-mix(in oklab, var(--tw-color-olive-500) 30%, transparent)
        }
    }
}
@media (min-width:80rem) {
    .tw\:xl\:inline {
        display:inline
    }
    .tw\:xl\:text-5xl {
        font-size:var(--tw-text-5xl);
        line-height:var(--tw-leading,var(--tw-text-5xl--line-height))
    }
}
.tw\:\[\&_li\]\:mb-2 li {
    margin-bottom:calc(var(--tw-spacing) * 2)
}
@font-face {
    font-family:Inter;
    font-style:normal;
    font-weight:300 700;
    font-display:swap;
    src:url(/fonts/editorial/inter-latin.woff2)format("woff2")
}
@font-face {
    font-family:Playfair Display;
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url(/fonts/editorial/playfair-latin.woff2)format("woff2")
}
@font-face {
    font-family:Playfair Display;
    font-style:italic;
    font-weight:400 700;
    font-display:swap;
    src:url(/fonts/editorial/playfair-italic-latin.woff2)format("woff2")
}
.tour-v5 button {
    appearance:none;
    font:inherit;
    color:inherit;
    cursor:pointer;
    background-color:#0000
}
/* Expand control as a magazine rule: hairlines run out to both sides with the
   label centred between them, so it reads as part of the page's rhythm rather
   than a UI link. Square, quiet — it repeats once per day. */
.tv5-expand-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}
.tv5-expand-line {
    flex: 1;
    height: 1px;
    background: #e4e0d5;              /* hairline */
}
.tour-v5 .tv5-expand-btn {
    border: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4a5e2f;                    /* olive */
    transition: color 0.3s ease;
}
.tour-v5 .tv5-expand-btn:hover {
    color: #33421f;                    /* olive-deep */
}
.tour-v5 {
    color:var(--color-ink);
    background-color:var(--color-ivory);
    -webkit-font-smoothing:antialiased;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
    font-size:16px;
    line-height:1.7;
    /* Safety net: keep any full-bleed break-out from producing a horizontal
       scrollbar. `clip` (not `hidden`) so sticky elements inside still work. */
    overflow-x:clip
}
.tour-v5 img {
    max-width:100%
}
.tour-v5 a {
    text-decoration:none
}
.tv5-subnav {
    top:var(--ts-header-height,90px)
}
.tv5-tab {
    color:#5b574d
}
.tv5-tab:hover {
    color:#201f1d
}
.tv5-tab.is-active {
    color:#201f1d;
    border-bottom-width:3px;
    border-bottom-color:#6b8051
}
.tv5-container {
    width:100%;
    max-width:1760px;
    margin-inline:auto;
    padding-inline:32px
}
@media (min-width:640px) {
    .tv5-container {
        padding-inline:48px
    }
}
@media (min-width:1024px) {
    .tv5-container {
        padding-inline:64px
    }
}
@media (min-width:1440px) {
    .tv5-container {
        padding-inline:76px
    }
}
.tv5-prose {
    color:#5b574d;
    font-size:1.02rem;
    line-height:1.85
}
.tv5-prose p {
    color:#5b574d;
    margin:0 0 1.15em;
    font-size:1.02rem;
    line-height:1.85
}
.tv5-prose p:last-child {
    margin-bottom:0
}
.tv5-prose ul,.tv5-prose ol {
    margin:0 0 1.15em;
    padding-left:1.5em
}
.tv5-prose ul li {
    list-style:outside
}
.tv5-prose ol li {
    list-style:decimal
}
.tv5-prose li>p {
    margin:0
}
.tv5-prose a {
    color:var(--color-olive-700);
    text-underline-offset:3px;
    text-decoration:underline
}
.tv5-clamp {
    max-height:17rem;
    transition:max-height .6s cubic-bezier(.25,.8,.25,1);
    position:relative;
    overflow:hidden
}
.tv5-clamp:after {
    content:"";
    background:linear-gradient(180deg, transparent, var(--color-ivory));
    pointer-events:none;
    height:5.5rem;
    transition:opacity .4s;
    position:absolute;
    inset:auto 0 0
}
.tv5-clamp.is-open {
    max-height:none
}
.tv5-clamp.is-open:after {
    opacity:0
}
@media (min-width:1024px) {
    .tv5-itin-shell {
        grid-template-columns:minmax(0,1fr) 420px;
        align-items:stretch;
        gap:48px;
        display:grid
    }
    .tv5-itin-mapwrap {
        height:100%
    }
}
@media (min-width:1280px) {
    .tv5-itin-shell {
        gap:64px
    }
}
.tv5-itin-mapsticky {
    top:calc(var(--ts-header-height,90px) + 72px);
    position:sticky
}
.tv5-itin-map {
    width:100%;
    height:calc(100vh - var(--ts-header-height,90px) - 120px);
    border-radius:3px;
    min-height:420px;
    max-height:640px;
    overflow:hidden
}
#tv5-map .mapboxgl-canvas,#tv5-location-map .mapboxgl-canvas {
    filter:sepia(.18)saturate(.9)brightness(1.02)hue-rotate(-8deg)
}
.tv5-map-pin {
    color:#fff;
    letter-spacing:.02em;
    cursor:pointer;
    background:#4a5e2f;
    border-radius:9999px;
    justify-content:center;
    align-items:center;
    width:30px;
    height:30px;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
    font-size:.72rem;
    font-weight:600;
    transition:transform .25s,background .25s;
    display:flex;
    box-shadow:0 2px 10px #00000059,0 0 0 3px #ffffffd9
}
/* Active day pin: ink, larger, with a soft olive halo. The old state only
   swapped olive → olive-deep at the same size, which is nearly invisible on a
   30px pin (and useless when pins overlap, e.g. Palermo). Ink also ties the map
   to the rest of the page's dark accents (tab marker, action bar, facts card).
   Sized via width/height so it never fights Mapbox's own marker transform. */
.tv5-map-pin.is-active {
    background:#201f1d;
    width:38px;
    height:38px;
    font-size:.82rem;
    box-shadow:0 0 0 3px #ffffffd9, 0 0 0 9px rgba(74,94,47,.25), 0 4px 14px rgba(32,31,29,.4)
}
.tv5-map-pin {
    transition:transform .25s,background .25s,width .3s cubic-bezier(.2,.6,.2,1),height .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease,font-size .3s ease
}
.tv5-map-pin:hover {
    background:#33421f;
    transform:scale(1.15)
}
.tv5-map-pin.is-active:hover {
    background:#000;
    transform:scale(1.06)
}
.tv5-map-pin.is-active,.mapboxgl-marker:has(.tv5-map-pin.is-active) {
    z-index:5
}
.tv5-map-pin--loc {
    width:auto;
    height:auto;
    box-shadow:none;
    color:var(--color-olive-700);
    text-shadow:0 2px 8px #0000004d;
    background:0 0;
    font-size:1.7rem
}
.tv5-map-pin--loc:hover {
    background:0 0;
    transform:none
}
.tv5-map-pin--preview {
    color:var(--color-gold);
    animation:.5s cubic-bezier(.25,.8,.25,1) tv5-pin-drop
}
@keyframes tv5-pin-drop {
    0% {
        opacity:0;
        transform:translateY(-10px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.tour-v5 .owl-nav button.owl-prev,.tour-v5 .owl-nav button.owl-next {
    border-radius:9999px;
    justify-content:center;
    align-items:center;
    width:42px;
    height:42px;
    font-size:.8rem;
    display:flex;
    position:absolute;
    top:42%;
    transform:translateY(-50%);
    box-shadow:0 2px 12px #00000024;
    color:var(--color-ink)!important;
    background:#ffffffeb!important
}
.tour-v5 .owl-nav button.owl-prev {
    left:18px
}
.tour-v5 .owl-nav button.owl-next {
    right:18px
}
.tour-v5 .owl-dots {
    text-align:center;
    margin-top:22px
}
.tour-v5 .owl-dots .owl-dot span {
    background:var(--color-line);
    border-radius:9999px;
    width:7px;
    height:7px;
    margin:0 4px;
    transition:background .3s;
    display:inline-block
}
.tour-v5 .owl-dots .owl-dot.active span {
    background:var(--color-olive-500)
}
.tv5-hero-slide {
    opacity:0;
    will-change:opacity, transform;
    transition:opacity 1.6s ease-in-out
}
.tv5-hero-slide.is-active {
    opacity:1
}
.tv5-hero-slides[data-tv5-hero-multi] .tv5-hero-slide.is-active {
    animation:9s ease-out forwards tv5-kenburns
}
@keyframes tv5-kenburns {
    0% {
        transform:scale(1.03)
    }
    to {
        transform:scale(1.12)
    }
}
@media (prefers-reduced-motion:reduce) {
    .tv5-hero-slide {
        transition:opacity .4s
    }
    .tv5-hero-slides[data-tv5-hero-multi] .tv5-hero-slide.is-active {
        animation:none
    }
}
.tv5-hero-nav {
    z-index:3;
    color:#fff;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    cursor:pointer;
    opacity:.75;
    background:#0000002e;
    border:1px solid #ffffff8c;
    border-radius:9999px;
    justify-content:center;
    align-items:center;
    width:44px;
    height:44px;
    font-size:.85rem;
    transition:opacity .3s,background .3s,border-color .3s;
    display:inline-flex
}
.tv5-hero-nav:hover {
    opacity:1;
    background:#00000052;
    border-color:#ffffffe6
}
.tv5-hero-nav:focus-visible {
    outline-offset:2px;
    opacity:1;
    outline:2px solid #fff
}
@media (min-width:1024px) {
    .tv5-hero-nav {
        width:50px;
        height:50px;
        font-size:.95rem
    }
}
.tv5-actionbar {
    transition:transform .55s cubic-bezier(.16,.84,.28,1)
}
.tv5-actionbar.is-tucked {
    transform:translateY(100%)      /* box sits flush to the bottom, 100% hides it */
}
.tv5-btn-primary {
    color:#fff;
    background:#4a5e2f;
    transition:background .25s
}
.tv5-btn-primary:hover {
    color:#fff;
    background:#33421f
}
.tv5-fact-card {
    background:#201f1d;      /* ink — matches the sticky action bar */
    padding:26px 24px
}
/* On the ink facts strip the card is olive — the same green as the Request
   Proposal button, so the page's one call-to-action colour also anchors the
   price. Stands clear of the ink ground on its own; a faint hairline + shadow
   lift it further. White text and the price still read on olive. */
.tv5-facts .tv5-fact-card {
    background:#4a5e2f;   /* olive-700, matches .tv5-btn-primary */
    border:1px solid rgba(242, 239, 232, 0.14);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
}
.tv5-fact-card,.tv5-fact-card p {
    color:#fff
}
.tv5-fact-label {
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#ffffff8c;
    font-size:.62rem;
    font-weight:600
}
.tv5-fact-figure {
    color:#fff;
    font-family:Playfair Display,Georgia,Times New Roman,serif;
    font-weight:500;
    line-height:1
}
.tv5-fact-figure .tv5-fact-unit {
    color:#ffffffa6;
    font-size:.9rem;
    font-weight:400
}
.tv5-fact-note {
    color:#ffffffb8;
    font-size:.82rem
}
.tv5-fact-note--soft {
    color:#ffffff80;
    font-size:.76rem
}
.tv5-fact-divider {
    background:#ffffff38;
    height:2px;
    margin:18px 0
}
.tv5-acc-card {
    width:100%
}
.tv5-acc-stretch:after {
    content:"";
    z-index:1;
    position:absolute;
    inset:0
}
.tv5-acc-grid {
    grid-template-columns:1fr;
    gap:20px;
    display:grid
}
@media (min-width:640px) {
    .tv5-acc-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
/* Columns follow the card count (data-count, set in the blade), like V4: with
   fewer than five the row stays centred and the cards keep their full width
   instead of stretching thin across the whole 1760px container. Five is the
   full row — beyond that the blade switches to the carousel. */
@media (min-width:1024px) {
    .tv5-acc-grid {
        grid-template-columns:repeat(5,minmax(0,340px));
        justify-content:center;
        grid-auto-rows:1fr;
        gap:20px
    }
    .tv5-acc-grid[data-count="1"] { grid-template-columns:minmax(0,340px) }
    .tv5-acc-grid[data-count="2"] { grid-template-columns:repeat(2,minmax(0,340px)) }
    .tv5-acc-grid[data-count="3"] { grid-template-columns:repeat(3,minmax(0,340px)) }
    .tv5-acc-grid[data-count="4"] { grid-template-columns:repeat(4,minmax(0,340px)) }
    .tv5-acc-grid .tv5-acc-card {
        height:100%
    }
}
.tv5-prop-carousel .owl-stage {
    display:flex
}
.tv5-prop-carousel .owl-item {
    height:auto;
    display:flex
}
.tv5-prop-carousel .owl-item>div {
    width:100%;
    display:flex
}
.tv5-prop-carousel .owl-item .tv5-acc-card {
    height:100%
}
@property --tw-translate-x {
    syntax:"*";
    inherits:false;
    initial-value:0
}
@property --tw-translate-y {
    syntax:"*";
    inherits:false;
    initial-value:0
}
@property --tw-translate-z {
    syntax:"*";
    inherits:false;
    initial-value:0
}
@property --tw-border-style {
    syntax:"*";
    inherits:false;
    initial-value:solid
}
@property --tw-gradient-position {
    syntax:"*";
    inherits:false
}
@property --tw-gradient-from {
    syntax:"<color>";
    inherits:false;
    initial-value:#0000
}
@property --tw-gradient-via {
    syntax:"<color>";
    inherits:false;
    initial-value:#0000
}
@property --tw-gradient-to {
    syntax:"<color>";
    inherits:false;
    initial-value:#0000
}
@property --tw-gradient-stops {
    syntax:"*";
    inherits:false
}
@property --tw-gradient-via-stops {
    syntax:"*";
    inherits:false
}
@property --tw-gradient-from-position {
    syntax:"<length-percentage>";
    inherits:false;
    initial-value:0%
}
@property --tw-gradient-via-position {
    syntax:"<length-percentage>";
    inherits:false;
    initial-value:50%
}
@property --tw-gradient-to-position {
    syntax:"<length-percentage>";
    inherits:false;
    initial-value:100%
}
@property --tw-leading {
    syntax:"*";
    inherits:false
}
@property --tw-font-weight {
    syntax:"*";
    inherits:false
}
@property --tw-tracking {
    syntax:"*";
    inherits:false
}
@property --tw-ordinal {
    syntax:"*";
    inherits:false
}
@property --tw-slashed-zero {
    syntax:"*";
    inherits:false
}
@property --tw-numeric-figure {
    syntax:"*";
    inherits:false
}
@property --tw-numeric-spacing {
    syntax:"*";
    inherits:false
}
@property --tw-numeric-fraction {
    syntax:"*";
    inherits:false
}
@property --tw-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-shadow-color {
    syntax:"*";
    inherits:false
}
@property --tw-shadow-alpha {
    syntax:"<percentage>";
    inherits:false;
    initial-value:100%
}
@property --tw-inset-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-inset-shadow-color {
    syntax:"*";
    inherits:false
}
@property --tw-inset-shadow-alpha {
    syntax:"<percentage>";
    inherits:false;
    initial-value:100%
}
@property --tw-ring-color {
    syntax:"*";
    inherits:false
}
@property --tw-ring-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-inset-ring-color {
    syntax:"*";
    inherits:false
}
@property --tw-inset-ring-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-ring-inset {
    syntax:"*";
    inherits:false
}
@property --tw-ring-offset-width {
    syntax:"<length>";
    inherits:false;
    initial-value:0
}
@property --tw-ring-offset-color {
    syntax:"*";
    inherits:false;
    initial-value:#fff
}
@property --tw-ring-offset-shadow {
    syntax:"*";
    inherits:false;
    initial-value:0 0 #0000
}
@property --tw-backdrop-blur {
    syntax:"*";
    inherits:false
}
@property --tw-backdrop-brightness {
    syntax:"*";
    inherits:false
}
@property --tw-backdrop-contrast {
    syntax:"*";
    inherits:false
}
@property --tw-backdrop-grayscale {
    syntax:"*";
    inherits:false
}
@property --tw-backdrop-hue-rotate {
    syntax:"*";
    inherits:false
}
@property --tw-backdrop-invert {
    syntax:"*";
    inherits:false
}
@property --tw-backdrop-opacity {
    syntax:"*";
    inherits:false
}
@property --tw-backdrop-saturate {
    syntax:"*";
    inherits:false
}
@property --tw-backdrop-sepia {
    syntax:"*";
    inherits:false
}
@property --tw-duration {
    syntax:"*";
    inherits:false
}
@property --tw-content {
    syntax:"*";
    inherits:false;
    initial-value:""
}
@keyframes bounce {
    0%,to {
        animation-timing-function:cubic-bezier(.8,0,1,1);
        transform:translateY(-25%)
    }
    50% {
        animation-timing-function:cubic-bezier(0,0,.2,1);
        transform:none
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC COMPONENTS (hand-authored)
   ───────────────────────────────────────────────────────────────────────────
   These classes replace the frozen `tw:*` utility chains in the markup with
   readable, named components — so the blade reads as structure and every
   value lives here, editable in one place. Values are ported 1:1 from the
   Tailwind utilities they replace (no visual change); tokens below mirror the
   old --tw-* theme so `var()` keeps working.

   As each V5 section is cleaned up, its component rules are added under this
   banner and its `tw:*` classes disappear from the blade.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Spacing base (Tailwind used 0.25rem × n). Kept so the ported values below
       read as intent, not magic numbers. */
    --tv5-space: 0.25rem;
}

/* ── Section rhythm ────────────────────────────────────────────────────────
   Standard vertical breathing room for a top-level section. Was
   `tw:py-16 tw:lg:py-24`. This is the single knob for section spacing — the
   place to tune white space during the editorial redesign. */
.tv5-section {
    padding-block: calc(var(--tv5-space) * 16);   /* 4rem */
}

@media (min-width: 64rem) {
    .tv5-section {
        padding-block: calc(var(--tv5-space) * 24);   /* 6rem */
    }
}

/* ── Editorial two-column grid ─────────────────────────────────────────────
   The Kensington rhythm: a narrow heading column on the left, a wide reading
   column on the right, on a 12-track grid at lg. Was
   `tw:grid tw:gap-10 tw:lg:grid-cols-12` on the wrapper, with the heading in
   `tw:lg:col-span-3` and the body in `tw:lg:col-span-8 tw:lg:col-start-5`. */
.tv5-editorial-grid {
    display: grid;
    gap: calc(var(--tv5-space) * 10);   /* 2.5rem */
}

@media (min-width: 64rem) {
    .tv5-editorial-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .tv5-editorial-grid > .tv5-section-head {
        grid-column: span 3 / span 3;
    }
    .tv5-editorial-grid > .tv5-editorial-body {
        grid-column: 5 / span 8;
    }
}

/* ── Section heading (serif display + hairline rule) ───────────────────────
   Was `tw:font-serif tw:text-3xl tw:font-semibold tw:tracking-tight
   tw:text-ink tw:lg:text-4xl` on the <h2>, with a short olive underline
   (`tw:mt-5 tw:block tw:h-px tw:w-10 tw:bg-olive-500/60`). */
.tv5-h2 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.875rem;                 /* text-3xl */
    line-height: calc(2.25 / 1.875);     /* text-3xl default leading */
    font-weight: 600;                    /* semibold */
    letter-spacing: -0.025em;            /* tracking-tight */
    color: #201f1d;                      /* ink */
}

@media (min-width: 64rem) {
    .tv5-h2 {
        font-size: 2.25rem;              /* lg:text-4xl */
        line-height: calc(2.5 / 2.25);   /* lg:text-4xl default leading */
    }
}

.tv5-rule {
    display: block;
    height: 1px;
    width: calc(var(--tv5-space) * 10);              /* w-10 = 2.5rem */
    margin-top: calc(var(--tv5-space) * 5);          /* mt-5 = 1.25rem */
    background: color-mix(in srgb, #6b8051 60%, transparent);  /* olive-500/60 */
}

/* Shared transition — the exact property list Tailwind's `transition` utility
   emits, so hover/state changes ease identically wherever it's used. */
.tv5-transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

/* ── Closing full-bleed CTA (ctafinal.blade) ───────────────────────────────
   A dark, image-backed panel with a dimming overlay and centred call to
   action. Ported 1:1 from the Tailwind utilities it replaced. */
.tv5-cta {
    position: relative;
    overflow: hidden;
    background: #201f1d;   /* ink */
}

/* Full-bleed background photo + dimming overlay. */
.tv5-cta-bg {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.tv5-cta-overlay {
    position: absolute;
    inset: 0;
    background-color: color-mix(in oklab, #000 60%, transparent);   /* black/60 */
}

.tv5-cta-inner {
    position: relative;
    margin-inline: auto;
    max-width: 48rem;                    /* max-w-3xl (container-3xl) */
    padding-inline: 1.5rem;              /* px-6 */
    padding-block: 5rem;                 /* py-20 */
    text-align: center;
}

@media (min-width: 64rem) {
    .tv5-cta-inner {
        padding-block: 7rem;             /* lg:py-28 */
    }
}

.tv5-cta-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.875rem;                 /* text-3xl */
    line-height: calc(2.25 / 1.875);
    font-weight: 500;                    /* medium */
    color: #fff;
}

@media (min-width: 64rem) {
    .tv5-cta-title {
        font-size: 3rem;                 /* lg:text-5xl */
        line-height: 1;
    }
}

.tv5-cta-lead {
    margin-inline: auto;
    margin-top: 1.25rem;                 /* mt-5 */
    max-width: 36rem;                    /* max-w-xl (container-xl) */
    font-size: 0.95rem;
    font-weight: 300;                    /* light */
    line-height: 1.625;                  /* leading-relaxed */
    color: color-mix(in oklab, #fff 85%, transparent);   /* white/85 */
}

.tv5-cta-contacts {
    margin-top: 2rem;                    /* mt-8 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;                         /* gap-2 */
    font-size: 0.95rem;
    color: color-mix(in oklab, #fff 85%, transparent);
}

@media (min-width: 40rem) {
    .tv5-cta-contacts {
        flex-direction: row;             /* sm:flex-row */
        gap: 2.5rem;                     /* sm:gap-10 */
    }
}

.tv5-cta-contacts-label {
    color: color-mix(in oklab, #fff 60%, transparent);   /* white/60 */
}

.tv5-cta-contacts a {
    margin-left: 0.25rem;                /* ml-1 */
    font-weight: 500;                    /* medium */
    color: #fff;
}

@media (hover: hover) {
    .tv5-cta-contacts a:hover {
        color: color-mix(in oklab, #fff 80%, transparent);   /* hover:text-white/80 */
    }
}

/* Outline button. */
.tv5-cta-btn {
    margin-top: 2.5rem;                  /* mt-10 */
    display: inline-block;
    border: 1px solid color-mix(in oklab, #fff 60%, transparent);   /* border-white/60 */
    padding-inline: 2.5rem;              /* px-10 */
    padding-block: 1rem;                 /* py-4 */
    font-size: 0.8rem;
    font-weight: 600;                    /* semibold */
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #fff;
}

@media (hover: hover) {
    .tv5-cta-btn:hover {
        background-color: #fff;
        color: #201f1d;                  /* ink */
    }
}

/* ── Recommended Tours — portrait carousel (recommended.blade.php) ──────────
   Full-width Owl carousel of nearby-tour cards. Section padding comes from the
   shared .tv5-section; this adds the top hairline + overflow clipping. The card
   is the group hover parent: on hover the image scales and the CTA brightens. */
/* Hairline top and bottom with a soft inset shadow just inside each edge, the
   same seam treatment as the cream bands — so this white section reads as its
   own panel instead of blending into the white sections around it. */
.tv5-rec-section {
    overflow: hidden;
    border-top: 1px solid #e4e0d5;
    border-bottom: 1px solid #e4e0d5;
    box-shadow: inset 0 6px 12px -8px rgba(32, 31, 29, 0.16),
                inset 0 -6px 12px -8px rgba(32, 31, 29, 0.16);
}

.tv5-rec-head {
    margin-bottom: 2.5rem;   /* mb-10 */
    text-align: center;
}

@media (min-width: 64rem) {
    .tv5-rec-head {
        margin-bottom: 3.5rem;   /* lg:mb-14 */
    }
}

/* Centred variant of the shared hairline rule (adds mx-auto). */
.tv5-rule-center {
    margin-inline: auto;
}

.tv5-rec-slide {
    padding-inline: 0.5rem;   /* px-2 */
}

/* Caption below the photo, not over it — see the note in recommended.blade.
   The card is the group-hover parent for the image push and the arrow. */
.tv5-rec-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.tv5-rec-card-media {
    position: relative;
    display: block;
    overflow: hidden;            /* keeps the zoom inside the frame */
    background-color: #f2efe8;   /* parchment, so a missing photo isn't a black hole */
}

.tv5-rec-card-img {
    display: block;
    height: 420px;
    width: 100%;
    object-fit: cover;
    transition-duration: .7s;    /* duration-700 (overrides .tv5-transition) */
}

/* Duration reads as a stamp on the corner of the photo. Ink on the picture,
   so it works over any image without needing a gradient behind it. */
.tv5-rec-card-badge {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #201f1d;   /* ink */
    color: #f2efe8;              /* parchment */
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    padding: 7px 11px;
}

.tv5-rec-card-body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem .15rem 0;
}

/* Two lines, always: names run from 20 to 250 characters, so a one-line title
   reserves the second rather than letting the CTA jump up and break the row. */
.tv5-rec-card-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.06rem;
    line-height: 1.38;
    font-weight: 500;
    color: #201f1d;              /* ink */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * 1.38em);
}

.tv5-rec-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #5b574d;              /* stone */
}

.tv5-rec-card-arrow {
    transition: transform .3s ease;
}

@media (hover: hover) {
    .tv5-rec-card:hover .tv5-rec-card-img {
        scale: 1.05;
    }
    .tv5-rec-card:hover .tv5-rec-card-title {
        color: #4a5e2f;          /* olive-700 */
    }
    .tv5-rec-card:hover .tv5-rec-card-cta {
        color: #201f1d;          /* ink */
    }
    .tv5-rec-card:hover .tv5-rec-card-arrow {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv5-rec-card-arrow { transition: none; }
}

/* ── Sticky sub-nav / tab bar (subnav.blade.php) ───────────────────────────
   NOTE: .tv5-subnav and .tv5-tab already have base rules earlier in this file
   (.tv5-subnav sets `top`; .tv5-tab sets colour + :hover + .is-active). The
   rules below ADD the layout/border/backdrop properties those base rules don't
   set. The earlier .tv5-tab.is-active (specificity 0,2,0) still wins over this
   .tv5-tab base (0,1,0) for the active underline, so scroll-spy is unaffected. */
.tv5-subnav {
    position: sticky;
    z-index: 40;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #e4e0d5;
    background-color: color-mix(in oklab, #faf9f6 95%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.tv5-subnav-bar {
    display: flex;
    height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tv5-subnav-tabs {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 1.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b574d;
    /* Left breathing room so the sliding marker (which extends 12px left of the
       first tab) never clips against the container edge. */
    padding-left: 14px;
}
/* Horizontal scroll only when the tabs genuinely overflow (small screens);
   at desktop they fit, so no scrollbar. Scrollbar hidden when it does appear. */
@media (max-width: 64rem) {
    .tv5-subnav-tabs {
        overflow-x: auto;
        scrollbar-width: none;              /* Firefox */
        -ms-overflow-style: none;           /* IE/Edge legacy */
    }
    .tv5-subnav-tabs::-webkit-scrollbar { display: none; }   /* WebKit */
}
.tv5-tab {
    display: flex;
    height: 100%;
    align-items: center;
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-color: transparent;
}
@media (hover: hover) {
    .tv5-tab:hover {
        border-color: #a9b58f;
        color: #201f1d;
    }
}
.tv5-subnav-actions {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 64rem) {
    .tv5-subnav-actions {
        display: flex;
    }
}
.tv5-subnav-itinerary {
    font-size: 0.68rem;                 /* match .tv5-subnav-cta (Request Proposal) */
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b574d;
}
@media (hover: hover) {
    .tv5-subnav-itinerary:hover {
        color: #201f1d;
    }
}
.tv5-subnav-itinerary-icon {
    margin-left: 0.25rem;
    font-size: 0.65rem;
}
.tv5-subnav-cta {
    /* Slightly smaller text than the bottom "Enquire Now" so the longer
       "Request Proposal" label doesn't read as an oversized button. */
    padding-inline: 1.1rem;
    padding-block: 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   SUBNAV — modern refinements: a sliding SQUARE marker behind the active tab,
   a reading-progress line on the bottom edge, and a "locked" feel (shorter bar
   + stronger blur + soft shadow) once the bar is stuck while scrolling.
   ══════════════════════════════════════════════════════════════════════════ */

/* Positioning context for the sliding marker + progress line. */
.tv5-subnav { position: sticky; }
.tv5-subnav-tabs { position: relative; }

/* Sliding square marker behind the active tab. JS sets left/width to match the
   active tab; the eased transition does the sliding. Square, not a pill.
   Ink-filled so it echoes the dark action bar at the bottom — the sub-nav
   itself stays light, so only ONE element on the page shouts. */
.tv5-tab-pill {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    width: 0;
    height: 2.1rem;
    transform: translateY(-50%);
    background: #201f1d;                                         /* ink */
    border-radius: 0;                                            /* square corners */
    pointer-events: none;
    opacity: 0;
    transition: left 0.45s cubic-bezier(0.5, 0.05, 0.15, 1),
                width 0.45s cubic-bezier(0.5, 0.05, 0.15, 1),
                opacity 0.3s ease;
}
.tv5-tab-pill.is-ready { opacity: 1; }

/* Tabs ride above the marker; the active tab sits on the ink block, so it goes
   white. The underline is no longer needed. */
.tv5-tab { position: relative; z-index: 1; }
.tv5-tab.is-active {
    color: #fff;
    font-weight: 600;
    border-bottom-color: transparent;       /* underline replaced by the marker */
}

/* Reading-progress line on the bottom edge of the bar. */
.tv5-subnav-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #6b8051, #4a5e2f);   /* olive-mid → olive */
    transition: width 0.12s linear;
    pointer-events: none;
}

/* Locked feel while stuck: bar tightens, blur/backdrop deepen, soft shadow. */
.tv5-subnav {
    transition: box-shadow 0.4s ease, background-color 0.4s ease;
}
.tv5-subnav.is-stuck {
    box-shadow: 0 6px 24px rgba(32, 31, 29, 0.07);
    background-color: color-mix(in oklab, #faf9f6 93%, transparent);
}
.tv5-subnav-bar { transition: height 0.4s cubic-bezier(0.2, 0.6, 0.2, 1); }
.tv5-subnav.is-stuck .tv5-subnav-bar { height: 3rem; }

/* Full Itinerary arrow + CTA sheen micro-interactions. */
@media (hover: hover) {
    .tv5-subnav-itinerary:hover .tv5-subnav-itinerary-icon {
        transform: translate(2px, -2px);
    }
}
.tv5-subnav-itinerary-icon {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.tv5-subnav-cta,
.tv5-actionbar-cta {
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1),
                box-shadow 0.3s ease;
}
.tv5-subnav-cta::after,
.tv5-actionbar-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: translateX(-220%) skewX(-18deg);   /* GPU-composited, off to the left */
    pointer-events: none;
}
@media (hover: hover) {
    .tv5-subnav-cta:hover,
    .tv5-actionbar-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(74, 94, 47, 0.26);
    }
    .tv5-subnav-cta:hover::after,
    .tv5-actionbar-cta:hover::after { animation: tv5-sheen 0.8s ease; }
}
@keyframes tv5-sheen {
    from { transform: translateX(-220%) skewX(-18deg); }
    to   { transform: translateX(320%)  skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tv5-tab-pill,
    .tv5-subnav-bar,
    .tv5-subnav-progress { transition: none; }
    .tv5-subnav-cta::after,
    .tv5-actionbar-cta::after { display: none; }
}

/* ── Inclusions & Exclusions (inclusions.blade.php) ── */
.tv5-incl-section {
    border-top: 1px solid #e4e0d5;   /* border-t border-line */
}

.tv5-incl-grid {
    margin-top: 2.5rem;   /* mt-10 */
    display: grid;
    gap: 2.5rem;          /* gap-10 */
}

@media (min-width: 64rem) {
    .tv5-incl-grid {
        margin-top: 3.5rem;                          /* lg:mt-14 */
        grid-template-columns: repeat(2, minmax(0, 1fr));  /* lg:grid-cols-2 */
        gap: 4rem;                                   /* lg:gap-16 */
    }
}

.tv5-incl-heading {
    margin-bottom: 1.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.tv5-incl-heading--yes {
    color: #4a5e2f;   /* olive-700 */
}

.tv5-incl-heading--no {
    color: #9a958a;   /* muted — what's absent shouldn't shout */
}

/* One marker per row (the old markup stacked a bullet, an image tick and a
   heading icon). Rows sit on hairlines, like the page's other quiet rules. */
.tv5-incl-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tv5-incl-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 0;
    border-top: 1px solid #e7e3da;
    font-size: 0.98rem;
    line-height: 1.6;
}
.tv5-incl-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.tv5-incl-mark {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 0.28rem;
}
/* Tick vs cross — different shapes, so the meaning reads without needing red. */
.tv5-incl-list--yes .tv5-incl-mark { color: #4a5e2f; }   /* olive */
.tv5-incl-list--no  .tv5-incl-mark { color: #9a958a; }   /* muted */
.tv5-incl-list--no  .tv5-incl-item { color: #6f6a60; }

/* ── Journey Map (map.blade.php) ───────────────────────────────────────────
   Two-column journey panel: an ordered stop list beside the interactive map.
   Preserves the Mapbox JS hooks (#tv5-map, data-stops). The stop row is the
   group-hover parent — hovering a row shifts its name + arrow to olive. */
.tv5-journey {
    border-block-style: solid;
    border-block-width: 1px;
    border-color: #e4e0d5;              /* line */
    background-color: #f2efe8;           /* parchment */
}

.tv5-journey-inner {
    padding-block: 4rem;                 /* py-16 */
}
@media (min-width: 64rem) {
    .tv5-journey-inner {
        padding-block: 5rem;             /* lg:py-20 */
    }
}

.tv5-journey-head {
    margin-bottom: 2.5rem;               /* mb-10 */
}
@media (min-width: 64rem) {
    .tv5-journey-head {
        margin-bottom: 3rem;             /* lg:mb-12 */
    }
}

.tv5-journey-intro {
    margin-top: 1.25rem;                 /* mt-5 */
    max-width: 36rem;                    /* max-w-xl */
    font-size: 0.95rem;
    line-height: 1.625;                  /* leading-relaxed */
    color: #5b574d;                      /* stone */
}

.tv5-journey-grid {
    display: grid;
    gap: 2rem;                           /* gap-8 */
}
@media (min-width: 64rem) {
    .tv5-journey-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

.tv5-map-list {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style-type: none;
}
@media (min-width: 64rem) {
    .tv5-map-list {
        order: 1;
        grid-column: span 4 / span 4;
    }
}

.tv5-map-item {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #e4e0d5;               /* line */
}
.tv5-map-item:last-child {
    border-bottom-style: solid;
    border-bottom-width: 0;
}

.tv5-map-row {
    display: flex;
    width: 100%;
    align-items: baseline;
    gap: 1rem;                           /* gap-4 */
    padding-block: 0.875rem;             /* py-3.5 */
    text-align: left;
}

.tv5-map-num {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 0.875rem;                 /* text-sm */
    line-height: calc(1.25 / 0.875);     /* text-sm default leading */
    color: #4a5e2f;                      /* olive-700 */
    font-variant-numeric: tabular-nums;
}

.tv5-map-body {
    flex: 1;
}

.tv5-map-name {
    font-weight: 500;                    /* medium */
    color: #201f1d;                      /* ink */
}
.tv5-map-row:hover .tv5-map-name {
    color: #4a5e2f;                      /* group-hover:text-olive-700 */
}

.tv5-map-day {
    margin-left: 0.5rem;                 /* ml-2 */
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #8b877c;                      /* mist */
}

.tv5-map-jump {
    font-size: 0.7rem;
    color: #8b877c;                      /* mist */
}
.tv5-map-row:hover .tv5-map-jump {
    color: #4a5e2f;                      /* group-hover:text-olive-700 */
}

.tv5-map-col {
    order: 1;
}
@media (min-width: 64rem) {
    .tv5-map-col {
        order: 2;
        grid-column: span 8 / span 8;
    }
}

.tv5-map-canvas {
    height: 320px;
    width: 100%;
}
@media (min-width: 40rem) {
    .tv5-map-canvas {
        height: 420px;
    }
}
@media (min-width: 64rem) {
    .tv5-map-canvas {
        height: 520px;
    }
}

/* ── Carousel nav (Where You'll Stay + Featured Properties) ─────────────────
   Owl's default nav sits on top of the first and last card. Push the buttons
   outside the track and centre them on the card.
   Owl appends .owl-nav *after* the stage, so a percentage measured against the
   carousel would include the nav's own height and ride high. Stretching .owl-nav
   over .owl-stage-outer instead gives the buttons a box that is exactly as tall
   as the cards, so 50% is the card's true middle whatever the content height.
   The gutter shrinks on narrow screens where there's no room beside the track,
   and the buttons return to overlaying the edge of the card. */
.tv5-prop-carousel {
    position: relative;
    /* 44px button + the slide's own 4px padding + 8px of air, so the button
       clears the card completely instead of resting on its corner. */
    --tv5-nav-out: 56px;
}

.tv5-prop-carousel .owl-stage-outer {
    position: relative;
}

/* Overlay the nav on the cards, but let clicks through to the card links —
   only the buttons themselves stay clickable. */
.tv5-prop-carousel .owl-nav {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

.tv5-prop-carousel .owl-nav button.owl-prev,
.tv5-prop-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #faf9f6;        /* ivory, matches the card */
    border: 1px solid #e4e0d5;        /* hairline */
    border-radius: 0;                 /* squared corners, like the rest of V5 */
    color: #201f1d;                   /* ink */
    font-size: 0.95rem;
    box-shadow: 0 2px 10px rgb(32 31 29 / 0.10);
    transition: background-color .3s, color .3s, border-color .3s;
}

.tv5-prop-carousel .owl-nav button.owl-prev { left: calc(-1 * var(--tv5-nav-out)); }
.tv5-prop-carousel .owl-nav button.owl-next { right: calc(-1 * var(--tv5-nav-out)); }

@media (hover: hover) {
    .tv5-prop-carousel .owl-nav button.owl-prev:hover,
    .tv5-prop-carousel .owl-nav button.owl-next:hover {
        background-color: #201f1d;    /* ink */
        border-color: #201f1d;
        color: #faf9f6;
    }
}

/* Owl greys out a disabled arrow; keep that legible against the ivory face. */
.tv5-prop-carousel .owl-nav button.disabled {
    opacity: 0.35;
    cursor: default;
}

/* No room beside the track below the container's breakpoint — tuck the buttons
   back over the card edge rather than letting them push the page sideways. */
@media (max-width: 1279px) {
    .tv5-prop-carousel {
        --tv5-nav-out: -4px;
    }
}

/* ── Featured Properties — accommodation cards (properties.blade.php) ────────
   Shares the card system with hotels (.tv5-acc-*) and the >5-item Owl carousel
   (.tv5-prop-carousel). Card is the group-hover parent for the image zoom. */
.tv5-prop-section {
    border-top: 1px solid #e4e0d5;   /* border-t border-line */
    background-color: #f2efe8;        /* bg-parchment */
}

.tv5-prop-slide {
    padding-inline: 0.25rem;   /* px-1 */
}

.tv5-prop-card {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    background-color: #faf9f6;         /* bg-ivory */
    box-shadow: 0 1px 0 #e4e0d5;       /* shadow line */
}

.tv5-prop-imgwrap {
    display: block;
    overflow: hidden;
}

.tv5-prop-img {
    height: 13rem;             /* h-52 */
    width: 100%;
    object-fit: cover;
    transition-duration: .7s;  /* duration-700 (overrides .tv5-transition) */
}

@media (hover: hover) {
    .tv5-prop-card:hover .tv5-prop-img {
        scale: 1.04;           /* group-hover:scale-[1.04] */
    }
}

.tv5-prop-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem;          /* p-5 */
}

.tv5-prop-type {
    font-size: 0.66rem;                /* text-[0.66rem] */
    font-weight: 600;                  /* semibold */
    text-transform: uppercase;
    letter-spacing: 0.18em;            /* tracking-[0.18em] */
    color: #8b877c;                    /* mist */
}

.tv5-prop-title {
    margin-top: 0.375rem;              /* mt-1.5 */
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;               /* text-lg */
    font-weight: 500;                  /* medium */
    line-height: 1.375;                /* leading-snug */
    color: #201f1d;                    /* ink */
}

.tv5-prop-loc {
    margin-top: 0.25rem;               /* mt-1 */
    font-size: 0.8rem;                 /* text-[0.8rem] */
    color: #5b574d;                    /* stone */
}

.tv5-prop-cta {
    margin-top: auto;                  /* mt-auto */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                       /* gap-2 */
    padding-top: 1rem;                 /* pt-4 */
    font-size: 0.72rem;                /* text-[0.72rem] */
    font-weight: 600;                  /* semibold */
    text-transform: uppercase;
    letter-spacing: 0.16em;            /* tracking-[0.16em] */
    color: #4a5e2f;                    /* olive-700 */
}

@media (hover: hover) {
    .tv5-prop-cta:hover {
        color: #33421f;                /* olive-900 */
    }
}

/* ── Our Recent Blog — 3-up card grid (blog.blade.php) ─────────────────────
   WordPress-fed blog cards. Own base rule (top hairline, NO overflow clip).
   Card is the group-hover parent: image scales + title shifts to olive. */
.tv5-blog-section {
    border-top: 1px solid #e4e0d5;                /* border-t border-line */
    padding-block: 4rem;                          /* py-16 */
}

@media (min-width: 64rem) {
    .tv5-blog-section {
        padding-block: 6rem;                      /* lg:py-24 */
    }
}

/* ── The masthead: lead post + hairline list ────────────────────────────── */
.tv5-blog-masthead {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 55rem) {
    .tv5-blog-masthead {
        grid-template-columns: 1.35fr 1fr;
        gap: 2.75rem;
        align-items: start;
    }
}

/* ── Lead ── */
.tv5-blog-lead {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tv5-blog-lead-media {
    position: relative;
    display: block;
    overflow: hidden;                 /* holds the zoom inside the frame */
    background-color: #f2efe8;        /* parchment, so a missing photo isn't a hole */
}

.tv5-blog-lead-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .9s ease;
}

/* "Latest" is true by construction: the API returns posts date-descending, so
   position one IS the newest. */
.tv5-blog-flag {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #201f1d;        /* ink */
    color: #f2efe8;                   /* parchment */
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    padding: 7px 12px;
}

.tv5-blog-lead-body {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding-top: 1.1rem;
}

.tv5-blog-lead-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    line-height: 1.28;
    font-weight: 500;
    color: #201f1d;                   /* ink */
    text-wrap: balance;
    transition: color .3s;
}

@media (min-width: 55rem) {
    .tv5-blog-lead-title { font-size: 1.72rem; }
}

.tv5-blog-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #5b574d;                   /* stone */
    transition: color .3s;
}

.tv5-blog-arrow {
    transition: transform .3s ease;
}

@media (hover: hover) {
    .tv5-blog-lead:hover .tv5-blog-lead-img { transform: scale(1.04); }
    .tv5-blog-lead:hover .tv5-blog-lead-title { color: #4a5e2f; }   /* olive-700 */
    .tv5-blog-lead:hover .tv5-blog-cta { color: #201f1d; }
    .tv5-blog-lead:hover .tv5-blog-arrow,
    .tv5-blog-all:hover .tv5-blog-arrow { transform: translateX(4px); }
}

/* ── The rest ── */
.tv5-blog-rest {
    display: flex;
    flex-direction: column;
}

.tv5-blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e4e0d5;
}

.tv5-blog-item {
    display: grid;
    grid-template-columns: 104px 1fr;   /* wide enough to read the photo */
    gap: 1.1rem;
    align-items: center;
    padding: .95rem 0;
    border-bottom: 1px solid #e4e0d5;
    text-decoration: none;
    color: inherit;
}

.tv5-blog-item-thumb {
    display: block;
    overflow: hidden;
    background-color: #f2efe8;
}

/* Landscape, and a uniform frame so the rows stay level. The source images are
   all over the place (2.33, 2.0, 1.5, 1.33), so something has to give: 3:2 is
   the middle of that spread and crops least across the set. A square frame,
   which is what this was, cut the subject out of every one of them. */
.tv5-blog-item-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .7s ease;
}

.tv5-blog-item-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: .97rem;
    line-height: 1.35;
    font-weight: 500;
    color: #201f1d;                   /* ink */
    transition: color .3s;
    /* Headlines run long; two lines keeps every row the same height. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

@media (hover: hover) {
    .tv5-blog-item:hover .tv5-blog-item-img { transform: scale(1.07); }
    .tv5-blog-item:hover .tv5-blog-item-title { color: #4a5e2f; }
}

.tv5-blog-all {
    align-self: flex-start;
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #4a5e2f;                   /* olive-700 */
    text-decoration: none;
    transition: color .3s;
}
@media (hover: hover) {
    .tv5-blog-all:hover { color: #201f1d; }
}

/* ── Reveal on scroll ──
   The lead rises first, then each list row follows on its own delay, so the
   column assembles itself the way a page is laid out rather than all at once. */
.tv5-blog-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--tv5-blog-d, 0ms);
}
.tv5-blog-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Safety net: if JS never runs, the reveal script never adds .is-in and the
   posts would stay invisible. When scripting is off, show them outright. */
@media (scripting: none) {
    .tv5-blog-reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tv5-blog-reveal,
    .tv5-blog-arrow,
    .tv5-blog-lead-img,
    .tv5-blog-item-img { transition: none; }
    .tv5-blog-reveal { opacity: 1; transform: none; }
}

/* ── Sticky action bar (actionbar.blade.php) — floating INK box ─────────────
   .tv5-actionbar is the fixed, full-width TRANSPARENT positioner that the JS
   toggles (.is-tucked slides it down); it just centres the box. The visible
   piece is .tv5-actionbar-row: a compact, square (no radius) ink box that
   floats above the bottom edge, not a full-width bar. */
.tv5-actionbar-shell {
    position: fixed;
    inset-inline: 0;
    bottom: 0;                           /* flush to the bottom edge, no gap */
    z-index: 50;
    /* transparent positioner — no bg/border/blur here anymore */
    display: flex;
    justify-content: center;
    pointer-events: none;               /* only the box catches clicks */
}

.tv5-actionbar-row {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    /* Compact box, not full width. Square corners, no side shadow (a crisp box,
       not a floating card). Sits flush against the bottom. */
    width: auto;
    max-width: calc(100vw - 40px);
    padding: 0.75rem 0.8rem 0.75rem 1.6rem;
    background: #201f1d;                 /* ink */
    color: #f3f1ec;
    border-radius: 0;                    /* square */
    box-shadow: none;
}
/* Override the .tv5-container max-width/padding this element also carries, so
   it hugs its content instead of spanning the section width. */
.tv5-actionbar-row.tv5-container {
    max-width: calc(100vw - 40px);
    margin-inline: 0;
    padding-inline: 1.6rem;
    padding-inline-end: 0.8rem;
}
@media (min-width: 64rem) {
    .tv5-actionbar-row { gap: 1.8rem; }
}

/* A thin divider between the price and the contact/CTA cluster. */
.tv5-actionbar-summary { position: relative; }
.tv5-actionbar-summary::after {
    content: "";
    position: absolute;
    right: -0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 40rem) {
    .tv5-actionbar-summary::after { display: none; }
}

.tv5-actionbar-summary {
    margin: 0;
    font-size: 0.9rem;
    color: #f3f1ec;                      /* light on the ink box */
}
@media (min-width: 40rem) {
    .tv5-actionbar-summary {
        font-size: 1rem;
        line-height: calc(1.5 / 1);
    }
}

.tv5-actionbar-strong {
    font-weight: 700;
    color: #fff;
}

.tv5-actionbar-muted {
    color: #b8b2a6;                      /* muted light */
}

.tv5-actionbar-perperson {
    display: none;
    color: #b8b2a6;
}
@media (min-width: 40rem) {
    .tv5-actionbar-perperson {
        display: inline;
    }
}

.tv5-actionbar-contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 40rem) {
    .tv5-actionbar-contact {
        gap: 1.25rem;
    }
}

.tv5-actionbar-link {
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: #cfc9bd;                      /* light on the ink box */
}
@media (hover: hover) {
    .tv5-actionbar-link:hover {
        color: #fff;
    }
}
@media (min-width: 48rem) {
    .tv5-actionbar-link--phone {
        display: inline-flex;
    }
}
@media (min-width: 64rem) {
    .tv5-actionbar-link--email {
        display: inline-flex;
    }
}

.tv5-actionbar-icon {
    color: #a9b58f;                      /* soft olive, visible on ink */
}

.tv5-actionbar-link-text {
    display: none;
}
@media (min-width: 64rem) {
    .tv5-actionbar-link-text--phone {
        display: inline;
    }
}
@media (min-width: 80rem) {
    .tv5-actionbar-link-text--email {
        display: inline;
    }
}

.tv5-actionbar-cta {
    white-space: nowrap;
    padding-inline: 1.25rem;
    padding-block: 0.625rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
@media (min-width: 40rem) {
    .tv5-actionbar-cta {
        padding-inline: 1.5rem;
    }
}

/* ── Action bar refinements: staggered content on reveal + editorial price.
   (The old full-width glass/blur/shadow on .tv5-actionbar-shell was removed —
   the shell is now a transparent positioner; only the ink box is visible.) ── */

/* Price reads editorial: Playfair italic in terracotta, matching the story.
   Bumped up in size so the 700 weight actually reads as bold — serif italic at
   body size looks thin otherwise. */
.tv5-actionbar-price {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.1em;              /* a touch larger than the summary, not shouting */
    line-height: 1;
    color: #e9b98f;                 /* warm terracotta, legible on the ink box */
}

/* Summary + contact drift up in sequence as the bar reveals. */
.tv5-actionbar-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.tv5-actionbar:not(.is-tucked) .tv5-actionbar-item {
    opacity: 1;
    transform: none;
}
.tv5-actionbar:not(.is-tucked) .tv5-actionbar-item:nth-child(1) { transition-delay: 0.12s; }
.tv5-actionbar:not(.is-tucked) .tv5-actionbar-item:nth-child(2) { transition-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
    .tv5-actionbar-item { transition: none; }
}

/* ── Gallery (gallery.blade.php) ───────────────────────────────────────────
   Fancybox thumbnail grid + optional video tile. Figure is the group-hover
   parent for the image zoom. Keeps data-fancybox / href hooks in the markup. */
/* ── Cream band ─────────────────────────────────────────────────────────────
   A reusable parchment ground that breaks out to the full viewport width, with
   a hairline top/bottom and a soft inset shadow at each seam. Same treatment as
   Overview, lifted into a shared class so the page can alternate cream and
   white sections in a deliberate rhythm rather than at random. The ground is a
   pseudo-element because .tv5-container caps and clips at 1760px, which would
   otherwise crop the colour before the screen edge. */
.tv5-cream-band {
    position: relative;
    background: transparent;
}
.tv5-cream-band > .tv5-container {
    position: relative;
    z-index: 1;
}
.tv5-cream-band::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f2efe8;                  /* parchment */
    border-top: 1px solid #e0dad0;
    border-bottom: 1px solid #e0dad0;
    box-shadow: inset 0 6px 12px -8px rgba(32, 31, 29, 0.16),
                inset 0 -6px 12px -8px rgba(32, 31, 29, 0.16);
    pointer-events: none;
    z-index: 0;
}

.tv5-gallery-section {
    padding-block: 4rem;             /* py-16 */
}

@media (min-width: 64rem) {
    .tv5-gallery-section {
        padding-block: 6rem;         /* lg:py-24 */
    }
}

/* Gallery grid. A tour's photo count is arbitrary (Amalfi has 7), so a plain
   3-column grid strands the remainder on the last row — one lonely photo with
   two empty cells beside it.

   The grid is laid on TWELVE tracks and each photo spans four, so it still
   reads as three per row. Twelve divides evenly enough to both widen AND centre
   the leftovers: a lone last photo spans six tracks starting at four (4→9),
   which is exactly centred; a last pair span six each. They fill the space
   without stretching to a full-bleed panorama, which would look forced beside
   their neighbours. (Six tracks can't centre a lone photo — a half-row span
   would sit off to one side.) */
.tv5-gallery-grid {
    margin-top: 2.5rem;              /* mt-10 */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* grid-cols-2 */
    gap: 0.75rem;                    /* gap-3 */
}

@media (min-width: 64rem) {
    .tv5-gallery-grid {
        margin-top: 3.5rem;          /* lg:mt-14 */
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 1rem;                   /* lg:gap-4 */
    }
    .tv5-gallery-grid > * { grid-column: span 4; }   /* three across */

    /* Remainder of one (7, 10, 13 …): half a row, dead centre (tracks 4–9). */
    .tv5-gallery-grid > *:last-child:nth-child(3n + 1) {
        grid-column: 4 / span 6;
    }
    /* Remainder of two (5, 8, 11 …): half a row each, filling the row. */
    .tv5-gallery-grid > *:nth-last-child(2):nth-child(3n + 1) { grid-column: 1 / span 6; }
    .tv5-gallery-grid > *:last-child:nth-child(3n + 2)        { grid-column: 7 / span 6; }
}

.tv5-gallery-video {
    height: 13rem;                   /* h-52 */
    width: 100%;
    background-color: #201f1d;       /* bg-ink */
    object-fit: cover;
}

@media (min-width: 40rem) {
    .tv5-gallery-video {
        height: 16rem;               /* sm:h-64 */
    }
}

@media (min-width: 64rem) {
    .tv5-gallery-video {
        height: 18rem;               /* lg:h-72 */
    }
}

.tv5-gallery-fig {
    display: block;
    overflow: hidden;
}

.tv5-gallery-img {
    height: 13rem;                   /* h-52 */
    width: 100%;
    object-fit: cover;
    transition-duration: .7s;        /* duration-700 (overrides .tv5-transition) */
}

@media (min-width: 40rem) {
    .tv5-gallery-img {
        height: 16rem;               /* sm:h-64 */
    }
}

@media (min-width: 64rem) {
    .tv5-gallery-img {
        height: 18rem;               /* lg:h-72 */
    }
}

@media (hover: hover) {
    .tv5-gallery-fig:hover .tv5-gallery-img {
        scale: 1.05;                 /* group-hover:scale-[1.05] */
    }
}

/* ── Where You'll Stay — hotel accommodation cards (hotels.blade.php) ────────
   Shares the card shell with Featured Properties: reuses .tv5-prop-section /
   .tv5-prop-slide / .tv5-prop-card / .tv5-prop-imgwrap and the .tv5-acc-* +
   .tv5-prop-carousel owl hooks. Only the parts that differ from the property
   card (image height, padding, type sizes, disclaimer, placeholder) live here.
   NOTE: the original `tw:bg-sand` was a no-op (no such Tailwind token existed,
   so it emitted no CSS) — the "Details coming soon" placeholder is intentionally
   left without a background, matching the previous rendered output exactly. */
.tv5-hotel-head {
    margin-bottom: 1.5rem;                /* mb-6 */
    text-align: center;
}

.tv5-hotel-disclaimer {
    margin-inline: auto;                  /* mx-auto */
    margin-bottom: 2.5rem;                /* mb-10 */
    max-width: 42rem;                     /* max-w-2xl */
    text-align: center;
    font-size: 0.85rem;                   /* text-[0.85rem] */
    font-style: italic;
    line-height: 1.625;                   /* leading-relaxed */
    color: #8b877c;                       /* mist */
}

@media (min-width: 64rem) {
    .tv5-hotel-disclaimer {
        margin-bottom: 3.5rem;            /* lg:mb-14 */
    }
}

.tv5-hotel-img {
    height: 14rem;                        /* h-56 */
    width: 100%;
    object-fit: cover;
    transition-duration: .7s;             /* duration-700 (transition list via .tv5-transition) */
}

@media (hover: hover) {
    .tv5-prop-card:hover .tv5-hotel-img {
        scale: 1.04;                      /* group-hover:scale-[1.04] */
    }
}

.tv5-hotel-img-empty {
    display: flex;
    height: 14rem;                        /* h-56 */
    width: 100%;
    align-items: center;
    justify-content: center;
    color: #8b877c;                       /* text-mist */
}

.tv5-hotel-empty-icon {
    font-size: 1.875rem;                  /* text-3xl */
    line-height: calc(2.25 / 1.875);
}

.tv5-hotel-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;                      /* p-6 */
}

/* Two lines, always — a one-line name reserves the second line rather than
   pulling everything below it up, so the location tags line up across the row.
   Names longer than two lines are clamped with an ellipsis. */
.tv5-hotel-name {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;                   /* text-xl */
    line-height: 1.4;
    font-weight: 500;                     /* medium */
    color: #201f1d;                       /* ink */
    min-height: calc(2 * 1.4em);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.tv5-hotel-loc {
    margin-top: 0.375rem;                 /* mt-1.5 */
    font-size: 0.82rem;                   /* text-[0.82rem] */
    font-weight: 600;                     /* semibold */
    text-transform: uppercase;
    letter-spacing: 0.1em;                /* tracking-[0.1em] */
    color: #4a5e2f;                       /* olive-700 */
}

.tv5-hotel-desc {
    margin-top: 0.75rem;                  /* mt-3 */
    font-size: 0.9rem;                    /* text-[0.9rem] */
    line-height: 1.625;                   /* leading-relaxed */
    color: #5b574d;                       /* stone */
}

.tv5-hotel-soon {
    margin-top: 0.75rem;                  /* mt-3 */
    font-size: 0.9rem;                    /* text-[0.9rem] */
    font-style: italic;
    color: #8b877c;                       /* mist */
}

.tv5-hotel-cta {
    margin-top: auto;                     /* mt-auto */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                          /* gap-2 */
    padding-top: 1.25rem;                 /* pt-5 */
    font-size: 0.74rem;                   /* text-[0.74rem] */
    font-weight: 600;                     /* semibold */
    text-transform: uppercase;
    letter-spacing: 0.16em;               /* tracking-[0.16em] */
    color: #4a5e2f;                       /* olive-700 */
}

@media (hover: hover) {
    .tv5-hotel-cta:hover {
        color: #33421f;                   /* hover:text-olive-900 */
    }
}

.tv5-hotel-cta-arrow {
    font-size: 0.6rem;                    /* text-[0.6rem] */
}

/* ── Location — editorial multipin map section (location.blade.php) ─────────
   Distinct from the Journey Map. Parchment panel, 3/6/3 twelve-col grid holding
   the info column, the Mapbox canvas (#tv5-location-map), and the "Nearby
   Experiences" cards (.tv5-dest-card — hover-preview JS hook). */
.tv5-location {
    border-top: 1px solid #e4e0d5;   /* border-t border-line */
    background-color: #f2efe8;       /* bg-parchment */
}

.tv5-location-grid {
    margin-top: 2.5rem;              /* mt-10 */
    display: grid;
    gap: 2.5rem;                     /* gap-10 */
}

@media (min-width: 64rem) {
    .tv5-location-grid {
        margin-top: 3.5rem;          /* lg:mt-14 */
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .tv5-location-col-3 {
        grid-column: span 3 / span 3;
    }
    .tv5-location-col-6 {
        grid-column: span 6 / span 6;
    }
}

.tv5-location-eyebrow {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #8b877c;                  /* mist */
}

.tv5-location-dot {
    margin-inline: 0.25rem;          /* mx-1 */
    color: #a9b58f;                  /* olive-300 */
}

.tv5-location-subhead {
    margin-top: 1rem;                /* mt-4 */
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;              /* text-2xl */
    line-height: calc(2 / 1.5);
    font-weight: 500;
    color: #201f1d;                  /* ink */
}

.tv5-location-lead {
    margin-top: 1rem;                /* mt-4 */
    font-size: .92rem;
    line-height: 1.625;
    color: #5b574d;                  /* stone */
}

.tv5-location-fact {
    margin-top: 1.25rem;             /* mt-5 */
    border-top: 1px solid #e4e0d5;
    padding-top: 1.25rem;            /* pt-5 */
}
.tv5-location-fact--first {
    margin-top: 1.5rem;              /* mt-6 */
}

.tv5-location-fact-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #8b877c;                  /* mist */
}

.tv5-location-fact-value {
    margin-top: 0.375rem;            /* mt-1.5 */
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;            /* text-lg */
    line-height: calc(1.75 / 1.125);
    color: #201f1d;                  /* ink */
}

.tv5-location-map {
    height: 320px;
    width: 100%;
}
@media (min-width: 40rem) {
    .tv5-location-map {
        height: 420px;
    }
}
@media (min-width: 64rem) {
    .tv5-location-map {
        height: 540px;
    }
}

/* Capped to the map's height so the three columns end on the same line; the
   list scrolls inside itself rather than stretching the section.
   The scrollbar is left visible on purpose — it's the only cue that there are
   more experiences below the fold — but toned down to the page's palette. */
.tv5-dest-list {
    margin-top: 1rem;                /* mt-4 */
    display: flex;
    max-height: 540px;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding-right: 0.6rem;
    scrollbar-width: thin;                    /* Firefox */
    scrollbar-color: #c9c3b4 transparent;
}
.tv5-dest-list::-webkit-scrollbar {
    width: 6px;
}
.tv5-dest-list::-webkit-scrollbar-track {
    background: #e7e3da;                      /* hairline, as a quiet rail */
}
.tv5-dest-list::-webkit-scrollbar-thumb {
    background: #a9b58f;                      /* olive-300 */
}
@media (hover: hover) {
    .tv5-dest-list::-webkit-scrollbar-thumb:hover {
        background: #6b8051;                  /* olive-500 */
    }
}

/* Photo above the name, the way V4 showed it — at 5rem wide the thumbnail was
   too small to tell one Italian coastline from another, which is the whole job
   of this column. Stacking gives the image the full width of the card. */
.tv5-dest-card {
    display: block;
    border: 1px solid #e4e0d5;       /* border border-line */
    background-color: #faf9f6;       /* bg-ivory */
    overflow: hidden;                /* keeps the zoom inside the frame */
    /* The list is a fixed-height flex column, so without this every card is
       squeezed to fit and overflow:hidden eats the title. */
    flex: 0 0 auto;
}
@media (hover: hover) {
    .tv5-dest-card:hover {
        border-color: #a9b58f;       /* hover:border-olive-300 */
    }
}

.tv5-dest-imgwrap {
    display: block;
    overflow: hidden;
}

/* Placeholder for tours with no banner image — same footprint as a photo. */
.tv5-dest-imgwrap--empty {
    display: flex;
    height: 10.5rem;
    align-items: center;
    justify-content: center;
    background-color: #f2efe8;       /* parchment */
}

.tv5-dest-empty-icon {
    font-size: 1.5rem;
    color: #c9c3b4;
}

.tv5-dest-thumb {
    display: block;
    height: 10.5rem;
    width: 100%;
    object-fit: cover;
    transition-duration: .7s;        /* same slow push as the property cards */
}
@media (hover: hover) {
    .tv5-dest-card:hover .tv5-dest-thumb {
        scale: 1.04;
    }
}

.tv5-dest-body {
    padding: 0.85rem 0.9rem 0.95rem;
}

.tv5-dest-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    color: #201f1d;                  /* ink */
}
@media (hover: hover) {
    .tv5-dest-card:hover .tv5-dest-title {
        color: #4a5e2f;              /* group-hover:text-olive-700 */
    }
}

.tv5-location-empty {
    font-size: .9rem;
    line-height: 1.625;
    color: #5b574d;                  /* stone */
}

/* ── Testimonials + Search / Private Tours / Resources (extras.blade.php) ───*/

/* Client Testimonials — parchment band, centred head, Owl carousel */
/* The .tv5-testm-* block that lived here styled the "Client Testimonials"
   carousel in extras.blade.php. That section is gone — ivs_testimonial is now
   the fallback source for Traveler Reviews, which renders as the ledger
   (.tv5-review-*), so the two no longer duplicate each other. */

/* ── Explore More — the marquee (extras.blade.php) ─────────────────────────
   Split panel: journey list on one side, a photo on the other that swaps to
   match the hovered/focused row (JS in the blade toggles .is-active). Ink list,
   so it reads as a distinct closing panel rather than another pale card grid. */
/* Ground + seam come from .tv5-cream-band; no own border-top (it would double
   the hairline the band already draws). */

.tv5-res-intro {
    margin: .9rem 0 0;
    text-align: center;
    font-size: .92rem;
    color: #5b574d;                  /* stone */
}

.tv5-marquee {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid #e4e0d5;
    overflow: hidden;
}

@media (min-width: 55rem) {
    .tv5-marquee {
        margin-top: 3.25rem;
        grid-template-columns: 1fr 1fr;
        min-height: 460px;
    }
}

/* ── Left: the list ── */
.tv5-marquee-list {
    display: flex;
    flex-direction: column;
    order: 2;                        /* on mobile the photo sits above the list */
}

@media (min-width: 55rem) {
    .tv5-marquee-list { order: 0; }
}

.tv5-marquee-item {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    padding: 1.15rem 1.75rem;
    text-decoration: none;
    color: #201f1d;                  /* ink */
    border-bottom: 1px solid #e4e0d5;
    transition: background-color .4s ease, color .4s ease, padding-left .4s ease;
}
.tv5-marquee-item:last-child { border-bottom: 0; }

/* The active row (hovered, focused, or nearest on touch) inverts to ink. */
.tv5-marquee-item.is-active {
    background-color: #201f1d;       /* ink */
    color: #f2efe8;                  /* parchment */
    padding-left: 2.4rem;
}

.tv5-marquee-name {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.25;
}

@media (min-width: 55rem) {
    .tv5-marquee-name { font-size: 1.32rem; }
}

.tv5-marquee-go {
    flex: none;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #e9b98f;                  /* warm terracotta, reads on ink */
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s ease, transform .4s ease;
}
.tv5-marquee-item.is-active .tv5-marquee-go {
    opacity: 1;
    transform: none;
}
.tv5-marquee-arrow {
    display: inline-block;
    transition: transform .3s ease;
}
.tv5-marquee-item.is-active .tv5-marquee-arrow {
    transform: translateX(3px);
}

/* ── Right: the photo stage ── */
.tv5-marquee-stage {
    position: relative;
    overflow: hidden;
    background-color: #f2efe8;       /* parchment, seen for a beat during the fade */
    aspect-ratio: 3 / 2;
    order: 1;
}

@media (min-width: 55rem) {
    .tv5-marquee-stage {
        aspect-ratio: auto;          /* fills the panel height on desktop */
        order: 0;
    }
}

.tv5-marquee-photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .6s ease, transform .9s ease;
}
.tv5-marquee-photo.is-active {
    opacity: 1;
    transform: scale(1);
}

.tv5-marquee-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A soft floor so the caption stays legible over any photo. */
.tv5-marquee-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20,19,17,.78) 0%, rgba(20,19,17,.15) 42%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.tv5-marquee-cap {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.4rem;
    z-index: 2;
    color: #f2efe8;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}
.tv5-marquee-cap.is-active {
    opacity: 1;
    transform: none;
}

.tv5-marquee-cap-title {
    display: block;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: .35rem;
}

.tv5-marquee-cap-desc {
    display: block;
    font-size: .85rem;
    line-height: 1.55;
    color: rgba(242, 239, 232, .85);
    max-width: 40ch;
}

@media (prefers-reduced-motion: reduce) {
    .tv5-marquee-item,
    .tv5-marquee-go,
    .tv5-marquee-arrow,
    .tv5-marquee-photo,
    .tv5-marquee-cap { transition: none; }
}

/* ── Cinematic hero (hero.blade.php) ───────────────────────────────────────
   Hero height is set inline by tv5SizeHero() JS at runtime; the height:calc()
   below is only the pre-JS fallback (the JS inline style wins). Existing JS
   hooks (.tv5-hero-slide/.is-active/.tv5-hero-nav/data-tv5-hero-*) are kept. */
.tv5-hero {
    position: relative;
    height: calc(100svh - 3.5rem);
    overflow: hidden;
    background-color: #201f1d;
}

.tv5-hero-media {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.tv5-hero-fill {
    position: absolute;
    inset: 0;
}

.tv5-hero-nav-prev {
    position: absolute;
    left: 1rem;
    top: 50%;
    translate: 0 -50%;
}
.tv5-hero-nav-next {
    position: absolute;
    right: 1rem;
    top: 50%;
    translate: 0 -50%;
}
@media (min-width: 64rem) {
    .tv5-hero-nav-prev { left: 1.5rem; }
    .tv5-hero-nav-next { right: 1.5rem; }
}

.tv5-hero-scrim {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom in oklab,
        color-mix(in oklab, #000 25%, transparent) 0%,
        color-mix(in oklab, #000 10%, transparent) 50%,
        color-mix(in oklab, #000 80%, transparent) 100%);
}

.tv5-hero-vignette {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse 85% 70% at 15% 100%, rgba(0,0,0,0.5), transparent 68%);
}

.tv5-hero-titlewrap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding-bottom: 1.5rem;
}
@media (min-width: 64rem) {
    .tv5-hero-titlewrap { padding-bottom: 2rem; }
}

.tv5-hero-titlebox {
    max-width: 64rem;
}

.tv5-hero-eyebrow {
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.tv5-hero-eyebrow-rule {
    display: inline-block;
    height: 1px;
    width: 2.25rem;
    background-color: color-mix(in oklab, #fff 70%, transparent);
}

.tv5-hero-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.55);
}
@media (min-width: 40rem) {
    .tv5-hero-title { font-size: 2.25rem; }
}
@media (min-width: 64rem) {
    .tv5-hero-title { font-size: 2.9rem; }
}
@media (min-width: 80rem) {
    .tv5-hero-title { font-size: 3rem; }
}

.tv5-hero-journey {
    margin-top: 2.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
@media (min-width: 40rem) {
    .tv5-hero-journey {
        font-size: 0.875rem;
        line-height: calc(1.25 / 0.875);
    }
}

.tv5-hero-journey-sep {
    margin-inline: 0.5rem;
    color: color-mix(in oklab, #fff 60%, transparent);
}

.tv5-hero-scrollcue {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    display: none;
    translate: -50% 0;
    color: color-mix(in oklab, #fff 70%, transparent);
}
@media (min-width: 64rem) {
    .tv5-hero-scrollcue { display: block; }
}
@media (hover: hover) {
    .tv5-hero-scrollcue:hover { color: #fff; }
}

.tv5-hero-scrollcue-icon {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    animation: tv5-hero-breathe 2.2s ease-in-out infinite;   /* gentle, not a hard bounce */
}
@keyframes tv5-hero-breathe {
    0%, 100% { transform: translateY(0);   opacity: 0.7; }
    50%      { transform: translateY(5px); opacity: 1;   }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO ENTRANCE ANIMATION
   Cinematic load sequence: media settles from dark+blur, then eyebrow, title
   (line by line), journey meta and scroll cue rise in, in order. Ken Burns
   drift on the IMAGE hero only (video already moves). A light parallax nudge
   on the title block is applied by JS. Everything degrades to fully-visible
   with no JS and under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* Media settles in from a soft blur/darken (image hero; video keeps its own
   motion but still eases in). */
.tv5-hero.is-intro .tv5-hero-media {
    animation: tv5-hero-mediain 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes tv5-hero-mediain {
    0%   { opacity: 0; filter: blur(14px); }
    100% { opacity: 1; filter: blur(0);    }
}

/* Ken Burns — IMAGE hero only, on the active slide. Slow zoom-out + drift. */
.tv5-hero--image.is-intro .tv5-hero-slide.is-active {
    animation: tv5-hero-kenburns 22s ease-out both;
}
@keyframes tv5-hero-kenburns {
    0%   { transform: scale(1.12) translate(0, 0); }
    100% { transform: scale(1.02) translate(-1.5%, -1%); }
}

/* Entrance base state for animated children (only while .is-intro is armed —
   without it, or with no JS, children render in their natural visible state).
   The title (data-tv5-hero-title) is EXCLUDED: it is never faded as a whole —
   its visibility comes from its own line risers, so it must stay opacity:1 or
   the H1 disappears even after the lines have animated in. */
.tv5-hero.is-intro .tv5-hero-anim:not([data-tv5-hero-title]) {
    opacity: 0;
    transform: translateY(16px);
}
.tv5-hero.is-intro .tv5-hero-anim:not([data-tv5-hero-title]).is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Eyebrow rule grows from zero once the eyebrow reveals. */
.tv5-hero.is-intro .tv5-hero-eyebrow.is-in .tv5-hero-eyebrow-rule {
    animation: tv5-hero-rule 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes tv5-hero-rule {
    0%   { width: 0; }
    100% { width: 2.25rem; }
}

/* Title lines: JS wraps each visual line in .tv5-hero-line > span; the span
   rises up from a clipped mask. Delays are staggered per line by JS. */
.tv5-hero-line { display: block; overflow: hidden; }
.tv5-hero.is-intro .tv5-hero-line > span {
    display: block;
    transform: translateY(115%);
}
.tv5-hero.is-intro .tv5-hero-line.is-in > span {
    transform: translateY(0);
    transition: transform 1s cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* Stagger the fade-up children (JS also sets per-line delays for the title). */
.tv5-hero.is-intro .tv5-hero-eyebrow.is-in  { transition-delay: 0.35s; }
.tv5-hero.is-intro .tv5-hero-journey.is-in  { transition-delay: 0.15s; }
.tv5-hero.is-intro .tv5-hero-scrollcue.is-in{ transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
    .tv5-hero-scrollcue-icon,
    .tv5-hero.is-intro .tv5-hero-media,
    .tv5-hero--image.is-intro .tv5-hero-slide.is-active { animation: none; }
    .tv5-hero.is-intro .tv5-hero-anim,
    .tv5-hero.is-intro .tv5-hero-line > span { opacity: 1; transform: none; transition: none; }
    .tv5-hero.is-intro .tv5-hero-eyebrow-rule { width: 2.25rem; }
}

/* ── Start the Conversation / Quick Enquiry (contact.blade.php) ─────────────
   Form hooks (#tv5-qcform, #tv5-dates, name= fields, recaptcha) untouched. */
/* The cream ground + italy pattern from Overview, so the page opens and closes
   on the same note. Both break out to the full viewport width from pseudo-
   elements, because .tv5-container caps and clips at 1760px. */
.tv5-contact-section {
    position: relative;
    background: transparent;               /* the ground is painted by ::before */
}

.tv5-contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f2efe8;                   /* same cream as Overview */
    border-top: 1px solid #e0dad0;
    border-bottom: 1px solid #e0dad0;
    box-shadow: inset 0 6px 12px -8px rgba(32, 31, 29, 0.16),
                inset 0 -6px 12px -8px rgba(32, 31, 29, 0.16);
    pointer-events: none;
    z-index: 0;
}

.tv5-contact-section::after {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: url('/images/italy.png') repeat;
    background-size: 620px;                /* big tile = airy, same as Overview */
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 64rem) {
    .tv5-contact-section::after { background-size: 420px; opacity: 0.12; }
}

/* Content rides above the ground and the pattern. */
.tv5-contact-section > .tv5-container {
    position: relative;
    z-index: 1;
}

/* One column now the price card is gone — the form is the only thing being
   asked for, so it sits centred and narrow enough to stay readable. */
.tv5-contact-grid {
    margin-top: 2.5rem;                     /* mt-10 */
    display: grid;
    gap: 2.5rem;                            /* gap-10 */
}
@media (min-width: 64rem) {
    .tv5-contact-grid {
        margin-top: 3.5rem;                 /* lg:mt-14 */
    }
}

.tv5-contact-col-b {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
}

.tv5-form-card {
    border: 1px solid #e4e0d5;
    background-color: #faf9f6;              /* ivory */
    padding: 2rem;
}
@media (min-width: 64rem) {
    .tv5-form-card {
        padding: 2.5rem;
    }
}
.tv5-form-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
    font-weight: 500;
    color: #201f1d;
}
.tv5-form-note {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #8b877c;
}
.tv5-form-body {
    margin-top: 1.5rem;
}
.tv5-field-group {
    margin-bottom: 1rem;
}
.tv5-field-label {
    margin-bottom: 0.375rem;
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #5b574d;
}
.tv5-field {
    width: 100%;
    border: 1px solid #e4e0d5;
    background-color: #fff;
    padding-inline: 1rem;
    padding-block: 0.75rem;
    font-size: 0.92rem;
    color: #201f1d;
}
.tv5-field::placeholder {
    color: #8b877c;
}
.tv5-field:focus {
    border-color: #6b8051;
    outline-style: none;
}
.tv5-field-row {
    display: grid;
    gap: 1rem;
}
@media (min-width: 40rem) {
    .tv5-field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tv5-field-spaced {
    margin-top: 1rem;
}
.tv5-form-submit {
    margin-top: 1.5rem;
    width: 100%;
    padding-inline: 1.75rem;
    padding-block: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
@media (min-width: 40rem) {
    .tv5-form-submit {
        width: auto;
    }
}

/* ── At a glance / facts strip (facts.blade.php) ───────────────────────────
   Keeps the pre-existing .tv5-fact-card / -label / -figure / -unit / -note /
   -note--soft / -divider classes; these are the ported tw:* companions. */
/* Ink ground: the facts strip is the one dark band in the page body. On an
   activity tour it breaks the Overview-Facts-Gallery run of three creams; on a
   multi-day tour it becomes a deliberate dark accent between white sections.
   Everything inside is inverted to a light palette (see below). */
.tv5-facts {
    border-top: 1px solid #14130f;
    border-bottom: 1px solid #14130f;
    background-color: #201f1d;   /* ink */
    box-shadow: inset 0 8px 16px -10px rgba(0, 0, 0, 0.5),
                inset 0 -8px 16px -10px rgba(0, 0, 0, 0.5);
}
.tv5-facts-inner {
    padding-block: 3.5rem;
}
.tv5-facts-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.tv5-facts-aside {
    width: 100%;
    flex-shrink: 0;
}
.tv5-facts-card {
    width: 100%;
    max-width: 240px;
}
.tv5-facts-figure-lg {
    margin-top: 0.375rem;
    font-size: 1.875rem;
    line-height: calc(2.25 / 1.875);
}
/* The teaser price. Styled to match the sticky action bar's price exactly
   (Playfair italic 700 in warm terracotta) so the two read as the same voice.
   This class is only used for the price. The selector is scoped to the card so
   it outranks `.tv5-fact-card p { color:#fff }` (0,2,0) on colour. */
.tv5-facts-figure-md {
    margin-top: 0.375rem;
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
    font-style: italic;
    font-weight: 700;
}
.tv5-fact-card p.tv5-facts-figure-md {
    color: #e9b98f;                 /* warm terracotta, as on the action bar */
}
/* On the olive facts card, warm terracotta sits too close to the green and goes
   muddy (contrast ~4). Use warm cream instead so the price stays the boldest
   thing on the card. The action bar keeps terracotta — its ground is ink. */
.tv5-facts .tv5-fact-card p.tv5-facts-figure-md {
    color: #f6ede0;
}
.tv5-facts-figure-sm {
    margin-top: 0.375rem;
    font-size: 1.25rem;
    line-height: calc(1.75 / 1.25);
}
.tv5-facts-gap-xs {
    margin-top: 0.25rem;
}
.tv5-facts-gap-sm {
    margin-top: 0.375rem;
}
.tv5-facts-gap-2xs {
    margin-top: 0.125rem;
}
.tv5-facts-main {
    min-width: 0;
    flex: 1;
}
/* Right column, inverted for the ink ground. */
.tv5-facts-lede {
    margin-bottom: 2.5rem;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    line-height: 1.625;
    color: #f2efe8;                        /* parchment */
}
.tv5-facts-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
    border-top: 1px solid rgba(242, 239, 232, 0.18);   /* faint light hairline */
    padding-top: 2rem;
}
.tv5-facts-term {
    margin-bottom: 0.375rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #a9a498;                        /* warm mid-grey, reads on ink */
}
.tv5-facts-desc {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;
    line-height: calc(1.75 / 1.125);
    color: #f2efe8;                        /* parchment */
}
@media (min-width: 40rem) {
    .tv5-facts-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 64rem) {
    .tv5-facts-inner {
        padding-block: 5rem;
    }
    .tv5-facts-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .tv5-facts-aside {
        width: 240px;
    }
    .tv5-facts-lede {
        font-size: 1.5rem;
        line-height: 1.625;
    }
}

/* ── Itinerary (itinerary.blade.php) ────────────────────────────────────────
   Kensington chapter breaks + sticky-rail day timeline. Existing structural
   classes (.tv5-itin-shell/-map*, .tv5-clamp, .tv5-prose, .tv5-expand-btn) and
   all scroll-spy/map hooks (id="tv5-day-N", data-*, aria-*) are untouched. */
.tv5-itin-intro {
    margin-top: 1.25rem;
    max-width: 36rem;
    font-size: .95rem;
    line-height: 1.625;
    color: #5b574d;
}

.tv5-itin-shell-gap {
    margin-top: 2.5rem;
}
@media (min-width: 64rem) {
    .tv5-itin-shell-gap {
        margin-top: 3.5rem;
    }
}

.tv5-minw0 {
    min-width: 0;
}

.tv5-chapter {
    position: relative;
    margin-top: 3.5rem;
    display: flex;
    min-height: 360px;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 0;                 /* square — a cinematic break, not a card */
    background-color: #201f1d;
}
@media (min-width: 64rem) {
    .tv5-chapter {
        margin-top: 5rem;
        min-height: 420px;
        /* Full-bleed to the LEFT viewport edge, breaking out of the itinerary
           column + container. The right edge stays inside the column (so it
           never overlaps the sticky map). --tv5-edge = distance from the read
           column's left edge to the viewport's left edge = container side
           padding (76px ≥1440, else 64px) + any centring gutter.
           .tv5-chapter-inner adds the same amount back as left padding so the
           text stays aligned with the day column, not glued to the edge. */
        --tv5-edge: calc(64px + max(0px, (100vw - 1760px) / 2));
        margin-left: calc(-1 * var(--tv5-edge));
    }
}
@media (min-width: 90rem) {
    .tv5-chapter {
        /* container padding is 76px at ≥1440px */
        --tv5-edge: calc(76px + max(0px, (100vw - 1760px) / 2));
    }
}

.tv5-chapter-img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Scrim. Chapter photos come from the database — some are bright and busy, so
   the copy must stay readable on any of them. The block sits low but is tall
   (eyebrow + title + intro + link), so the gradient holds a heavy tint across
   the whole lower half rather than only at the very bottom, then fades out to
   let the top of the photo breathe. */
.tv5-chapter-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to top in oklab,
        color-mix(in oklab, #000 88%, transparent) 0%,
        color-mix(in oklab, #000 72%, transparent) 38%,
        color-mix(in oklab, #000 42%, transparent) 62%,
        color-mix(in oklab, #000 14%, transparent) 85%,
        transparent 100%
    );
}

.tv5-chapter-inner {
    position: relative;
    width: 100%;
    padding: 2rem;
    padding-top: 6rem;
}
@media (min-width: 64rem) {
    .tv5-chapter-inner {
        padding: 2.5rem;
        padding-top: 7rem;
        /* Push the text back in by the bleed amount so it lines up with the day
           column instead of hugging the viewport edge. */
        padding-left: calc(var(--tv5-edge, 64px) + 0.5rem);
    }
}

.tv5-chapter-eyebrow {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: color-mix(in oklab, #fff 88%, transparent);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

.tv5-chapter-eyebrow-line {
    display: inline-block;
    height: 1px;
    width: 2rem;
    background-color: color-mix(in oklab, #fff 65%, transparent);
}

/* Two-layer shadow (tight + wide), same recipe as the hero title: the tight
   layer keeps the letterforms crisp on busy photos, the wide one lifts the
   whole word off a bright background. */
.tv5-chapter-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.55);
}
@media (min-width: 64rem) {
    .tv5-chapter-title {
        font-size: 3rem;
        line-height: 1;
    }
}

.tv5-chapter-intro {
    margin-top: 1.25rem;
    max-width: 42rem;
    font-size: .95rem;
    font-weight: 400;                    /* 300 was too thin to hold up on photos */
    line-height: 1.625;
    color: color-mix(in oklab, #fff 92%, transparent);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.tv5-chapter-link {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: color-mix(in oklab, #fff 90%, transparent);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}
@media (hover: hover) {
    .tv5-chapter-link:hover {
        color: #fff;
    }
}

.tv5-chapter-link-icon {
    font-size: .65rem;
}

.tv5-days {
    padding-top: 3rem;
}
@media (min-width: 64rem) {
    .tv5-days {
        padding-top: 4rem;
    }
}

.tv5-day {
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding-bottom: 4rem;
}
.tv5-day:last-child {
    padding-bottom: 2rem;
}
@media (min-width: 64rem) {
    .tv5-day {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 2.5rem;
        padding-bottom: 6rem;
    }
    .tv5-day:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 4rem;
        top: 0;
        width: 1px;
        background-color: color-mix(in oklab, #6b8051 30%, transparent);
    }
}

.tv5-day-rail {
    position: relative;
}

.tv5-day-marker {
    display: flex;
    align-items: center;
    gap: .75rem;
}
@media (min-width: 64rem) {
    .tv5-day-marker {
        position: sticky;
        top: calc(var(--ts-header-height, 90px) + 72px);
    }
}

.tv5-day-num {
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #4a5e2f;
}

.tv5-day-dot {
    display: none;
    height: .5rem;
    width: .5rem;
    border-radius: 9999px;
    background-color: #6b8051;
    box-shadow: 0 0 0 3px var(--color-ivory);
}
@media (min-width: 64rem) {
    .tv5-day-dot {
        position: absolute;
        right: -4.5px;
        top: 50%;
        display: block;
        transform: translateY(-50%);
    }
}

.tv5-day-mobileline {
    display: block;
    height: 1px;
    flex: 1;
    background-color: color-mix(in oklab, #6b8051 30%, transparent);
}
@media (min-width: 64rem) {
    .tv5-day-mobileline {
        display: none;
    }
}

.tv5-day-meta {
    margin-bottom: .75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: .5rem;
}

.tv5-day-locs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .5rem;
    font-size: .74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #8b877c;
}

.tv5-day-loc-sep {
    color: #a9b58f;
}

.tv5-day-loc-link {
    color: #4a5e2f;
    text-underline-offset: 4px;
}
@media (hover: hover) {
    .tv5-day-loc-link:hover {
        color: #33421f;
        text-decoration-line: underline;
    }
}

.tv5-day-loc-plain {
    color: #5b574d;
}

/* Meals: their own quiet rule under the title, matching the page's other
   hairlines. Bigger, olive icons — a curated detail, not a system glyph. */
.tv5-day-meals {
    margin: 0 0 1.4rem;
    padding-top: 0.8rem;
    border-top: 1px solid #e4e0d5;     /* hairline */
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.1rem;
    row-gap: 0.4rem;
}

.tv5-day-meal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #5b574d;
}

.tv5-day-meal-icon {
    font-size: 0.95rem;
    color: #4a5e2f;                    /* olive */
}

.tv5-day-meal-label {
    display: inline;
}

/* Day title in sentence case — the serif's lowercase shapes are the point;
   forcing a long title to all-caps makes it tiring to read and throws that
   away. All-caps stays where it belongs: the small labels (locations eyebrow,
   meals). */
.tv5-day-title {
    margin-bottom: 1rem;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.7rem;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #201f1d;
}
@media (min-width: 64rem) {
    .tv5-day-title {
        font-size: 2rem;
    }
}

.tv5-day-figure {
    margin-bottom: 1.5rem;
}

.tv5-day-img {
    height: 200px;
    width: 100%;
    border-radius: .25rem;
    object-fit: cover;
}
@media (min-width: 40rem) {
    .tv5-day-img {
        height: 260px;
    }
}
@media (min-width: 64rem) {
    .tv5-day-img {
        height: 300px;
    }
}

/* ── Per-day photo gallery (click-to-navigate) ─────────────────────────────
   The frames are stacked; only .is-active is shown. The track holds the height
   (same as a single day image) so the figure doesn't collapse. */
.tv5-day-gallery {
    position: relative;
}
.tv5-day-gallery-track {
    position: relative;
    height: 200px;
}
@media (min-width: 40rem) { .tv5-day-gallery-track { height: 260px; } }
@media (min-width: 64rem) { .tv5-day-gallery-track { height: 300px; } }

.tv5-day-gallery .tv5-day-img {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.tv5-day-gallery .tv5-day-img.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Prev/next arrows — solid ink discs so they read clearly over any photo,
   bright or busy. Bigger tap target, soft shadow to lift them off the image.
   Scoped to the gallery so it outranks `.tour-v5 button { background:#0000 }`. */
.tv5-day-gallery .tv5-day-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(32, 31, 29, 0.62);    /* ink, translucent */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(242, 239, 232, 0.35);
    color: #faf9f6;                              /* parchment */
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: background-color .3s, transform .3s;
}
.tv5-day-nav--prev { left: 14px; }
.tv5-day-nav--next { right: 14px; }
@media (hover: hover) {
    .tv5-day-nav:hover {
        background-color: #201f1d;               /* solid ink */
        transform: translateY(-50%) scale(1.08);
    }
}
.tv5-day-nav:focus-visible {
    outline: 2px solid #f2efe8;
    outline-offset: 2px;
}

/* Dot indicator, centred at the foot of the photo. Sits on a soft dark scrim
   so the dots read over a bright image.
   NOTE: named tv5-daygal-* (not tv5-day-dot) to avoid the existing .tv5-day-dot,
   which is the node marker on the itinerary rail — it's position:absolute right,
   which was dragging these into the corner. */
.tv5-daygal-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}
/* Scoped to the gallery so the background outranks `.tour-v5 button`. */
.tv5-day-gallery .tv5-daygal-dot {
    position: static;               /* defensively override any inherited absolute */
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background-color: rgba(242, 239, 232, 0.55);   /* parchment, dimmed */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: background-color .3s, transform .3s;
}
.tv5-day-gallery .tv5-daygal-dot.is-active {
    background-color: #faf9f6;                     /* bright parchment */
    transform: scale(1.35);
}
@media (hover: hover) {
    .tv5-day-gallery .tv5-daygal-dot:hover { background-color: #faf9f6; }
}

/* A gentle bottom scrim behind the dots so they never wash out on a pale sky. */
.tv5-day-gallery-track::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to top, rgba(20, 19, 17, 0.35), transparent);
    pointer-events: none;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tv5-day-gallery .tv5-day-img,
    .tv5-day-nav,
    .tv5-daygal-dot { transition: none; }
}

/* Meeting point: a quiet editorial note, not a label:value field. A hairline
   separates it from the day copy, a small olive pin marks it, and the value
   wraps freely (it ranges from "Airport" to a full street address). */
.tv5-day-meeting {
    margin-top: 1.4rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e4e0d5;     /* hairline */
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.tv5-day-meeting-icon {
    flex: none;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: #6b8051;                    /* olive-mid */
}

.tv5-day-meeting-label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #a8a294;
}

.tv5-day-meeting-value {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #5b574d;
}

.tv5-day-expand {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid color-mix(in oklab, #6b8051 50%, transparent);
    padding-bottom: .125rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #4a5e2f;
}
@media (hover: hover) {
    .tv5-day-expand:hover {
        border-color: #4a5e2f;
        color: #33421f;
    }
}

.tv5-day-expand-icon {
    font-size: .6rem;
}

.tv5-lg-block {
    display: none;
}
@media (min-width: 64rem) {
    .tv5-lg-block {
        display: block;
    }
}

.tv5-mapcaption-text {
    margin-top: .75rem;
    font-size: .78rem;
    color: #8b877c;
}

.tv5-mapcaption-day {
    font-weight: 600;
    color: #4a5e2f;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL STORY SECTIONS (story.blade.php — mv_content_metadata)
   Hook, intro, why/who/best-time/culinary, highlights, reviews, FAQ.
   ═══════════════════════════════════════════════════════════════════════════ */

#tv5-story {
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
}

/* ── Editorial intro (hook + intro paragraph + optional feature image) ── */
/* ── Editorial intro (redesigned) ──────────────────────────────────────────
   Emotion before logistics. A measured centred column of copy (eyebrow +
   oversized serif hook + intro prose), then a full-bleed feature photo that
   breaks out of the container edge-to-edge and breathes. Generous whitespace
   throughout — the "confidence to leave white space" from the references. */
.tv5-intro {
    padding-top: 1rem;
}

.tv5-intro-copy {
    max-width: 640px;              /* narrow measure = comfortable reading */
    margin-inline: auto;
    text-align: center;
}

.tv5-intro-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8a5a44;                /* terracotta */
    margin-bottom: 1.75rem;
}

.tv5-intro-hook {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 500;
    color: #201f1d;               /* ink — the hook is the statement, dark & bold */
    margin: 0 0 2rem;
}

@media (min-width: 48rem) {
    .tv5-intro-hook { font-size: 2.6rem; }
}

@media (min-width: 64rem) {
    .tv5-intro-hook { font-size: 3.1rem; line-height: 1.18; }
}

.tv5-intro-body {
    font-size: 1.1rem;
    line-height: 1.95;            /* generous, magazine reading rhythm */
    color: #4a4640;
}

/* Full-bleed feature photo: breaks out of .tv5-container to span the viewport
   edge-to-edge (calc pushes it back by half the container overflow), then
   breathes with big vertical whitespace. Height is viewport-relative so it
   reads as a cinematic moment, not a thumbnail. */
.tv5-intro-figure {
    margin: 4.5rem 0 0;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
}

.tv5-intro-figure img {
    width: 100%;
    height: 58vh;
    min-height: 320px;
    max-height: 680px;
    object-fit: cover;
    display: block;
}

@media (min-width: 64rem) {
    .tv5-intro-figure {
        margin-top: 6rem;
    }
    .tv5-intro-figure img {
        height: 68vh;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   EDITORIAL OPENING (asymmetric) — .tv5-ed
   Hook (oversized serif) on the left, intro prose with a terracotta drop-cap on
   the right; then each source section's own full-bleed feature photo, which
   settles in from a slight zoom as it scrolls into view. Reveal + parallax are
   applied by JS (adds .is-in); everything is fully visible with no JS and under
   prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */
/* Force a clean white ground on the opening editorial block. It sits directly
   under the dark hero, and without an explicit white it can read as a muddy
   grey against that contrast. Pure white so it's unmistakably the page's base
   colour, not a tinted band. */
#tv5-story-hook {
    background-color: #ffffff;
}

.tv5-ed-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 64rem) {
    .tv5-ed-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 5rem;
        align-items: start;
    }
}

/* The hook: the statement. Big Playfair, ink. */
.tv5-ed-hook {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    color: #201f1d;                          /* ink */
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 1.2rem 0 0;
}
@media (min-width: 64rem) {
    .tv5-ed-hook { font-size: 3rem; line-height: 1.1; }
}

/* Intro (right column) reads as a tagline beside the hook. Body face (Inter),
   upright, sized up and set in ink so it carries weight as a companion
   statement without the ornate look of a serif italic. */
.tv5-ed-intro {
    font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.75;
    color: #201f1d;                          /* ink */
}
@media (min-width: 64rem) {
    .tv5-ed-intro { font-size: 1.4rem; line-height: 1.8; }
}

/* Right column rides the scroll (JS-driven, not position:sticky — an ancestor
   uses overflow:clip which would break native sticky). tv5EditorialSticky()
   translates it down as you scroll, then stops it at the section's end so it
   comes to rest just before the photos. Desktop only. */
@media (min-width: 64rem) {
    .tv5-ed-introcol {
        padding-top: 0.4rem;
        align-self: start;        /* height = its own content, not the grid row */
        height: -moz-fit-content;
        height: fit-content;
        will-change: transform;
    }
}

/* Full-bleed feature photo (per source section). Breaks out of the container
   edge-to-edge; the inner wrapper clips the parallax zoom. */
.tv5-ed-figure {
    margin: 3.5rem 0 0;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
}
@media (min-width: 64rem) {
    .tv5-ed-figure { margin-top: 5rem; }
}
.tv5-ed-figure-inner { overflow: hidden; }
.tv5-ed-figure-inner img {
    width: 100%;
    height: 52vh;
    min-height: 300px;
    max-height: 620px;
    object-fit: cover;
    display: block;
    transform: scale(1.12);
    transition: transform 1.6s cubic-bezier(0.16, 0.7, 0.2, 1);
    will-change: transform;
}
@media (min-width: 64rem) {
    .tv5-ed-figure-inner img { height: 62vh; }
}
.tv5-ed-figure.is-in .tv5-ed-figure-inner img { transform: scale(1); }

/* ── Diptych: two photos side by side as one wide full-bleed panel. A 4px seam
   between them; on mobile it stacks to a single column. Each half settles from
   a slight zoom, and slides in from its own side so the two converge into one
   panel on reveal. ─────────────────────────────────────────────────────────*/
.tv5-ed-diptych {
    margin: 3.5rem 0 0;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    overflow: hidden;
}
@media (min-width: 48rem) {
    .tv5-ed-diptych { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
    .tv5-ed-diptych { margin-top: 5rem; }
}
.tv5-ed-dip-item {
    margin: 0;
    overflow: hidden;
    /* Slide-in offset; cleared on reveal. Only applied while armed. */
    opacity: 0;
}
.tv5-ed-diptych.is-in .tv5-ed-dip-item {
    opacity: 1;
    transform: none;
    transition: opacity 1s ease, transform 1.1s cubic-bezier(0.16, 0.7, 0.2, 1);
}
@media (min-width: 48rem) {
    .tv5-ed-dip-item--left  { transform: translateX(-24px); }
    .tv5-ed-dip-item--right { transform: translateX(24px); }
}
.tv5-ed-dip-item .tv5-ed-figure-inner { height: 100%; overflow: hidden; }
.tv5-ed-dip-item .tv5-ed-figure-inner img {
    width: 100%;
    height: 42vh;
    min-height: 240px;
    max-height: 560px;
    object-fit: cover;
    display: block;
    transform: scale(1.12);
    transition: transform 1.6s cubic-bezier(0.16, 0.7, 0.2, 1);
    will-change: transform;
}
@media (min-width: 48rem) {
    .tv5-ed-dip-item .tv5-ed-figure-inner img { height: 56vh; }
}
@media (min-width: 64rem) {
    .tv5-ed-dip-item .tv5-ed-figure-inner img { height: 60vh; }
}
.tv5-ed-diptych.is-in .tv5-ed-dip-item .tv5-ed-figure-inner img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .tv5-ed-dip-item { opacity: 1; transform: none; transition: none; }
    .tv5-ed-dip-item .tv5-ed-figure-inner img { transform: scale(1); transition: none; }
}

/* Reveal for the copy blocks. Armed by JS via .tv5-ed.is-anim; without JS the
   blocks are simply visible.
   The hook and intro are the FIRST thing under the hero and are usually already
   on screen at load, so they must not start at opacity 0 — caught mid-reveal
   (slow device, fast scroll) the ink text reads as washed-out grey. They only
   slide up gently from a near-full opacity; the fade-in is reserved for blocks
   that genuinely enter from below. */
.tv5-ed.is-anim .tv5-ed-anim {
    opacity: 0.999;
    transform: translateY(16px);
}
.tv5-ed.is-anim .tv5-ed-anim.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 1s cubic-bezier(0.16, 0.7, 0.2, 1),
                transform 1s cubic-bezier(0.16, 0.7, 0.2, 1);
}
.tv5-ed.is-anim .tv5-ed-anim-d1.is-in { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .tv5-ed-figure-inner img { transform: scale(1); transition: none; }
    .tv5-ed.is-anim .tv5-ed-anim { opacity: 1; transform: none; transition: none; }
}

.tv5-story-figure {
    margin: 2.5rem 0 0;
    overflow: hidden;
    border-radius: 3px;
}

.tv5-story-figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ── Single narrative block (reuses .tv5-editorial-grid) ── */
.tv5-story-block .tv5-story-figure {
    margin-top: 1.75rem;
    max-height: 460px;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PASSAGE — narrative story (why / who / best time / food) strung along a
   single vertical journey line. Nodes light up as their stop scrolls in, an
   olive progress line grows with scroll, photos are tilted postcards that
   straighten on hover, and stops alternate copy-left / copy-right.
   ══════════════════════════════════════════════════════════════════════════ */
.tv5-pg {
    position: relative;
}

/* The faint full-height line + the olive progress line that grows over it. */
.tv5-pg-line,
.tv5-pg-progress {
    position: absolute;
    left: 50%;
    top: 1.5rem;
    width: 1px;
}
.tv5-pg-line {
    bottom: 1.5rem;
    background: #e4e0d5;                         /* hairline */
}
.tv5-pg-progress {
    height: 0;
    transform: translateX(-0.5px);
    background: #4a5e2f;                         /* olive */
    transition: height 0.2s linear;
}

/* The seal that closes the journey line: our mark, sitting on the line's end.
   The white ring punches the line out behind it so the logo reads as a finial
   rather than something the line runs through.

   It waits, faint and slightly small, until the scroll-driven progress line
   reaches it — then it settles in and a soft olive halo blooms once, as if the
   seal were being pressed at the end of the story. JS adds .is-sealed. */
.tv5-pg-seal {
    position: absolute;
    left: 50%;
    bottom: -12px;
    /* Waiting state: small, faint, turned back — ready to be pressed. */
    transform: translateX(-50%) rotate(-140deg) scale(0.7);
    width: 60px;
    height: 60px;
    z-index: 3;
    padding: 7px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 7px #fff;
    pointer-events: none;
    opacity: 0.22;
    filter: saturate(0.4);
    transition: opacity 1.1s ease,
                transform 1.2s cubic-bezier(0.16, 0.9, 0.2, 1),
                filter 1.1s ease;
}
/* Pressed: it turns upright, grows to size, and lights up — then a single
   olive halo blooms outward, as if the seal had just been stamped. */
.tv5-pg-seal.is-sealed {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1);
    filter: saturate(1);
    animation: tv5-seal-halo 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s 1;
}
@keyframes tv5-seal-halo {
    0%   { box-shadow: 0 0 0 7px #fff, 0 0 0 7px rgba(107, 128, 81, 0.5); }
    70%  { box-shadow: 0 0 0 7px #fff, 0 0 0 30px rgba(107, 128, 81, 0); }
    100% { box-shadow: 0 0 0 7px #fff, 0 0 0 30px rgba(107, 128, 81, 0); }
}

@media (max-width: 64rem) {
    .tv5-pg-seal { left: 22px; width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .tv5-pg-seal {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: none;
        transition: none;
        animation: none;
    }
}

.tv5-pg-stop {
    position: relative;
    padding-block: 3.5rem;
}

/* Node on the line; fills olive with a soft halo once its stop is active. */
.tv5-pg-node {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4a5e2f;                   /* olive */
    z-index: 2;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.tv5-pg-stop.is-in .tv5-pg-node {
    background: #4a5e2f;
    box-shadow: 0 0 0 5px rgba(107, 128, 81, 0.16);   /* olive-mid glow */
}

.tv5-pg-row {
    display: grid;
    gap: 1.5rem;
    align-items: start;          /* photo tracks the heading, not the copy's centre */
}

.tv5-pg-eyebrow {
    display: block;                             /* block so its box height is predictable */
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8a5a44;                              /* terracotta */
    height: 0.72rem;                            /* fixed: eyebrow is always one line */
    margin-bottom: 0.9rem;
}
.tv5-pg-copy .tv5-h2 {
    margin: 0 0 1.1rem;
}

/* Tilted postcard: paper frame + soft shadow, straightens on hover. */
.tv5-pg-postcard figure {
    margin: 0;
    background: #fff;
    padding: 0.75rem 0.75rem 1.15rem;
    box-shadow: 0 3px 18px rgba(32, 31, 29, 0.11);
    transform: rotate(-1.5deg);
    transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.tv5-pg-postcard figure:hover {
    transform: rotate(0) scale(1.01);
}
.tv5-pg-postcard img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* Desktop: three tracks (copy · line gap · postcard), alternating sides via
   explicit grid-column (NOT order — an order swap with an empty spacer cell
   collapses the postcard into the narrow middle track). */
@media (min-width: 64rem) {
    .tv5-pg-row {
        grid-template-columns: 1fr 96px 1fr;
        gap: 0;
    }
    .tv5-pg-copy,
    .tv5-pg-postcard {
        padding: 0 4rem;
    }
    /* Pin BOTH cells to row 1. Without an explicit grid-row, even stops (copy
       in col 3, photo in col 1) push the photo — which comes later in the DOM —
       onto row 2, dropping it far below its heading. grid-row:1 keeps copy and
       photo on the same line whichever column each lands in. */
    .tv5-pg-copy      { grid-column: 1; grid-row: 1; }
    .tv5-pg-postcard  { grid-column: 3; grid-row: 1; }
    .tv5-pg-stop:nth-child(even) .tv5-pg-postcard { grid-column: 1; grid-row: 1; }
    .tv5-pg-stop:nth-child(even) .tv5-pg-copy     { grid-column: 3; grid-row: 1; }
    .tv5-pg-stop { padding-block: 5rem; }
    .tv5-pg-stop:nth-child(even) .tv5-pg-postcard figure { transform: rotate(1.5deg); }
    .tv5-pg-stop:nth-child(even) .tv5-pg-postcard figure:hover { transform: rotate(0) scale(1.01); }
    /* Nudge the photo down so its top edge lines up with the heading on every
       stop — left-photo (even) and right-photo (odd) alike. Measured against
       the rendered eyebrow height: 1.15rem lands the photo top within ~1px of
       the H2 top. (grid-row:1 above is what actually keeps them on one line.) */
    .tv5-pg-postcard { padding-top: 1.15rem; }
    .tv5-pg-postcard img { height: 480px; }
    /* Stop with no image: copy runs full width, line node still marks it. */
    .tv5-pg-stop--nofig .tv5-pg-copy { grid-column: 1 / -1; padding-inline: 4rem; max-width: 900px; }
}

/* Mobile: single column, line + nodes pinned to the left rail. */
@media (max-width: 64rem) {
    .tv5-pg-line,
    .tv5-pg-progress,
    .tv5-pg-node { left: 22px; }
    .tv5-pg-row {
        grid-template-columns: 1fr;
        padding-left: 56px;
    }
    .tv5-pg-copy,
    .tv5-pg-postcard { padding: 0; grid-column: 1; }
    .tv5-pg-postcard { margin-top: 1.5rem; }
}

/* ── Scroll reveal ─────────────────────────────────────────────────────────
   Copy and photo drift in from their own side as the stop enters view, so the
   two halves converge on the line rather than both rising together. The photo
   also settles from a slightly larger scale. Long, eased, and unhurried — the
   restraint the references trade on. Base (mobile) is a gentle rise; the
   directional drift is layered on at desktop where the two-column split
   exists. */
.tv5-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.1s cubic-bezier(0.16, 0.7, 0.2, 1),
                transform 1.1s cubic-bezier(0.16, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
.tv5-reveal.is-in {
    opacity: 1;
    transform: none;
}
.tv5-reveal-d1 { transition-delay: 0.14s; }

@media (min-width: 64rem) {
    /* Odd stop: copy on the left drifts in from the left, photo on the right
       from the right. Even stop: mirrored. */
    .tv5-pg-stop:nth-child(odd)  .tv5-pg-copy.tv5-reveal     { transform: translate(-38px, 14px); }
    .tv5-pg-stop:nth-child(odd)  .tv5-pg-postcard.tv5-reveal { transform: translate(38px, 26px) scale(1.04); }
    .tv5-pg-stop:nth-child(even) .tv5-pg-copy.tv5-reveal     { transform: translate(38px, 14px); }
    .tv5-pg-stop:nth-child(even) .tv5-pg-postcard.tv5-reveal { transform: translate(-38px, 26px) scale(1.04); }
    .tv5-pg-stop .tv5-reveal.is-in { transform: none; }
    .tv5-pg-postcard.tv5-reveal { transition-duration: 1.25s; }
}

@media (prefers-reduced-motion: reduce) {
    .tv5-reveal,
    .tv5-pg-stop:nth-child(odd)  .tv5-pg-copy.tv5-reveal,
    .tv5-pg-stop:nth-child(odd)  .tv5-pg-postcard.tv5-reveal,
    .tv5-pg-stop:nth-child(even) .tv5-pg-copy.tv5-reveal,
    .tv5-pg-stop:nth-child(even) .tv5-pg-postcard.tv5-reveal {
        opacity: 1; transform: none; transition: none;
    }
    .tv5-pg-progress { display: none; }
    .tv5-pg-postcard figure { transition: none; }
}

/* ── Centred section head variant ── */
.tv5-section-head--center {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION HEADING (component: <x-tv5-head>) — the single pattern for every
   section title. Terracotta eyebrow above a serif title; no rule. Narrative
   sections align left, grid/card sections centre. Replaces the five different
   heading patterns that had drifted across the page.
   ══════════════════════════════════════════════════════════════════════════ */
.tv5-head {
    margin-bottom: 2.5rem;
}
@media (min-width: 64rem) {
    .tv5-head { margin-bottom: 3rem; }
}

.tv5-head--center {
    text-align: center;
}

.tv5-head-eyebrow {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #8a5a44;                    /* terracotta */
}

.tv5-head-title {
    margin: 0;
}

/* Itinerary's heading is followed by its own intro line, so it needs less of a
   gap under it than a heading that sits straight on top of content. */
.tv5-itin-head {
    margin-bottom: 1rem;
}
@media (min-width: 64rem) {
    .tv5-itin-head { margin-bottom: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   OVERVIEW — a wide reading column opened by a terracotta drop-cap, on the same
   cream as the facts strip, carrying a seamless Italian botanical pattern
   (olive, lemon, cypress, vines, villas). One pattern for every tour.

   Why a pattern and not a landscape illustration: a picture has a subject, so
   it competes with the copy — strengthen it and it shouts, fade it and it
   smudges. A repeating pattern has no subject; the eye reads it as texture and
   the words still win. (The principle the luxury travel brands use.)

   Full-bleed note: the section also carries .tv5-container (max-width 1760px),
   so its own background would stop at 1760 and leave bare strips on wider
   screens. The ground + pattern therefore live in a ::before/::after that break
   out to 100vw, and the section must NOT clip them.
   ─────────────────────────────────────────────────────────────────────────*/
.tv5-ov {
    position: relative;
    background: transparent;             /* the ground is painted by ::before */
    padding-bottom: 5rem;
}

/* Cream ground, broken out to the full viewport width.
   The hairline top/bottom borders (with a soft inner shadow just inside them)
   are what separate this from the facts strip: on short tours the story
   sections in between are empty, so Overview lands straight on Facts — two
   cream blocks with nothing between them. The rules give the seam definition
   without changing either colour. */
.tv5-ov::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f2efe8;                 /* same cream as the facts strip */
    border-top: 1px solid #e0dad0;
    border-bottom: 1px solid #e0dad0;
    box-shadow: inset 0 6px 12px -8px rgba(32, 31, 29, 0.16),
                inset 0 -6px 12px -8px rgba(32, 31, 29, 0.16);
    pointer-events: none;
    z-index: 0;
}

/* The pattern: same full-bleed breakout, tiled, held well back. The artwork is
   dense, so the tile is drawn large and faint — at a small tile or a higher
   opacity the motifs crowd the copy. */
.tv5-ov::after {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: url('/images/italy.png') repeat;
    background-size: 620px;              /* big tile = airy */
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 64rem) {
    .tv5-ov::after { background-size: 420px; opacity: 0.12; }
}

/* Content rides above the ground and the landscape. Wide reading column, close
   to the section width but with a gentle inset so ultra-long lines don't hurt
   readability on very wide screens. */
.tv5-ov-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-inline: auto;
}

/* (The old .tv5-ov-eyebrow / .tv5-ov-h rules are gone — the heading now comes
   from <x-tv5-head align="center">, which carries its own styling.) */

.tv5-ov-body {
    font-size: 1.12rem;
    line-height: 2;
    color: #413d37;
}
.tv5-ov-body p { margin: 0 0 1.4em; }
.tv5-ov-body p:last-child { margin-bottom: 0; }

/* Drop-cap on the first letter — the magazine "open the chapter" moment.
   Applied to the body block directly (not `> p`) so it works whether the CMS
   description is wrapped in <p> or is bare text separated by <br> (legacy
   descriptions vary). ::first-letter on the block grabs the first letter of
   whatever runs first. */
.tv5-ov-body::first-letter {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 3.6em;
    line-height: 0.8;
    font-weight: 600;
    float: left;
    padding: 0.06em 0.14em 0 0;
    color: #8a5a44;                         /* terracotta */
}

/* Reveal on scroll (armed by JS via .is-in; visible without JS / reduced-motion). */
.tv5-ov-anim {
    opacity: 0;
    transform: translateY(16px);
}
.tv5-ov-anim.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 0.7, 0.2, 1);
}
.tv5-ov-anim.tv5-ov-body.is-in { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
    .tv5-ov-anim { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   JOURNEY HIGHLIGHTS — cinematic OVERLAY cards (text over photo).
   Layout adapts to the count (set in the blade):
     .tv5-hl--row       up to 5 → centred flex row (1–5 always centred, no gaps)
     .tv5-hl--carousel  6+     → horizontal snap slider
   ══════════════════════════════════════════════════════════════════════════ */
.tv5-hl {
    display: flex;
    gap: 1.6rem;
}

/* Up to 5: centred row that wraps; the last (short) row stays centred. */
.tv5-hl--row {
    flex-wrap: wrap;
    justify-content: center;
}

/* 6+: horizontal carousel with snap; hidden scrollbar. */
.tv5-hl--carousel {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tv5-hl--carousel::-webkit-scrollbar { display: none; }
.tv5-hl--carousel .tv5-hl-card { scroll-snap-align: start; }

/* The card: a portrait tile with the photo behind and copy overlaid.
   Row mode targets FIVE across on wide screens: each card is a 5-column share
   of the row (minus the gaps), so 5 items fill one line; fewer items stay
   centred; more than 5 switch to the carousel class instead. */
.tv5-hl-card {
    position: relative;
    /* grow:0 so cards keep their size (they don't stretch to fill a short last
       row) — with justify-content:center on the row, fewer than five items sit
       centred instead of stringing out from the left. basis = a 5-column share
       so five sit on one line. */
    flex: 0 1 calc((100% - 4 * 1.6rem) / 5);
    min-width: 200px;                          /* wrap below this, staying centred */
    max-width: 360px;
    aspect-ratio: 3 / 4.6;                     /* tall — room for the copy on hover */
    overflow: hidden;
    background: #201f1d;           /* fallback ground when a card has no photo */
    box-shadow: 0 1px 0 #e4e0d5;
}
.tv5-hl--carousel .tv5-hl-card {
    flex: 0 0 300px;              /* carousel: fixed width so it can scroll */
}
@media (min-width: 64rem) {
    .tv5-hl--carousel .tv5-hl-card { flex-basis: 340px; }
}

/* On hover the photo steps back — it drifts in slightly, softens out of focus
   and dims — so the copy has a stage of its own instead of fighting a busy
   picture. The photo is still legible behind, just no longer competing. */
.tv5-hl-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1),
                filter 0.7s ease;
}
@media (hover: hover) {
    .tv5-hl-card:hover .tv5-hl-bg {
        transform: scale(1.06);
        filter: blur(4px) brightness(0.62) saturate(0.85);
    }
}

/* Dark gradient so the overlaid text always reads; it deepens on hover to back
   up the blur. */
.tv5-hl-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(20, 18, 16, 0.86) 0%,
        rgba(20, 18, 16, 0.20) 55%,
        transparent 100%);
    transition: background 0.7s ease;
}
@media (hover: hover) {
    .tv5-hl-card:hover .tv5-hl-scrim {
        background: linear-gradient(to top,
            rgba(20, 18, 16, 0.92) 0%,
            rgba(20, 18, 16, 0.62) 55%,
            rgba(20, 18, 16, 0.38) 100%);
    }
}

.tv5-hl-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.5rem 1.4rem 1.6rem;
    color: #fff;
}
.tv5-hl-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 500;
    color: #fff;
    margin: 0 0 0.5rem;
    /* Two-layer shadow: the tight one keeps the letterforms crisp on a busy
       photo, the wide one lifts the whole line off it. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.5);
}
/* Body copy: tucked away, revealed on hover so the tile stays clean. */
.tv5-hl-text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #f0ece4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, max-height 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.tv5-hl-text p { margin: 0; color: inherit; }
@media (hover: hover) {
    .tv5-hl-card:hover .tv5-hl-text { opacity: 1; max-height: 22rem; }
}
/* Touch devices (no hover): show the copy so it isn't hidden forever. */
@media (hover: none) {
    .tv5-hl-text { opacity: 1; max-height: 12rem; }
}

.tv5-hl-hint {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5b574d;
}

/* Mobile: one card per row (row mode) / narrower cards (carousel). */
@media (max-width: 48rem) {
    .tv5-hl--row .tv5-hl-card { flex-basis: 100%; max-width: 420px; aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
    .tv5-hl-bg, .tv5-hl-text { transition: none; }
}

/* ── Traveler reviews — the ledger ──────────────────────────────────────────
   Hairline rows, not cards: the same rules as the Inclusions list, so the two
   sections speak the same language. Who on the left, what they said on the
   right; each row sizes to its own quote. */
.tv5-review-ledger {
    max-width: 1100px;
    margin-inline: auto;
    border-top: 1px solid #e4e0d5;
}

.tv5-review-row {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 1.9rem 0;
    border-bottom: 1px solid #e4e0d5;
}

@media (min-width: 48rem) {
    .tv5-review-row {
        grid-template-columns: 210px 1fr;
        gap: 2.75rem;
        align-items: start;
    }
}

.tv5-review-who {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.tv5-review-name {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-size: 1.18rem;
    line-height: 1.35;
    color: #201f1d;                 /* ink */
}

.tv5-review-stars {
    display: flex;
    gap: 3px;
}

.tv5-review-star {
    width: 12px;
    height: 12px;
    fill: #6b8051;                  /* olive-500 — a quiet tick, not a gold rush */
}

.tv5-review-meta {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #8b877c;                 /* mist */
}

.tv5-review-body {
    font-size: 1rem;
    line-height: 1.78;
    color: #5b574d;                 /* stone */
}
.tv5-review-body p:last-child {
    margin-bottom: 0;
}

/* ── Long quotes: clipped to three lines, expand on demand ─────────────────
   The checkbox drives the open state. Hidden visually but still focusable and
   operable by keyboard — display:none or visibility:hidden would take it out
   of the tab order and strand keyboard users on an unopenable quote. */
.tv5-review-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

/* Default: the quote shows in full. The clip and the toggle are opt-in, added
   by the script only when the text really does overrun three lines — a short
   quote must never be faded or given a "Read more" that reveals nothing. This
   way the text also stays whole if the script never runs.
   max-height rather than -webkit-line-clamp: clamp needs display:-webkit-box,
   which can't lay out the <p> children these bodies are made of. */
.tv5-review-more.is-clipped .tv5-review-body {
    max-height: calc(3 * 1.78em);   /* 3 lines at the body's line-height */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    transition: max-height .45s ease;
}
/* The first paragraph must not push itself down inside the clipped box. */
.tv5-review-more .tv5-review-body > :first-child {
    margin-top: 0;
}

.tv5-review-more.is-clipped .tv5-review-check:checked ~ .tv5-review-body {
    max-height: 200em;              /* a ceiling no quote reaches; keeps it animatable */
    -webkit-mask-image: none;
    mask-image: none;
}

/* No toggle unless there's something hidden behind it. */
/* No toggle unless the script found something hidden behind it. */
.tv5-review-toggle {
    display: none;
    margin-top: .85rem;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #4a5e2f;                 /* olive-700 */
    transition: color .3s;
}
.tv5-review-more.is-clipped .tv5-review-toggle {
    display: inline-flex;
}
@media (hover: hover) {
    .tv5-review-toggle:hover { color: #201f1d; }   /* ink */
}
/* The checkbox is off-screen, so its focus ring has to show on the label. */
.tv5-review-check:focus-visible ~ .tv5-review-toggle {
    outline: 2px solid #6b8051;
    outline-offset: 3px;
}

/* One label element, two states — the text comes from the data- attributes so
   the markup doesn't have to carry both strings. */
.tv5-review-toggle-label::after { content: attr(data-shut); }
.tv5-review-check:checked ~ .tv5-review-toggle .tv5-review-toggle-label::after { content: attr(data-open); }

.tv5-review-chev {
    width: 13px;
    height: 13px;
    transition: transform .35s ease;
}
.tv5-review-check:checked ~ .tv5-review-toggle .tv5-review-chev {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .tv5-review-chev,
    .tv5-review-more .tv5-review-body { transition: none; }
}

/* ── FAQ accordion (native details/summary) ── */
.tv5-story-faq {
    max-width: 860px;
    margin-inline: auto;
}

.tv5-story-faq-item {
    border-bottom: 1px solid #e4e0d5;
    padding: 1.1rem 0;
}

.tv5-story-faq-q {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 1.12rem;
    color: #201f1d;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

.tv5-story-faq-q::-webkit-details-marker { display: none; }

.tv5-story-faq-q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: -2px;
    font-size: 1.4rem;
    color: #6b8051;
    transition: transform .25s ease;
}

.tv5-story-faq-item[open] .tv5-story-faq-q::after {
    content: '\2212';              /* minus */
}

.tv5-story-faq-a {
    margin-top: .9rem;
    font-size: .98rem;
    line-height: 1.8;
    color: #5b574d;
}

/* ── Departure dates (dates.blade.php) — "the ticket" ──────────────────────
   Each departure is a boarding-pass card: olive rule on top, a big Playfair
   day, month, and status at the foot. Past and full dates are greyed and not
   clickable. The section carries hairline + inset-shadow seams so it reads as
   its own panel, not part of the itinerary below it. */
.tv5-dates-section {
    position: relative;
    border-top: 1px solid #e4e0d5;
    border-bottom: 1px solid #e4e0d5;
    box-shadow: inset 0 6px 12px -8px rgba(32, 31, 29, 0.16),
                inset 0 -6px 12px -8px rgba(32, 31, 29, 0.16);
}

.tv5-dates-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
    max-width: 960px;
    margin-inline: auto;
}

@media (min-width: 48rem) {
    .tv5-dates-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tv5-date-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.7rem 1rem 1.4rem;
    background: #faf9f6;
    border: 1px solid #e4e0d5;
    border-top: 3px solid #4a5e2f;      /* olive accent */
    cursor: pointer;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    text-align: center;
    font-family: inherit;
}

@media (hover: hover) {
    /* Live dates only lift on hover; past/full stay put. */
    .tv5-date-chip:not(.is-full):not(.is-past):hover {
        border-color: #4a5e2f;
        box-shadow: 0 12px 24px -14px rgba(32, 31, 29, 0.4);
        transform: translateY(-3px);
    }
}

/* Selected (after a click) — a filled olive top edge as a subtle confirmation. */
.tv5-date-chip.is-selected {
    border-color: #4a5e2f;
    box-shadow: 0 12px 24px -14px rgba(32, 31, 29, 0.4);
}

.tv5-date-chip.is-full {
    background: #f2efe8;
    border-top-color: #b0a99c;
    opacity: 0.78;
    cursor: not-allowed;
}

/* Past: a spent ticket — dashed frame, muted, the date struck through. */
.tv5-date-chip.is-past {
    background: #f2efe8;
    border-style: dashed;
    border-top: 3px solid #d8d2c6;
    cursor: not-allowed;
}
.tv5-date-chip.is-past .tv5-date-day,
.tv5-date-chip.is-past .tv5-date-mon {
    color: #8b877c;                     /* mist */
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.tv5-date-day {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 500;
    color: #201f1d;
}

.tv5-date-mon {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5b574d;
    margin-top: 0.5rem;
}

/* Hairline between the date and its status, like the mockup's little rule. */
.tv5-date-sep {
    width: 26px;
    height: 1px;
    background: #e4e0d5;
    margin: 0.85rem 0;
}
.tv5-date-chip.is-past .tv5-date-sep { background: #d8d2c6; }

.tv5-date-status {
    font-size: 0.72rem;
    color: #6b8051;                     /* olive-500 */
    font-weight: 600;
}

.tv5-date-status--full {
    color: #8a5a44;                     /* terracotta */
}

/* Low stock reads with the same urgency colour as the Book Early flag. */
.tv5-date-status--low {
    color: #8a5a44;                     /* terracotta */
}

.tv5-date-status--past {
    color: #8b877c;                     /* mist */
    font-style: italic;
    font-weight: 500;
}

/* Book Early flag: a corner tab inside the card (overflow-clipped), not a pill
   floating above it. */
.tv5-date-flag {
    position: absolute;
    top: 10px;
    right: 0;
    background: #8a5a44;               /* terracotta */
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 9px;
    white-space: nowrap;
}

.tv5-dates-note {
    max-width: 640px;
    margin: 2rem auto 0;
    text-align: center;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.7;
    color: #8b877c;
}

.tv5-date-chip.is-selected {
    border-color: #4a5e2f;
    border-top-color: #4a5e2f;
    box-shadow: 0 6px 20px rgba(74, 94, 47, 0.18);
    background: #eef0e6;
}