/*
Theme Name: Evenue Modern
Description: Ink and electricity — editorial pace, full-bleed diagonal hero, pulse marquee, bento grids, and a sticky destinations rail. Port of the legacy evenue-modern (PULSE) design exploration onto the v2 starter structure.
Version: 0.7.2

Requires PHP: 8.1
Author: Evenue
Text Domain: evenue-modern
Contract: 2.12.0
*/

/* Colors and fonts ride the --evenue-* tokens: brand = the voltage primary,
   secondary = the signal accent, heading-text = ink, page-bg = warm paper,
   surface-bg = card surfaces. The three-stop pulse gradient and the glow
   shadows are DERIVED from the tokens via color-mix, so the whole identity
   re-tints with the instance palette. Geometry (pills, 18px cards, diagonal
   clips) and motion are the design's own. */

:root {
    --ink: var(--evenue-heading-text);
    --paper: var(--evenue-page-bg);
    --card: var(--evenue-surface-bg);
    --pulse-mid: color-mix(in srgb, var(--evenue-brand) 52%, var(--evenue-secondary));
    --gradient-pulse: linear-gradient(120deg, var(--evenue-brand) 0%, var(--pulse-mid) 48%, var(--evenue-secondary) 100%);
    --gradient-pulse-soft: linear-gradient(120deg,
        color-mix(in srgb, var(--evenue-brand) 12%, transparent),
        color-mix(in srgb, var(--pulse-mid) 10%, transparent) 48%,
        color-mix(in srgb, var(--evenue-secondary) 12%, transparent));
    --gradient-night: linear-gradient(160deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 88%, var(--evenue-brand)) 100%);
    --glow-primary: 0 8px 28px color-mix(in srgb, var(--evenue-brand) 35%, transparent);
    --glow-hover: 0 18px 44px color-mix(in srgb, var(--evenue-brand) 20%, transparent);
    --glow-secondary: 0 4px 14px color-mix(in srgb, var(--evenue-secondary) 35%, transparent);

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --radius-img: 14px;

    --fs-lg: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --fs-xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
    --fs-2xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
    --fs-3xl: clamp(2.75rem, 2rem + 3.6vw, 4.5rem);
    --fs-4xl: clamp(3.25rem, 2.2rem + 4.8vw, 5.5rem);
    --fs-5xl: clamp(3.75rem, 2.4rem + 6vw, 6.75rem);

    --sp-sm: 1rem;
    --sp-md: 2rem;
    --sp-lg: 3rem;
    --sp-xl: 5rem;
    --sp-2xl: 8rem;
    --sec-pad: clamp(5rem, 10vw, 9rem);
    --sec-pad-sm: clamp(4rem, 8vw, 7rem);
    --header-h: 80px;
    /* The breadcrumb bar's row; from 1025px up it sticks under the header,
       so the sticky stack is header + trail there, the header alone below. */
    --crumb-h: 44px;
    --stack-h: var(--header-h);

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 160ms;
    --t-base: 240ms;
    --t-slow: 480ms;
}
@media (min-width: 1025px) {
    :root { --stack-h: calc(var(--header-h) + var(--crumb-h)); }
}
/* A map that ends a page ends it: no padding under it, and the footer sits
   on its lower edge instead of a viewport of blank paper later. */
.map-tail { padding-bottom: 0; }
.site-main:has(> .map-tail:last-child) + .site-footer { margin-top: 0; }

/* Anchor targets clear whatever is stuck above them. */
[id] { scroll-margin-top: calc(var(--stack-h) + var(--sp-sm)); }
/* In-page jumps glide instead of cutting — the hero's "our properties", the
   property quicklinks, the results anchors. Motion is a preference. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--evenue-body-text);
    font-family: var(--evenue-body-font);
    letter-spacing: var(--evenue-body-letter-spacing);
    line-height: 1.6;
    font-size: 16px;
}

::selection { background: var(--evenue-brand); color: #fff; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--evenue-brand) 45%, transparent); outline-offset: 2px; }

h1, h2, h3, h4 {
    font-family: var(--evenue-heading-font);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-4xl); line-height: 0.98; }
h2 { font-size: var(--fs-2xl); line-height: 1.02; }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 1em; line-height: 1.75; }

a { color: inherit; text-decoration: none; transition: color var(--t-base); }
a:hover { color: var(--evenue-brand); }

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-img); }

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.wrap-narrow { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.muted { color: var(--evenue-muted-text); }

/* The kicker voice: coral word + gradient bar above section titles. */
.kicker {
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--evenue-secondary);
    margin-bottom: 0.9rem;
}
.kicker::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--gradient-pulse);
    margin-bottom: 0.7rem;
}

.section { padding-block: var(--sec-pad); }
.section-sm { padding-block: var(--sec-pad-sm); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-lg); }
.section-title { margin: 0; font-size: var(--fs-3xl); }
.section-sub { color: var(--evenue-muted-text); max-width: 56ch; }

/* Night stages with pulse seams. */
.stage-night { background: var(--gradient-night); color: var(--paper); position: relative; }
.stage-night h1, .stage-night h2, .stage-night h3 { color: inherit; }
.pulse-seam-top::before, .pulse-seam-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-pulse);
    z-index: 2;
}
.pulse-seam-top::before { top: 0; }
.pulse-seam-bottom::after { bottom: 0; }

/* ---------- buttons & chips ---------- */

.button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    background: var(--evenue-button-bg);
    color: var(--evenue-button-text);
    border: var(--evenue-button-border-width) solid var(--evenue-button-border-color);
    border-radius: var(--radius-pill); /* labeled identity: "Geometry (pills, ...)" in the header above */
    font-family: var(--evenue-body-font);
    font-size: var(--evenue-button-font-size);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: var(--evenue-button-padding-y) var(--evenue-button-padding-x);
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base), background var(--t-base);
}
.button:hover, .btn:hover { color: var(--evenue-button-text-hover); background: var(--evenue-button-bg-hover); transform: translateY(-2px); box-shadow: var(--glow-primary); }
.button:active, .btn:active { background: var(--evenue-button-bg-active); transform: none; box-shadow: none; }

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.stage-night .btn-outline { color: var(--paper); border-color: var(--paper); }
.stage-night .btn-outline:hover { background: var(--paper); color: var(--ink); }

.btn-text {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--evenue-brand);
    background: linear-gradient(var(--evenue-brand), var(--evenue-brand)) left bottom / 0% 2px no-repeat;
    padding-bottom: 0.3em;
    transition: background-size var(--t-slow) var(--ease-out-expo), color var(--t-base);
}
.btn-text:hover { background-size: 100% 2px; color: var(--evenue-secondary); }

.chip {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
    align-items: center;
    padding: 0.5rem 1.1rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-family: var(--evenue-body-font);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base), border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.chip:hover {
    transform: translateY(-2px);
    border-color: var(--evenue-brand);
    color: var(--evenue-brand);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--evenue-brand) 18%, transparent);
}
.chip.active { background: var(--evenue-brand); border-color: var(--evenue-brand); color: #fff; } /* no glow: the blur under the active chip read as a smudge */

.count-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ink);
    transition: background var(--t-base), color var(--t-base);
}

/* ---------- header: frosted paper, gradient underlines ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-h);
    border-bottom: 1px solid var(--evenue-divider-h-color);
    transition: box-shadow var(--t-base);
}
/* The frosted glass lives on a layer behind the header's content, not on the
   header: an element with backdrop-filter becomes the containing block of its
   position: fixed descendants, and the phone menu inside the header shrank to
   the header's height instead of covering the screen. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
.site-header.scrolled { box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 8%, transparent); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }

.brand {
    font-family: var(--evenue-heading-font);
    font-weight: 800;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    letter-spacing: -0.03em;
    color: var(--ink);
}
.brand:hover {
    background: var(--gradient-pulse);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand img { height: 44px; width: auto; border-radius: 0; }

.site-nav { display: flex; align-items: center; gap: var(--sp-md); }
.site-nav .button { display: none; } /* the drawer's copy of the booking button, phones only */
.site-nav > a:not(.button) {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: var(--gradient-pulse) left bottom / 0% 3px no-repeat;
    padding-bottom: 0.35em;
    transition: background-size var(--t-slow) var(--ease-out-expo);
}
.site-nav > a:not(.button):hover,
.site-nav > a:not(.button)[aria-current] { color: var(--ink); background-size: 100% 3px; }

.header-actions { display: flex; align-items: center; gap: var(--sp-sm); }
.header-actions .button { padding: 0.6rem 1.25rem; font-size: 0.8rem; }

.lang-switcher { display: inline-flex; gap: 8px; padding-left: 12px; border-left: 1px solid var(--evenue-divider-v-color); }
.lang { font-size: 0.75rem; font-weight: 800; color: var(--evenue-muted-text); }
.lang.current { color: var(--evenue-brand); }

/* From four languages up the codes fold into a disclosure. */
.lang-switcher--menu { position: relative; }
.lang-switcher--menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
}
.lang-switcher--menu > summary::-webkit-details-marker { display: none; }
.lang-switcher--menu > summary::after {
    content: "\203a";
    display: inline-block;
    transform: rotate(90deg);
    transition: transform var(--t-base);
}
.lang-switcher--menu[open] > summary::after { transform: rotate(-90deg); }
.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-hover);
}
.lang-menu .lang { text-align: right; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; z-index: 1300; }
.burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base), background var(--t-base); }
.burger[aria-expanded="true"] span { background: var(--evenue-brand); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
    .burger { display: flex; }
    .header-actions .button { display: none; }
    .site-nav .button { display: inline-flex; min-height: 44px; }
    /* Night takeover. */
    .site-nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--sp-md);
        padding: var(--sp-xl) clamp(1.25rem, 6vw, 3rem);
        background: var(--gradient-night);
        /* The drawer used to be parked a viewport's width to the right with a
           transform, and a fixed, transformed box still counts as page: a
           phone's document was twice its screen wide and scrolled sideways
           into blank paper. The drawer sits over the viewport now and is
           revealed with a clip that opens from the right edge — no box ever
           extends past the screen. Its links slide in a little with it, and
           while closed it is hidden from focus and readers. */
        clip-path: inset(0 0 0 100%);
        visibility: hidden;
        transition: clip-path var(--t-slow) var(--ease-out-expo), visibility 0s linear var(--t-slow);
        z-index: 1200;
    }
    .site-nav.open { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
    .site-nav > * { transform: translateX(2.5rem); transition: transform var(--t-slow) var(--ease-out-expo); }
    .site-nav.open > * { transform: none; }
    .site-nav > a:not(.button) {
        font-family: var(--evenue-heading-font);
        font-size: var(--fs-2xl);
        font-weight: 800;
        letter-spacing: -0.03em;
        text-transform: none;
        color: var(--paper);
        background: none;
    }
    .nav-scrim { display: none; }
}

/* ---------- breadcrumbs ---------- */

/* One hairline bar above the page, the trail scrollable on phones. A fixed
   row, so nothing underneath it moves when a long trail scrolls. */
.breadcrumbs {
    height: var(--crumb-h);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--paper);
    border-bottom: 1px solid var(--evenue-divider-h-color);
}
.breadcrumbs__inner { display: flex; align-items: center; height: 100%; }
.breadcrumbs ol { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.breadcrumbs ol::-webkit-scrollbar { display: none; }
.breadcrumbs li { display: flex; gap: 0.75rem; align-items: center; }
.breadcrumbs li + li::before { content: "\203a"; color: var(--evenue-secondary); }
.breadcrumbs a { color: var(--evenue-muted-text); }
.breadcrumbs a:hover { color: var(--evenue-brand); }
.breadcrumbs [aria-current] { color: var(--ink); }
/* On the desktop the trail rides under the header. */
@media (min-width: 1025px) {
    .breadcrumbs { position: sticky; top: var(--header-h); z-index: 900; }
}

/* ---------- footer: night stage ---------- */

.site-footer { margin-top: var(--sp-2xl); background: var(--gradient-night); color: var(--paper); position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-pulse); }
.footer-inner { display: flex; flex-direction: column; gap: var(--sp-md); padding-block: var(--sp-xl) var(--sp-lg); }
.footer-brand { font-family: var(--evenue-heading-font); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.footer-groups { display: flex; gap: var(--sp-xl); flex-wrap: wrap; }
.footer-nav { display: flex; gap: var(--sp-md); flex-wrap: wrap; align-items: baseline; }
.footer-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--evenue-secondary); }
.footer-nav a { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--paper); }
.footer-nav a:hover { color: var(--evenue-secondary); }
.footer-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    padding-top: var(--sp-sm);
    border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
    color: color-mix(in srgb, var(--paper) 65%, transparent);
    font-size: 0.8rem;
}
.footer-meta .lang-switcher { border: 0; padding: 0; }
.footer-meta .lang { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.footer-meta .lang.current, .footer-meta a.lang:hover { color: var(--paper); }
.footer-legal { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: var(--paper); }
.footer-note { margin: 0; font-size: 0.75rem; color: color-mix(in srgb, var(--paper) 55%, transparent); }

/* ---------- hero: diagonal break ---------- */

.hero {
    position: relative;
    height: 88vh;
    min-height: 560px;
    max-height: 960px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--gradient-night);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), 0 100%);
}
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
    .hero img.bg { animation: hero-drift 24s ease-in-out infinite alternate; }
    @keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ink) 10%, transparent) 0%,
        color-mix(in srgb, var(--ink) 35%, transparent) 55%,
        color-mix(in srgb, var(--ink) 82%, transparent) 100%);
    z-index: 1;
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: var(--sp-xl); color: #fff; }
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: var(--sp-sm);
}
.hero-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--evenue-secondary);
    box-shadow: 0 0 12px var(--evenue-secondary);
}
.hero-statement {
    font-size: clamp(2.75rem, 2rem + 4.5vw, 5.75rem);
    line-height: 0.98;
    max-width: 18ch;
    color: inherit;
    margin: 0 0 0.4em;
}
.hero-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }
.hero-actions .btn-outline { color: #fff; border-color: #fff; background: transparent; }
.hero-actions .btn-outline:hover { background: #fff; color: var(--ink); }
@media (max-width: 768px) { .hero { height: 72vh; min-height: 480px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75rem), 0 100%); } }

/* ---------- pulse marquee ---------- */


/* ---------- cards & bento ---------- */

.card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--evenue-divider-h-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    box-shadow: var(--evenue-card-shadow);
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--glow-hover); color: inherit; }
.card-image-wrap { position: relative; overflow: hidden; }
.card-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; transition: transform var(--t-slow) var(--ease-out-expo); }
.card:hover .card-image { transform: scale(1.05); }
.card-body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-meta {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--evenue-secondary);
}
.card-title {
    display: block;
    font-family: var(--evenue-heading-font);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-size: 1.35rem;
    color: var(--ink);
    margin: 0;
    transition: color var(--t-base);
}
.card:hover .card-title { color: var(--evenue-brand); }
.card-tags { display: block; font-size: 0.82rem; color: var(--evenue-muted-text); font-weight: 600; }
.card-excerpt { display: block; font-size: 0.95rem; color: var(--evenue-body-text); }
.card-excerpt p { margin: 0; }

.sticker {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 1;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--evenue-secondary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: var(--glow-secondary);
}

/* The badge shows only the short mark; its full label stays readable for
   screen readers. */
.ai-label__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The label on an AI-generated image (contract 2.11.0): the sticker's pill,
   in ink with paper type, as white on the sticker's secondary fails contrast
   at this size. Bottom right on every picture, so it reads as part of the
   image and not of the card text below it (the sticker holds the top left). */
.ai-label--badge {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    z-index: 2;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--evenue-body-font);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Its frames: the gallery button, the destination card (whose image sits in
   the link itself) and .image-frame, the wrapper of a mosaic tile or a plate. */
.gallery-grid__item, .destination-card, .image-frame { position: relative; }
.image-frame { display: block; }
/* The destination card ends in its text: the label sits on its image, top right. */
.destination-card > .ai-label--badge { top: 0.9rem; bottom: auto; }
.hero > .ai-label--badge, .hero-banner > .ai-label--badge, .event-hero > .ai-label--badge { left: auto; right: clamp(1.25rem, 4vw, 2.5rem); }
.hero-banner > .ai-label--badge { bottom: var(--sp-sm); }
.hero > .ai-label--badge { bottom: calc(3.5rem + var(--sp-sm)); } /* clear of the diagonal cut */
/* The overlap plate covers the event hero's lower edge: top right, level with its chip. */
.event-hero > .ai-label--badge { top: var(--sp-md); bottom: auto; }
@media (max-width: 768px) {
    .hero > .ai-label--badge { bottom: calc(1.75rem + var(--sp-sm)); }
    /* A list row's thumbnail is 96px wide: the mark moves into its corner. */
    .list-view .ai-label--badge { right: 0.3rem; bottom: 0.3rem; }
}

/* Bento: dense grid, first tile 2x2. */
.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(20rem, auto);
    grid-auto-flow: dense;
    gap: var(--sp-lg);
}
.bento > .card:first-child { grid-column: span 2; grid-row: span 2; }
.bento > .card:first-child .card-image { aspect-ratio: auto; height: 100%; }
.bento > .card:first-child .card-image-wrap { flex: 1; }
/* In the grid the lead's text keeps its own height and the picture takes the
   rest of the two rows, so no empty band opens under the text or above the CTA. */
.bento:not(.list-view) > .card:first-child .card-body { flex: 0 0 auto; }
@media (min-width: 769px) { .bento:not(.list-view) > .card:first-child .card-image-wrap { min-height: 16rem; } }
.bento > .card:first-child .card-title { font-size: var(--fs-2xl); }
/* The lead tile of a bento (houses, events, venues): two rows tall, so it
   shows the extras every card carries (template-parts/lead-extras.php):
   facts, chips and a call to action. Labels in body text, not the
   secondary: the secondary misses 4.5:1 on the card on several palettes. */
.lead-extras { display: none; }
.bento:not(.list-view) > .card:first-child .lead-extras { display: contents; }
.lead-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: var(--sp-sm); margin-top: var(--sp-sm); padding-block: var(--sp-sm); border-block: 1px solid var(--evenue-divider-h-color); }
.lead-fact { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.lead-label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--evenue-body-text); }
.lead-fact strong { font-family: var(--evenue-heading-font); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.lead-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.lead-chips > .lead-label { flex-basis: 100%; }
.lead-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem; border: 1px solid var(--evenue-divider-h-color); border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.lead-chip::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--evenue-secondary); }
.lead-cta { align-self: flex-start; margin-top: auto; }
/* On one column the tile is no longer two rows tall: facts and CTA, no chips. */
@media (max-width: 768px) { .lead-chips { display: none; } }
@media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .bento > .card:first-child { grid-column: auto; grid-row: auto; }
    .bento > .card:first-child .card-image { aspect-ratio: 3 / 2; }
    .bento > .card:first-child .card-title { font-size: 1.35rem; }
}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } }

/* List view: momentum rows. */
.card-grid.list-view, .bento.list-view { display: flex; flex-direction: column; gap: var(--sp-sm); }
.bento.list-view > .card:first-child .card-title { font-size: 1.35rem; }
.card-grid.list-view .card, .bento.list-view .card { flex-direction: row; align-items: stretch; }
.card-grid.list-view .card:hover, .bento.list-view .card:hover { transform: translateX(6px); }
.card-grid.list-view .card-image-wrap, .bento.list-view .card-image-wrap { flex: 0 0 180px; }
.bento.list-view > .card:first-child .card-image-wrap { flex: 0 0 180px; } /* outranks the bento lead rule */
.card-grid.list-view .card-image, .bento.list-view .card-image { height: 100%; aspect-ratio: auto; min-height: 120px; }
@media (max-width: 768px) {
    .card-grid.list-view .card-image-wrap, .bento.list-view .card-image-wrap { flex-basis: 96px; }
    .card-grid.list-view .card-excerpt, .bento.list-view .card-excerpt { display: none; }
    .card-grid.list-view .card-title, .bento.list-view .card-title { font-size: 1rem; }
}

/* Horizontal scroll row (related events). */
.card-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 20px;
    overflow-x: auto;
    padding: 8px 4px 16px;
    scroll-snap-type: x proximity;
}
.card-row .card { scroll-snap-align: start; }

/* ---------- filters ---------- */


.filter-deck {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--evenue-card-shadow);
    padding: var(--sp-md);
    margin-top: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
/* Chip rows stay on one line and are dragged — a wrapped block of twelve
   pills reads as a paragraph, not a control. The padding keeps the hover
   lift and the glow inside the scroller. */
.filter-chips {
    display: flex;
    gap: 0.6rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    padding: 4px 0 10px;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips.dragging, .quicklinks.dragging { cursor: grabbing; scroll-behavior: auto; }
.filter-chips.dragging a, .quicklinks.dragging a { pointer-events: none; }
/* Two chip rows in one deck need names, or two "All" chips stack unexplained. */
.filter-label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--evenue-secondary); margin-bottom: -0.4rem; }
.filter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
/* The search takes the left of the row and grows; the dates and the button
   sit together on the right, so the space in the row separates the two
   questions — what, and when. The dates read as a range with the arrow. */
.filter-form .filter-search { flex: 0 1 380px; }
.date-range { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.date-range__arrow { font-weight: 800; color: var(--evenue-secondary); }
@media (max-width: 640px) { .date-range { margin-left: 0; flex-wrap: wrap; } }
.filter-form input {
    padding: 0.55rem 1.1rem;
    border: 2px solid var(--evenue-divider-h-color);
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
}
.filter-form input:focus { outline: none; border-color: var(--evenue-brand); }
.filter-form input[type="search"] { min-width: 200px; }
/* The house dropdown wears the inputs' pill; the caret is drawn from the text
   colour, so it follows the palette like everything else. */
.filter-form select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 100%;
    padding: 0.55rem 2.4rem 0.55rem 1.1rem;
    border: 2px solid var(--evenue-divider-h-color);
    border-radius: var(--radius-pill);
    background-color: var(--paper);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.filter-form select:hover, .filter-form select:focus-visible, .filter-form select.is-set { border-color: var(--evenue-brand); }
/* iOS zooms into a field whose text is under 16px; on touch screens the dropdown reads at 1rem. */
@media (pointer: coarse) { .filter-form select { font-size: 1rem; } }

.reset-link { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--evenue-muted-text); text-decoration: underline; }
.reset-link:hover { color: var(--evenue-secondary); }

.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    border-bottom: 2px solid var(--ink);
    padding-bottom: var(--sp-sm);
    margin: var(--sp-lg) 0;
}
.view-toggle { display: inline-flex; gap: 0.4rem; }
.view-toggle button {
    background: none;
    border: 2px solid var(--evenue-divider-h-color);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--evenue-muted-text);
    cursor: pointer;
    transition: all var(--t-base);
}
.view-toggle button.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Pager — the results bar's voice, mirrored under the grid. Steps are links
   with a tappable height; the one that cannot go further is muted. */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    border-top: 2px solid var(--ink);
    margin-top: var(--sp-lg);
    padding-top: var(--sp-sm);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pager__step { display: inline-block; padding: 0.6rem 0; color: var(--evenue-brand); }
.pager__step:hover { color: var(--evenue-secondary); }
.pager__step[aria-hidden] { color: var(--evenue-muted-text); opacity: 0.5; }
.pager__position { color: var(--evenue-muted-text); }

/* ---------- destinations rail: sticky night map + departure board ---------- */

.rail { display: grid; grid-template-columns: minmax(320px, 45%) 1fr; align-items: start; }
.rail-map { position: sticky; top: calc(var(--stack-h) + var(--sp-md)); }
.rail-map .map-embed { margin: 0; border-radius: 0; border: 0; }
.rail:not(:has(.rail-map)) { grid-template-columns: 1fr; } /* no map to draw: the board runs full width */
.rail-list { padding: var(--sec-pad) clamp(1.25rem, 4vw, 2.5rem); background: var(--card); }
@media (max-width: 768px) {
    .rail { display: block; }
    .rail-map { position: static; }
}

.index-list { list-style: none; margin: var(--sp-lg) 0 0; padding: 0; }
.index-list__item { border-top: 2px solid var(--ink); }
.index-list__item:last-child { border-bottom: 2px solid var(--ink); }
.index-list__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding: 1.4rem 0.25rem; }
.index-list__name {
    font-family: var(--evenue-heading-font);
    font-size: var(--fs-xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    transition: transform var(--t-base) var(--ease-spring), color var(--t-base);
}
.index-list__link:hover .index-list__name { transform: translateX(12px); color: var(--evenue-brand); }
.index-list__link:hover .count-pill { background: var(--ink); color: var(--paper); }

/* Night maps: dark-invert the tiles, pulse pin. */
.map-night .leaflet-tile { filter: invert(1) hue-rotate(180deg) grayscale(0.35) brightness(0.9); }
.map-night { background: var(--ink); }
.pulse-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--gradient-pulse);
    border: 2px solid #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--evenue-brand) 40%, transparent);
}
.pulse-pin span { display: block; transform: rotate(45deg); color: #fff; font-size: 0.7rem; font-weight: 800; text-align: center; line-height: 26px; }
.leaflet-popup-content-wrapper { border-radius: var(--radius-sm) !important; }

/* ---------- archive hero banner ---------- */

.hero-banner {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--gradient-night);
}
.hero-banner img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ink) 10%, transparent) 0%,
        color-mix(in srgb, var(--ink) 35%, transparent) 55%,
        color-mix(in srgb, var(--ink) 82%, transparent) 100%);
}
.hero-banner::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--gradient-pulse); z-index: 2; }
.hero-banner .hero-inner { padding-bottom: var(--sp-lg); }
.hero-banner h1 { color: #fff; max-width: 18ch; margin: 0 0 0.2em; }
.hero-banner h1::before { content: ""; display: block; width: 3.5rem; height: 4px; border-radius: var(--radius-pill); background: var(--gradient-pulse); margin-bottom: 0.6rem; }
.hero-banner p { color: rgba(255, 255, 255, 0.88); max-width: 58ch; margin: 0; }
.hero-banner.compact { min-height: 0; background: var(--paper); display: block; }
.hero-banner.compact::before, .hero-banner.compact::after { display: none; }
.hero-banner.compact .hero-inner { padding-block: clamp(3rem, 6vw, 5rem) var(--sp-lg); color: var(--ink); }
.hero-banner.compact h1 { color: var(--ink); }
.hero-banner.compact p { color: var(--evenue-muted-text); }
@media (max-width: 768px) { .hero-banner { min-height: 52vh; } }

/* ---------- single: shared ---------- */

/* `.wrap.single` and the destination page's `.wrap > .single`, never a bare
   `.single`: WordPress puts `single` on <body> of every detail page, and a
   bare selector padded the whole document — 48px above the sticky header,
   which only reached the top once you had scrolled past it. */
.wrap.single, .wrap > .single { padding-top: var(--sp-lg); }
.single-meta { display: block; margin-bottom: 8px; }
.prose { max-width: 68ch; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--evenue-brand) 40%, transparent); text-underline-offset: 0.2em; }
.prose blockquote { border-left: 4px solid var(--evenue-secondary); margin: 1em 0; padding-left: 1em; color: var(--evenue-muted-text); }

.place-block {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    margin: var(--sp-md) 0;
    padding: 0.9rem 1.4rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    width: fit-content;
}
.place-block address { font-style: normal; font-weight: 600; font-size: 0.9rem; }
.maps-link { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--evenue-brand); white-space: nowrap; }
.maps-link:hover { color: var(--evenue-secondary); }

.assoc-link { margin-top: var(--sp-md); color: var(--evenue-muted-text); }
.rating { color: var(--evenue-secondary); letter-spacing: 0.2em; font-size: 0.8em; vertical-align: 0.1em; }

.map-embed { width: 100%; margin: var(--sp-md) 0; border: 1px solid var(--evenue-divider-h-color); border-radius: var(--radius-md); overflow: hidden; background: var(--card); z-index: 0; }

/* ---------- single event: editorial overlap ---------- */

.event-hero {
    position: relative;
    height: 64vh;
    min-height: 460px;
    max-height: 760px;
    background: var(--gradient-night);
}
.event-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.event-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 8%, transparent), color-mix(in srgb, var(--ink) 45%, transparent)); }
.event-hero .hero-chip { position: absolute; top: var(--sp-md); left: clamp(1.25rem, 4vw, 2.5rem); z-index: 2; background: var(--evenue-secondary); box-shadow: var(--glow-secondary); color: #fff; /* on the photo, like the chip dot */ }
.event-hero .hero-chip::before { background: #fff; box-shadow: none; }

/* The headline plate straddles the hero/paper seam. */
.overlap-plate { position: relative; z-index: 3; margin-top: clamp(-6rem, -10vw, -2rem); }
.overlap-plate h1 {
    display: inline-block;
    background: var(--paper);
    padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
    border-radius: var(--radius-sm);
    /* A soft, low shadow: the plate overlaps the hero, and the glow it had
       fell hard onto the fact line beneath it. */
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 9%, transparent);
    font-size: var(--fs-4xl);
    max-width: 22ch;
    margin: 0;
}
.event-meta-line { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin: var(--sp-sm) 0 0; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--evenue-muted-text); }
.event-meta-line span + span::before { content: "|"; color: var(--evenue-secondary); margin-right: var(--sp-sm); }

.event-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-lg); align-items: start; padding-top: var(--sp-xl); }
@media (max-width: 1024px) { .event-layout { grid-template-columns: 1fr; } }

.highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.highlight-card {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--evenue-card-shadow);
    padding: 1.2rem 1.3rem;
}
.highlight-card .icon-chip {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-pulse-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
}
.highlight-card .label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--evenue-secondary); }
.highlight-card strong { font-family: var(--evenue-heading-font); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }

.event-sidebar { position: sticky; top: calc(var(--stack-h) + var(--sp-sm)); display: flex; flex-direction: column; gap: var(--sp-sm); }
@media (max-width: 1024px) { .event-sidebar { position: static; } }
.sidebar-box { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--evenue-card-shadow); padding: 1.4rem; position: relative; overflow: hidden; }
.sidebar-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-pulse); }
.sidebar-box .box-title { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin-bottom: 0.9rem; }
.sidebar-box .button { width: 100%; }
/* Booking embed: 290px holds the booking widget's stacked form, a second
   status line included. A shorter frame gets a denser form, never a cut one. */
.booking-embed { display: block; width: 100%; height: 290px; border: 0; }
/* The facts inside a card: a label and a value per line, ruled. */
.sidebar-box .fact-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.sidebar-box .fact-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--evenue-divider-h-color); font-size: 0.9rem; }
.sidebar-box .fact-list li:last-child { border-bottom: 0; }
.sidebar-box .fact-list span { color: var(--evenue-muted-text); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; }
.sidebar-box .fact-list strong { text-align: right; }
.sidebar-box p { margin: 0 0 0.5em; font-size: 0.9rem; }
.sidebar-box.night { background: var(--gradient-night); color: var(--paper); }
.sidebar-box.night .box-title { color: var(--paper); }

/* Night venue stage split. */
.venue-stage { padding: var(--sec-pad-sm) 0; margin-top: var(--sp-xl); }
.venue-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-xl); align-items: center; }
@media (max-width: 1024px) { .venue-split { grid-template-columns: 1fr; } }
.venue-stage .kicker { color: var(--evenue-secondary); }
.venue-stage p { color: color-mix(in srgb, var(--paper) 85%, transparent); }

/* Gallery mosaic: 4 columns, main tile 2x2. */
.gallery-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 0.625rem; margin: var(--sp-md) 0; }
.gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.gallery-mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 768px) {
    .gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin: var(--sp-md) 0; }
.gallery-grid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery-grid__item { padding: 0; border: 0; background: none; display: block; cursor: zoom-in; } /* focus ring stays the browser default */
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* CTA: night stage with breathing radial glows. */
.cta-band { position: relative; overflow: hidden; padding: var(--sec-pad) 0; margin-top: var(--sp-2xl); text-align: left; }
.cta-glow { position: absolute; inset: 0; pointer-events: none; }
.cta-glow::before, .cta-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(10px); }
.cta-glow::before { width: 640px; height: 340px; left: 12%; top: 18%; background: radial-gradient(closest-side, color-mix(in srgb, var(--evenue-brand) 35%, transparent), transparent); }
.cta-glow::after { width: 560px; height: 300px; right: -6%; bottom: -8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--evenue-secondary) 28%, transparent), transparent); }
@media (prefers-reduced-motion: no-preference) {
    .cta-glow { animation: glow-breathe 9s ease-in-out infinite alternate; }
    @keyframes glow-breathe { from { opacity: 0.7; } to { opacity: 1; } }
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--fs-4xl); }
.cta-band h2::before { content: ""; display: block; width: 2.25rem; height: 4px; border-radius: var(--radius-pill); background: var(--gradient-pulse); margin-bottom: 0.7rem; }
.cta-band p { color: color-mix(in srgb, var(--paper) 80%, transparent); max-width: 46ch; }
.cta-band .button { margin-right: 0.6rem; }
/* Night never faces night across an empty gap: a band right after the venue
   stage, or one that nothing follows before the night footer, takes the card
   surface. After the stage it joins it on a single pulse line. */
.venue-stage + .cta-band, .cta-band:last-child { background: var(--card); color: var(--ink); }
.venue-stage + .cta-band { margin-top: 0; }
.venue-stage + .cta-band.pulse-seam-top::before, .cta-band.pulse-seam-bottom:last-child::after { display: none; }
.venue-stage + .cta-band .cta-glow, .cta-band:last-child .cta-glow { display: none; }
.venue-stage + .cta-band p, .cta-band:last-child p { color: var(--evenue-body-text); }
.venue-stage + .cta-band .btn-outline, .cta-band:last-child .btn-outline { color: var(--ink); border-color: var(--ink); }
.venue-stage + .cta-band .btn-outline:hover, .cta-band:last-child .btn-outline:hover { background: var(--ink); color: var(--paper); }
.site-main:has(.cta-band:last-child) + .site-footer { margin-top: 0; }

/* ---------- property single ---------- */

.property-band { position: relative; background: var(--card); padding: var(--sp-lg) 0 var(--sp-md); }
.property-band::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gradient-pulse); }
.property-band h1 { font-size: var(--fs-3xl); line-height: 0.98; margin: 0.15em 0; }
.property-band address { font-style: normal; font-size: 0.875rem; font-weight: 600; color: var(--evenue-muted-text); }
.property-topline { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }

/* The property's chips as a bar of their own: full width, stuck under the
   header stack, on paper, so a section can be chosen from anywhere on the
   page. Anchor targets on that page clear the bar too. */
.quicklinks-bar { position: sticky; top: var(--stack-h); z-index: 40; background: var(--paper); box-shadow: 0 2px 0 var(--evenue-divider-h-color); }
body:has(.quicklinks-bar) [id] { scroll-margin-top: calc(var(--stack-h) + 62px); }
/* The sticky sidebar keeps its distance from the bar, not just from the stack. */
body:has(.quicklinks-bar) .property-sidebar { top: calc(var(--stack-h) + 62px + var(--sp-sm)); }
.quicklinks { display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: none; padding-block: var(--sp-sm) 6px; cursor: grab; }
.quicklinks::-webkit-scrollbar { display: none; }
.quicklinks .chip { flex-shrink: 0; }

.property-gallery { display: grid; grid-template-columns: 3fr 2fr; height: clamp(400px, 46vw, 600px); gap: 0.625rem; margin: var(--sp-md) 0; }
.property-gallery a { display: block; overflow: hidden; border-radius: var(--radius-img); position: relative; }
.property-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform var(--t-slow) var(--ease-out-expo); }
.property-gallery a:hover img { transform: scale(1.05); }
.gallery-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.625rem; }
.gallery-more-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ink) 58%, transparent);
    color: #fff;
    font-family: var(--evenue-heading-font);
    font-size: var(--fs-lg);
    font-weight: 800;
}
@media (max-width: 768px) {
    .property-gallery { grid-template-columns: 1fr; height: auto; }
    .property-gallery > a:first-child { aspect-ratio: 16 / 10; }
    .gallery-side { aspect-ratio: 2 / 1; }
}

.property-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: var(--sp-lg); align-items: start; padding-top: var(--sp-lg); }
@media (max-width: 1024px) { .property-layout { grid-template-columns: 1fr; } }
.property-layout section { margin-bottom: var(--sp-xl); }
.property-layout h2 { font-size: var(--fs-2xl); }
.property-layout h2::before { content: ""; display: block; width: 2.25rem; height: 4px; border-radius: var(--radius-pill); background: var(--gradient-pulse); margin-bottom: 0.6rem; }

.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-sm); }
.fact-tile { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--evenue-card-shadow); padding: 1.2rem 1.3rem; }
.fact-tile .label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--evenue-secondary); margin-bottom: 0.4rem; }
.fact-tile strong { font-family: var(--evenue-heading-font); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--evenue-brand); }

.property-sidebar { position: sticky; top: calc(var(--stack-h) + var(--sp-sm)); display: flex; flex-direction: column; gap: var(--sp-sm); }
@media (max-width: 1024px) { .property-sidebar { position: static; } }
.sidebar-row { display: flex; justify-content: space-between; gap: var(--sp-sm); font-size: 0.9rem; padding: 0.35em 0; }

/* Amenities band: coral dots. */
.amenities-band { border-top: 2px solid var(--ink); padding: var(--sec-pad-sm) 0; }
.amenity-grid { list-style: none; margin: var(--sp-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-sm); }
.amenity { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--evenue-card-shadow); padding: 1.1rem 1.3rem; display: flex; gap: 0.8rem; align-items: baseline; }
.amenity::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--evenue-secondary); }
.amenity-name { font-weight: 700; color: var(--ink); }
a.amenity-name:hover { color: var(--evenue-brand); }
.amenity-comment { display: block; font-size: 0.85rem; color: var(--evenue-muted-text); }

/* ---------- 404 ---------- */

.error-404 { min-height: calc(100vh - var(--header-h) * 3); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: var(--sec-pad); }
.error-404 h1 {
    font-size: clamp(7rem, 6rem + 18vw, 17rem);
    line-height: 0.9;
    margin: 0 0 0.15em;
    color: var(--evenue-brand);
    background: var(--gradient-pulse);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.error-404 p { max-width: 42ch; font-size: 1.05rem; margin-bottom: var(--sp-md); }

/* ---------- lightbox ---------- */

.starter-lightbox { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--evenue-heading-text) 88%, transparent); z-index: 2000; align-items: center; justify-content: center; }
.starter-lightbox.open { display: flex; }
.starter-lightbox img { max-width: 88vw; max-height: 86vh; object-fit: contain; }
.starter-lightbox button { position: absolute; background: none; border: none; color: #fff; font-size: 2.4rem; cursor: pointer; padding: 12px 20px; line-height: 1; }
.lb-close { top: 12px; right: 16px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
/* The AI label of the image on show, in the box's hard-coded white on black. */
.starter-lightbox .lb-ai { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); text-align: center; margin: 0; padding: 4px 12px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.75rem; letter-spacing: 0.06em; }