/* ==========================================================================
   PRIVATE EXPERIENCES: the catalogue (/experiences), one experience
   (/experience/<slug>) and the three Local Host pages: City & Culture,
   Active and Language Exchange.

   One large line, one lead, the picture, then chapters on white and sand.
   Colours, type, radii and shadows come from elite.css (--c-*, --t-*,
   --r-*, --sh-*) and motion from motion.css; this file only places things.
   Selectors start .xp- or sit inside .xp-page.

   Photographs never zoom or scale. A card answers a hover with a gold edge
   and a soft shadow; it does not lift. On a phone the catalogue becomes
   one sideways row, so the page stays short.
   ========================================================================== */

/* An element marked hidden stays hidden, whatever display rule a class
   gives it (.xp-note and .xr-actions both set display). This guard kept a
   request page from showing an approval button that had already been
   used; the request screens load this file and rely on it. */
[hidden] { display: none !important; }

/* Visually hidden, still announced by screen readers. */
.sr-only-x {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   1. NOTES SHARED WITH OTHER PAGES
   .xp-note and .xp-disclaimer also sit on the Local Host list and profile,
   the booking review and the request status page, so the names stay and
   the shape is elite.css .et-note. Icons may be an Elite <svg class="et-i">
   or, on pages not yet moved over, an <i>; both are styled.
   ========================================================================== */

.xp-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 18px 0;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    background: var(--c-bg-alt);
    color: var(--c-ink);
    font-size: var(--t-small);
    line-height: 1.5;
}
.xp-note i, .xp-note .et-i { flex: none; margin-top: 3px; color: var(--c-bronze); }
.xp-note-warm { background: var(--c-warn-bg); }
.xp-note a { color: var(--c-link); text-decoration: underline; }

/* A disclaimer must be unmissable and appear on page, card and checkout. */
.xp-disclaimer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    background: var(--c-warn-bg);
    color: var(--c-ink);
    font-size: var(--t-small);
    font-weight: 600;
    line-height: 1.5;
}
.xp-disclaimer i, .xp-disclaimer .et-i { flex: none; margin-top: 3px; color: var(--c-bronze); }

.xp-disclaimer-mini {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--c-line);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--c-muted);
}
.xp-disclaimer-mini i, .xp-disclaimer-mini .et-i { flex: none; margin-top: 2px; font-size: 0.875rem; color: var(--c-bronze); }

/* ==========================================================================
   2. THE PAGE AND ITS FIRST SCREEN
   ========================================================================== */

.xp-page { min-width: 0; }

.xp-hero {
    padding: clamp(44px, 7vw, 92px) 0 clamp(36px, 5vw, 64px);
    background: var(--c-bg);
}
.xp-hero__copy { max-width: 980px; margin-inline: auto; text-align: center; }
.xp-hero__copy--left { max-width: 860px; margin-inline: 0; text-align: left; }

/* Apple's eyebrow: sentence case, bronze, semibold, the size of the lead. */
.xp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: var(--t-lead);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.011em;
    color: var(--c-bronze);
}
.xp-kicker i, .xp-kicker .et-i { font-size: 0.95em; color: var(--c-gold); }

.xp-title {
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    text-wrap: balance;
}
.xp-hero__copy .xp-title { max-width: 18ch; margin-inline: auto; }
.xp-hero__copy--left .xp-title { max-width: 20ch; margin-inline: 0; font-size: var(--t-display); }

.xp-lead {
    max-width: 720px;
    margin: 20px auto 0;
    font-size: var(--t-sub);
    line-height: 1.25;
    letter-spacing: 0.007em;
    color: var(--c-ink);
    text-wrap: balance;
}
.xp-sub {
    max-width: 680px;
    margin: 14px auto 0;
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--c-muted);
    text-wrap: pretty;
}
.xp-hero__copy--left .xp-lead,
.xp-hero__copy--left .xp-sub { margin-left: 0; margin-right: 0; }

/* The picture of the first screen: wide, rounded, never cropped to a sliver. */
.xp-cover {
    margin: clamp(36px, 5vw, 60px) 0 0;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--c-bg-alt-2);
    aspect-ratio: 16 / 7;
}
.xp-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.xp-hero__notes { max-width: 860px; margin: clamp(28px, 4vw, 40px) auto 0; }
.xp-hero__notes .xp-note { margin: 12px 0 0; }

/* THE PHOTO HERO: when a first screen has a cover photograph, the picture
   becomes the stage and the words stand on it (as on the homepage), rather
   than a white page of text with a picture underneath. */
.xp-hero:has(.xp-cover) {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(84px, 11vw, 150px) 0 clamp(56px, 8vw, 104px);
    background: var(--c-espresso); color: #fff;
}
.xp-hero:has(.xp-cover)::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(75% 95% at 50% 45%, rgba(17, 12, 9, 0.72) 0%, rgba(17, 12, 9, 0.52) 60%, rgba(17, 12, 9, 0.36) 100%),
        linear-gradient(0deg, rgba(17, 12, 9, 0.55) 0%, rgba(17, 12, 9, 0) 45%);
}
.xp-hero:has(.xp-cover)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0) 0%, var(--c-gold) 50%, rgba(37, 99, 235, 0) 100%);
}
.xp-hero:has(.xp-cover) .xp-cover {
    position: absolute; inset: 0; z-index: 0; margin: 0;
    border-radius: 0; aspect-ratio: auto; background: var(--c-espresso);
}
.xp-hero:has(.xp-cover) .xp-cover img { height: 100%; margin: 0; border-radius: 0; }
.xp-hero:has(.xp-cover) .xp-hero__copy,
.xp-hero:has(.xp-cover) .xp-hero__notes,
.xp-hero:has(.xp-cover) .xp-jump { position: relative; z-index: 2; }
.xp-hero:has(.xp-cover) .xp-kicker { color: var(--c-gold-light); }
.xp-hero:has(.xp-cover) .xp-title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.xp-hero:has(.xp-cover) .xp-lead { color: rgba(255, 255, 255, 0.88); }
.xp-hero:has(.xp-cover) .xp-sub { color: rgba(255, 255, 255, 0.78); }
.xp-hero:has(.xp-cover) .xp-seg {
    background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.xp-hero:has(.xp-cover) .xp-seg a { color: #fff; }
.xp-hero:has(.xp-cover) .xp-seg a .et-i { color: var(--c-gold-light); }
.xp-hero:has(.xp-cover) .xp-seg a:hover { background: rgba(255, 255, 255, 0.16); }
.xp-hero:has(.xp-cover) .xp-seg a[aria-current="page"] { background: #fff; color: var(--c-ink); }
.xp-hero:has(.xp-cover) .xp-seg a[aria-current="page"] .et-i { color: var(--c-bronze); }
@media (max-width: 734px) {
    .xp-hero:has(.xp-cover) { padding: 56px 0 40px; }
    .xp-hero:has(.xp-cover)::before {
        background: linear-gradient(180deg, rgba(17, 12, 9, 0.55) 0%, rgba(17, 12, 9, 0.7) 55%, rgba(17, 12, 9, 0.88) 100%);
    }
}

/* All, by day, after dark: Apple's segmented control, three real links. */
.xp-seg {
    display: inline-flex;
    gap: 4px;
    margin-top: 28px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
}
.xp-seg a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: var(--t-small);
    color: var(--c-ink);
    text-decoration: none;
    transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.xp-seg a .et-i { font-size: 0.95rem; color: var(--c-bronze); }
.xp-seg a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.7); }
.xp-seg a[aria-current="page"] { background: var(--c-bg); box-shadow: var(--sh-1); font-weight: 600; }

/* Quick doors under a Local Host page's headline. */
.xp-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.xp-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-pill);
    background: var(--c-bg);
    color: var(--c-ink);
    font-size: var(--t-small);
    text-decoration: none;
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.xp-jump-btn .et-i { font-size: 1rem; color: var(--c-bronze); }
.xp-jump-btn:hover { border-color: var(--c-ink); color: var(--c-ink); text-decoration: none; }

/* ==========================================================================
   3. THE CATALOGUE
   ========================================================================== */

.xp-catalogue__head h2 { font-size: var(--t-section); }
.xp-catalogue__head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.xp-catalogue .xp-note { margin: 0 0 24px; background: var(--c-bg); }

.xp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* The four catalogues share one rhythm: three across on a wide screen, two
   on a tablet, one sideways row on a phone (section 5). */
.xp-grid.xp-grid--catalogue {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    overflow: visible;
}

/* --- the card ------------------------------------------------------------- */
.xp-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-1);
    transition: border-color 260ms var(--et-ease-glide, ease), box-shadow 260ms var(--et-ease-glide, ease);
}
/* No lift: a gold edge and a soft, deeper shadow. */
.xp-item:hover,
.xp-item:focus-within { border-color: rgba(37, 99, 235, 0.55); box-shadow: 0 10px 30px -18px rgba(17, 12, 9, 0.35); }

.xp-item-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-bg-alt-2); }
.xp-item-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Keep faces and the action visible when portrait originals are cropped into
   the shared landscape frame. Apply the same focal point on cards and detail
   pages so opening an experience never changes the crop unexpectedly. */
:is(.xp-item-media, .xp-detail-media) img[src*="aodai-conical-hat.jpg"] { object-position: 50% 30%; }
:is(.xp-item-media, .xp-detail-media) img[src*="aodai-street.jpg"] { object-position: 50% 55%; }
:is(.xp-item-media, .xp-detail-media) img[src*="cafe-terrace.jpg"] { object-position: 50% 55%; }
:is(.xp-item-media, .xp-detail-media) img[src*="cheers-evening.jpg"] { object-position: 50% 35%; }
:is(.xp-item-media, .xp-detail-media) img[src*="street-food-night.jpg"] { object-position: 50% 42%; }
:is(.xp-item-media, .xp-detail-media) img[src*="friends-laughing.jpg"] { object-position: 50% 40%; }
:is(.xp-item-media, .xp-detail-media) img[src*="IMG_1747.JPG.jpeg"] { object-position: 50% 28% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="IMG_1749.JPG.jpeg"] { object-position: 50% 38% !important; }
:is(.xp-item-media, .xp-detail-media) img[src*="IMG_1752.JPG.jpeg"] { object-position: 50% 40% !important; }

.xp-time-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: var(--c-ink);
    font-size: var(--t-micro);
    font-weight: 600;
}
.xp-time-badge .et-i { color: var(--c-bronze); }

.xp-item-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 22px 24px 24px; }
/* h2 or h3 depending on the page's outline; one look for both. */
.xp-item-title {
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.011em;
    color: var(--c-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.xp-item-text { font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); }

.xp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-tag {
    max-width: 100%;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
    color: var(--c-ink-2);
    font-size: var(--t-micro);
    overflow-wrap: anywhere;
}

.xp-meta { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.xp-meta-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.45; color: var(--c-muted); }
.xp-meta-row .et-i { flex-shrink: 0; margin-top: 2px; font-size: 0.875rem; color: var(--c-bronze); }
.xp-meta-row span { min-width: 0; overflow-wrap: anywhere; }
.xp-meta-row b { font-weight: 600; color: var(--c-ink-2); }

.xp-buddy-line {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--c-success-bg);
    color: var(--c-success);
    font-size: var(--t-micro);
    font-weight: 600;
    line-height: 1.4;
}
.xp-buddy-line.xp-buddy-none { background: var(--c-bg-alt); color: var(--c-muted); }
.xp-buddy-line .et-i { flex: none; font-size: 0.875rem; }

/* ---------------------------------------------------------------------------
   PRICE
   A card has one job here: let somebody decide whether this is in their
   range without opening anything. The figure is the loudest thing in the
   block, the qualifier beside it says what it buys, and the full list of
   what it covers is one tap away.
   --------------------------------------------------------------------------- */
.xp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--c-ink);
    overflow-wrap: anywhere;
}
.xp-price b { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.xp-price-from { font-size: var(--t-small); font-weight: 400; color: var(--c-muted); }
.xp-price-tag {
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--c-warn-bg);
    color: var(--c-link);
    font-size: var(--t-micro);
    font-weight: 600;
}
.xp-price-for { font-size: var(--t-small); font-weight: 400; color: var(--c-muted); }
.xp-price small {
    display: block;
    flex: 1 0 100%;
    margin-top: 2px;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--c-muted);
}

.xp-includes summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: var(--c-link);
    font-size: var(--t-small);
    cursor: pointer;
    list-style: none;
}
.xp-includes summary::-webkit-details-marker { display: none; }
.xp-includes summary::after {
    content: "\203A";
    display: inline-block;
    font-size: 1.25em;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 200ms var(--ease);
}
.xp-includes[open] summary::after { transform: rotate(-90deg); }
.xp-includes summary:hover { text-decoration: underline; }
.xp-includes-body {
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: var(--r-sm);
    background: var(--c-bg-alt);
}
.xp-inc, .xp-exc { list-style: none; margin: 0; padding: 0; }
.xp-inc li, .xp-exc li {
    position: relative;
    padding-left: 20px;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--c-ink);
}
.xp-inc li::before {
    content: ""; position: absolute; left: 0; top: 0.4em; width: 13px; height: 13px;
    background: var(--c-gold);
    -webkit-mask: var(--et-i-check) center / contain no-repeat;
    mask: var(--et-i-check) center / contain no-repeat;
}
.xp-exc li::before { content: "\00D7"; position: absolute; left: 2px; color: var(--c-muted); font-weight: 600; }
.xp-exc-h { margin: 10px 0 2px; font-size: 0.8125rem; font-weight: 600; line-height: 1.5; color: var(--c-muted); }

/* --- the actions: one gold pill and a "Learn more" link ------------------ */
.xp-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: auto;
    padding-top: 8px;
}
.xp-more { font-size: var(--t-small); }
.xp-help-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-size: var(--t-micro);
    color: var(--c-muted);
    text-decoration: none;
}
.xp-help-link .et-i { color: var(--c-bronze); }
.xp-help-link:hover { color: var(--c-ink); text-decoration: underline; }

/* --- buttons -------------------------------------------------------------- */
.xp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.022em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
/* The booking action: gold with dark words, always. */
.xp-btn-primary { background: var(--c-gold); color: #fff; }
.xp-btn-primary:hover { background: var(--c-gold-hover); color: #fff; text-decoration: none; }
.xp-btn-outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.xp-btn-outline:hover { background: var(--c-ink); color: #fff; text-decoration: none; }
.xp-btn-block { display: flex; width: 100%; }
.xp-btn[aria-disabled="true"],
.xp-btn:disabled {
    border-color: transparent;
    background: var(--c-bg-alt-2);
    color: var(--c-muted);
    cursor: not-allowed;
}

/* --- focus ---------------------------------------------------------------- */
.xp-page :focus-visible { outline: 3px solid rgba(37, 99, 235, 0.9); outline-offset: 3px; border-radius: 8px; }
.xp-page .xp-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* --- arrival and loading --------------------------------------------------------
   Cards arrive with Sunrise (data-et-rise="soft", motion.css) and loading
   placeholders are Dawn (.et-skel). Nothing here hides a card, so a page
   without script still shows the whole list. */
.xp-skel-card { height: 420px; border-radius: var(--r-lg); }

/* --- empty state ------------------------------------------------------------ */

.xp-empty {
    grid-column: 1 / -1;
    padding: clamp(40px, 6vw, 64px) 24px;
    border-radius: var(--r-lg);
    background: var(--c-bg);
    text-align: center;
}
.xp-empty .et-i { display: block; margin: 0 auto 14px; font-size: 2rem; color: var(--c-gold); }
.xp-empty h2, .xp-empty h3 { margin-bottom: 8px; font-size: 1.3125rem; color: var(--c-ink); }
.xp-empty p { max-width: 440px; margin: 0 auto 20px; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }

/* --- in preparation ------------------------------------------------------------ */
.xp-upcoming { margin-top: clamp(40px, 5vw, 64px); }
.xp-soon-chapter .xp-upcoming { margin-top: 0; }
.xp-upcoming-head { max-width: 680px; margin: 0 auto 28px; text-align: center; }
.xp-upcoming-head h2 { font-size: var(--t-title); }
.xp-upcoming-head p { margin-top: 10px; font-size: var(--t-body); color: var(--c-muted); }
.xp-upcoming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.xp-soon {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: var(--r-md);
    background: var(--c-bg-alt);
}
.xp-soon-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--c-bg);
    color: var(--c-bronze);
    font-size: 1.25rem;
}
.xp-soon h3, .xp-soon h4 { font-size: 1.1875rem; color: var(--c-ink); }
.xp-soon p { font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); }
.xp-soon-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--c-bg);
    color: var(--c-muted);
    font-size: var(--t-micro);
    font-weight: 600;
}
.xp-soon button { align-self: flex-start; margin-top: auto; }

/* --- the close --------------------------------------------------------------- */
.xp-close { padding-top: clamp(48px, 6vw, 72px); }
.xp-close__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--r-lg);
    background: var(--c-bg-alt);
}
.xp-close__text { flex: 1 1 320px; font-size: var(--t-body); font-weight: 600; color: var(--c-ink); }
.xp-close__text span { display: block; }
.xp-close__text span + span { margin-top: 4px; font-weight: 400; color: var(--c-muted); }

/* ==========================================================================
   4. FACT PANELS (Active, Language Exchange) AND THE EXPERIENCE PAGE
   ========================================================================== */

.xp-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }

.xp-panel {
    min-width: 0;
    margin-bottom: 18px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--r-lg);
    background: var(--c-bg-alt);
}
.xp-panels .xp-panel { margin-bottom: 0; }
.xp-panel > .et-ico { margin-bottom: 18px; }
/* Panel headings are h2 or h3 by the outline of the page; one look. */
.xp-panel h2 { margin-bottom: 18px; font-size: var(--t-sub); line-height: 1.17; letter-spacing: 0.007em; color: var(--c-ink); }
.xp-panel h3 { margin: 22px 0 12px; font-size: 1.1875rem; color: var(--c-ink); }
.xp-panel .xp-disclaimer-mini { margin-top: 18px; }
.xp-panel .xp-note { margin: 18px 0 0; background: var(--c-bg); }
.xp-panel__more { margin-top: 18px; }

.xp-list { list-style: none; display: grid; gap: 10px; }
.xp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-body); line-height: 1.47; color: var(--c-ink-2); }
.xp-list li .et-i { flex: 0 0 auto; margin-top: 4px; font-size: 0.9rem; color: var(--c-gold); }
.xp-list-x li .et-i { color: var(--c-muted); }
.xp-list-x li { color: var(--c-muted); }

.xp-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; }
.xp-dl > div { padding: 14px 0; border-top: 1px solid var(--c-line-2); }
.xp-dl dt { margin-bottom: 4px; font-size: var(--t-micro); color: var(--c-muted); }
.xp-dl dd { font-size: var(--t-body); font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.xp-dl--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xp-pending { display: block; font-size: var(--t-small); font-weight: 400; line-height: 1.45; color: var(--c-muted); }


/* --- the experience page ------------------------------------------------- */
.xp-hero--detail { padding-bottom: clamp(28px, 4vw, 44px); }
.xp-hero--detail .et-crumbs { margin-bottom: 22px; font-size: var(--t-small); }
.xp-hero--detail .et-crumbs li[aria-current] { color: var(--c-ink); }
.xp-hero--detail .xp-lead { font-size: var(--t-lead); line-height: 1.38; color: var(--c-muted); }
.xp-localnav-title { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }

.xp-page--detail { padding-bottom: var(--sp-chapter); }
/* The first screen of an experience: the words beside the photograph. */
.xp-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 64px);
    align-items: center;
}
.xp-detail-hero .xp-title { font-size: clamp(2.1rem, 3.8vw, 3.25rem); line-height: 1.08; }
.xp-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: start;
}
.xp-detail-media {
    overflow: hidden;
    border-radius: var(--r-xl);
    aspect-ratio: 4 / 3;
    background: var(--c-bg-alt-2);
}
.xp-detail-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.xp-incx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.xp-book-panel { position: sticky; top: calc(var(--nav-h) + var(--local-h) + 20px); }
.xp-panel--book { background: var(--c-bg); box-shadow: var(--sh-3); }
.xp-panel--book h2 { font-size: 1.5rem; }
.xp-panel--book > * + * { margin-top: 14px; }
.xp-panel--book .xp-help-link { display: flex; justify-content: center; align-self: auto; }
.xp-panel--quiet h2 { font-size: 1.1875rem; }
.xp-panel--quiet .xp-list li { font-size: var(--t-small); }

/* --- Local Host strip on the experience page ------------------------------- */
.xp-buddies { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-buddy {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
    color: var(--c-ink);
    font-size: var(--t-small);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 200ms var(--ease);
}
.xp-buddy:hover { background: var(--c-bg-alt-2); color: var(--c-ink); text-decoration: none; }
.xp-buddy img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.xp-buddy .xp-buddy-fallback {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--c-espresso); color: #fff; font-size: 0.95rem;
}
.xp-buddy small { display: block; font-size: var(--t-micro); font-weight: 400; color: var(--c-muted); }

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

/* A card left alone on the last row becomes one wide feature card, the
   photograph beside the words, instead of a single card and an empty row.
   The photograph fills its half at the row's height, whatever its shape. */
.xp-grid--catalogue > .xp-item:last-child .xp-item-media img { position: absolute; inset: 0; }
@media (min-width: 1069px) {
    .xp-grid--catalogue > .xp-item:last-child:nth-child(3n + 1) { grid-column: 1 / -1; flex-direction: row; }
    .xp-grid--catalogue > .xp-item:last-child:nth-child(3n + 1) .xp-item-media { flex: 0 0 50%; aspect-ratio: auto; min-height: 360px; }
    .xp-grid--catalogue > .xp-item:last-child:nth-child(3n + 1) .xp-item-body { justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
}
@media (min-width: 735px) and (max-width: 1068px) {
    .xp-grid--catalogue > .xp-item:last-child:nth-child(2n + 1) { grid-column: 1 / -1; flex-direction: row; }
    .xp-grid--catalogue > .xp-item:last-child:nth-child(2n + 1) .xp-item-media { flex: 0 0 50%; aspect-ratio: auto; min-height: 360px; }
    .xp-grid--catalogue > .xp-item:last-child:nth-child(2n + 1) .xp-item-body { justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
}

@media (max-width: 1068px) {
    .xp-grid.xp-grid--catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xp-detail-grid, .xp-detail-hero { grid-template-columns: minmax(0, 1fr); }
    .xp-book-panel { position: static; }
}

/* A sand chapter never runs straight into the sand footer. */
.xp-page > .ap-chapter--sand:last-child { border-bottom: 1px solid var(--c-line-2); }

@media (max-width: 834px) {
    .xp-panels { grid-template-columns: minmax(0, 1fr); }
    .xp-cover { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
}

@media (max-width: 734px) {
    /* The catalogue is one sideways row: a card and a glimpse of the next,
       snapping card by card. position:relative keeps the cards' screen-
       reader labels inside the scroller, so the page never widens. */
    .xp-grid.xp-grid--catalogue {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        position: relative;
        gap: 12px;
        margin-inline: calc(var(--pad) * -1);
        padding: 4px var(--pad) 14px;
    }
    .xp-grid.xp-grid--catalogue > * { flex: none; width: auto; min-width: 0; scroll-snap-align: none; grid-column: auto; }
    .xp-grid.xp-grid--catalogue::-webkit-scrollbar { display: none; }
    .xp-grid--catalogue > .xp-item { scroll-snap-align: start; }
    .xp-grid.xp-grid--catalogue:has(> .xp-empty) { display: block; margin-inline: 0; padding: 0; }
    .xp-item-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .xp-meta-row span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .xp-item-body { gap: 10px; padding: 18px; }
    .xp-item-title { font-size: 1.1875rem; }
    .xp-price b { font-size: 1.5rem; }
    .xp-item-actions .xp-btn-primary { flex: 1 1 100%; }

    .xp-hero { padding: 28px 0 24px; }
    .xp-hero__copy, .xp-upcoming-head { text-align: left; }
    .xp-hero__copy .xp-title,
    .xp-lead, .xp-sub { margin-left: 0; margin-right: 0; }
    .xp-lead { margin-top: 14px; }
    .xp-cover { aspect-ratio: 16 / 10; margin: 24px calc(var(--pad) * -1 + 8px) 0; }
    .xp-hero__notes { margin-top: 18px; }
    .xp-seg { display: flex; width: 100%; margin-top: 20px; }
    .xp-seg a { flex: 1 1 0; justify-content: center; padding-inline: 8px; }
    /* Small doors sit two to a row. */
    .xp-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
    .xp-jump-btn { justify-content: flex-start; padding: 10px 14px; }
    .xp-catalogue__head { margin-bottom: 16px; }

    /* Fact panels: short items two to a row, the formats as a 2 x 3 grid. */
    .xp-panel { padding: 20px 18px; }
    .xp-panel h2 { margin-bottom: 12px; }
    .xp-panel .xp-list { gap: 8px; }
    .xp-panel .xp-list li { font-size: var(--t-small); line-height: 1.45; }
    .xp-list--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
    .xp-list--pairs li { font-size: var(--t-small); }
    .xp-dl, .xp-dl--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
    .xp-dl > div { padding: 10px 0; }
    .xp-dl dd { font-size: var(--t-small); }
    .xp-pending { font-size: var(--t-micro); }
    .xp-incx { grid-template-columns: minmax(0, 1fr); }
    .xp-upcoming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .xp-soon { padding: 16px; gap: 8px; }
    .xp-soon h3 { font-size: 1rem; }
    .xp-soon p { font-size: var(--t-micro); }
    .xp-close__card { flex-direction: column; align-items: flex-start; }
    .xp-close__text { flex-basis: auto; }
    .xp-localnav-title { max-width: 52vw; font-size: 1.0625rem; }
    /* On a phone the trail is just the way back; the local bar names the page. */
    .xp-hero--detail .et-crumbs li[aria-current] { display: none; }
}

/* --- reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .xp-item, .xp-jump-btn, .xp-btn, .xp-buddy, .xp-seg a { transition: none !important; }
    .xp-grid.xp-grid--catalogue { scroll-behavior: auto; }
}

/* --- print -------------------------------------------------------------------- */
@media print {
    .xp-jump, .xp-seg, .xp-item-actions { display: none; }
}

/* ==========================================================================
   Experience requests, the experience-first form, matches and quote.
   Uses the existing tokens, buttons and card shapes; no new design language.
   ========================================================================== */
.xr-card { min-width: 0; margin-bottom: 22px; }
.xr-card legend, .xr-card h2 {
    font-size: 1.05rem; font-weight: 600; color: var(--ink);
    max-width: 100%; margin-bottom: 14px; padding: 0 4px;
    display: flex; align-items: center; gap: 9px; line-height: 1.3;
}
.xr-card legend i, .xr-card h2 i { flex: none; color: var(--orange); line-height: 1; }

.xr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.xr-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.xr-field > span {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
    line-height: 1.35; text-transform: uppercase; color: var(--muted);
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px;
}
.xr-field > span b { color: var(--orange); line-height: 1; }
.xr-field input, .xr-field select, .xr-field textarea {
    display: block; width: 100%; min-width: 0; padding: 11px 13px;
    min-height: 44px; border: 1.5px solid var(--line);
    border-radius: 12px; font-family: inherit; font-size: 0.92rem;
    line-height: 1.35; color: var(--ink); background-color: #fff;
}
.xr-field select {
    -webkit-appearance: none; appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'%3E%3Cpath fill='none' stroke='%23a57a35' stroke-width='1.6' stroke-linecap='butt' stroke-linejoin='round' d='M1.2 1.6 6 6.4l4.8-4.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.xr-field textarea { resize: vertical; }
.xr-field input[type="checkbox"] { min-height: 0; width: 20px; height: 20px; }
.xr-field small { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.xr-field.xr-wide { grid-column: 1 / -1; }
.xr-lock { color: var(--muted); font-size: 0.7rem; margin-left: 0; line-height: 1; }
.xr-error { display: block; font-size: 0.8rem; color: #d0342c; font-style: normal; font-weight: 600; }
.xr-form-error {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    background: #fdecea; color: #a5281b; font-weight: 600; font-size: 0.9rem;
}
.xr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }

.xr-summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.xr-summary dt { font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
                 letter-spacing: 0.05em; color: var(--muted); }
.xr-summary dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 0.92rem; }

.xr-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
              gap: 14px; margin-bottom: 16px; }
.xr-match {
    display: flex; gap: 11px; padding: 14px; border: 1.5px solid var(--line);
    border-radius: 16px; background: #fff; cursor: pointer;
}
.xr-match:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20, 20, 25,.12); }
.xr-match-busy { opacity: .55; cursor: not-allowed; }
.xr-match-body { display: flex; flex-direction: column; gap: 3px; }
.xr-match-meta { font-size: 0.8rem; color: var(--muted); }
.xr-why { font-size: 0.78rem; color: var(--blue); font-weight: 600; }
.xr-match-price { font-weight: 600; color: var(--ink); margin-top: 4px; }
.xr-match-avail { font-size: 0.76rem; color: var(--muted); }
.xr-team { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 600; }
.xr-empty { color: var(--muted); font-size: 0.9rem; }

.xr-assignment { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.xr-assignment:last-child { border-bottom: 0; }
.xr-state { font-size: 0.78rem; color: var(--muted); }

.xr-quote-table { width: 100%; border-collapse: collapse; }
.xr-quote-table th { text-align: left; font-weight: 600; color: var(--ink);
                     padding: 9px 0; font-size: 0.9rem; }
.xr-quote-table td { text-align: right; padding: 9px 0; font-weight: 600; color: var(--ink); }
.xr-quote-total th, .xr-quote-total td {
    border-top: 2px solid var(--line); padding-top: 13px; font-weight: 600; font-size: 1rem;
}
.xr-quote-note { font-size: 0.84rem; color: var(--muted); margin-top: 10px; line-height: 1.6; }

@media (max-width: 700px) {
    .xr-grid { grid-template-columns: 1fr; }
    .xr-card legend, .xr-card h2 { font-size: 0.98rem; }
    .xr-actions .pg-btn { flex: 1 1 100%; }
}