/*
Theme Name: Evenue Rail
Description: A lateral filmstrip. The front page travels sideways through full-height frames on a fixed dark stage — wheel input is remapped to lateral travel, frames snap into place, a hairline progress bar and a 01/07 counter stand in for the scrollbar. Detail and listing pages deliberately release the stage and read as vertical documents. Port of the legacy evenue-rail design exploration onto the v2 starter structure.
Version: 0.5.1
Requires PHP: 8.1
Author: Evenue
Text Domain: evenue-rail
Contract: 2.12.0
*/

/* Colors and fonts ride the --evenue-* tokens: page-bg = the stage (near
   black), surface-bg = the raised plate ground, heading-text = bone,
   brand = the single ember accent. Rectilinear by design: media gets 2px,
   pill controls 999px, and every rule is a 1px hairline — no box borders. */

:root {
    --stage: var(--evenue-page-bg);
    --stage-raised: var(--evenue-surface-bg);
    --stage-deep: color-mix(in srgb, var(--evenue-page-bg) 62%, #000);
    --bone: var(--evenue-heading-text);
    --bone-dim: var(--evenue-body-text);
    --bone-faint: var(--evenue-muted-text);
    --ember: var(--evenue-brand);
    --ember-deep: color-mix(in srgb, var(--evenue-brand) 76%, #000);
    --rule: color-mix(in srgb, var(--evenue-heading-text) 14%, transparent);
    --rule-strong: color-mix(in srgb, var(--evenue-heading-text) 32%, transparent);
    /* The chrome's fades were drawn for a dark stage; on a site with light
       tokens they became white veils over the frames. Thinner now. */
    --scrim: color-mix(in srgb, var(--evenue-page-bg) 68%, transparent);

    --font-display: var(--evenue-heading-font);
    --font-ui: var(--evenue-body-font);

    --t-label: 0.6875rem;
    --t-meta: 0.8125rem;
    --t-body: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
    --t-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    --t-title: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
    --t-hero: clamp(3rem, 1.2rem + 7.2vw, 9rem);

    --track-label: 0.22em;
    --track-tight: var(--evenue-heading-letter-spacing);
    --lh-display: var(--evenue-heading-line-height);
    --lh-body: var(--evenue-body-line-height);

    --radius-media: var(--evenue-image-radius);
    --radius-card: var(--evenue-container-radius);
    --radius-ui: 999px;
    --hair: 1px;
    --card-shadow: var(--evenue-card-shadow);

    /* The fixed top chrome's height: its padding around a 40px wordmark. */
    --chrome-h: calc(2 * clamp(1.1rem, 2.2vh, 1.75rem) + 40px);
    --gutter: clamp(1.5rem, 4vw, 4.5rem);
    --frame-gap: clamp(1.5rem, 3vw, 3.5rem);
    --rail-pad-block: clamp(5.5rem, 9vh, 8rem);

    --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 220ms;
    --t-base: 420ms;
    --t-slow: 800ms;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--stage);
    color: var(--bone-dim);
    font-family: var(--font-ui);
    font-size: var(--t-body);
    letter-spacing: var(--evenue-body-letter-spacing);
    line-height: var(--lh-body);
}

/* The stage is fixed only while the rail is the page. */
body.is-rail { overflow: hidden; }
body.is-document { overflow-y: auto; }

::selection { background: var(--ember); color: var(--stage-deep); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: var(--track-tight);
    color: var(--bone);
    margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: fixed;
    top: 0.75rem; left: 0.75rem;
    z-index: 100;
    transform: translateY(-300%);
    background: var(--bone);
    color: var(--stage);
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-ui);
    font-size: var(--t-meta);
    transition: transform var(--t-fast) var(--ease-cine);
}
.skip-link:focus { transform: none; }

/* The label system: ember ordinal · tracked word · trailing hairline. */
.label {
    display: flex;
    flex-wrap: wrap; /* on a 320px screen the nowrap link moves under the label instead of widening the page */
    align-items: center;
    gap: 0.75rem;
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone-faint);
}
.label__index { color: var(--ember); font-variant-numeric: tabular-nums; }
.label__rule { flex: 1 1 auto; height: var(--hair); background: var(--rule); }
.label__link { color: var(--ember); white-space: nowrap; }
.label__link:hover, .label__link:focus-visible { color: var(--bone); }

/* Buttons: pills, sweeping ember fill, magnetic lean via --mx/--my. */
.btn, .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: var(--evenue-button-padding-y) var(--evenue-button-padding-x);
    border: var(--evenue-button-border-width) solid var(--evenue-button-border-color);
    border-radius: var(--radius-ui); /* labeled identity: "pill controls 999px" in the header above */
    background: var(--evenue-button-bg);
    color: var(--evenue-button-text);
    font-family: var(--font-ui);
    font-size: var(--evenue-button-font-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: color var(--t-base) var(--ease-cine), transform var(--t-base) var(--ease-cine);
}
.btn::before, .button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--evenue-button-bg-hover);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--ease-cine);
}
.btn:hover, .btn:focus-visible, .button:hover, .button:focus-visible { color: var(--evenue-button-text-hover); }
.btn:hover::before, .btn:focus-visible::before, .button:hover::before, .button:focus-visible::before { transform: scaleX(1); }
.btn:active, .button:active { background: var(--evenue-button-bg-active); }
.btn--ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.btn__arrow { transition: transform var(--t-base) var(--ease-cine); }
.btn:hover .btn__arrow { transform: translateX(0.35rem); }

/* ---------- chrome (fixed, outside the rail) ---------- */

.chrome {
    position: fixed;
    left: 0; right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--gutter);
    color: var(--bone);
}
.chrome--top { top: 0; justify-content: space-between; padding: clamp(1.1rem, 2.2vh, 1.75rem) var(--gutter); }
.chrome--top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, var(--scrim), transparent);
}
.wordmark {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    font-weight: 600;
    letter-spacing: var(--track-tight);
    line-height: 1;
    color: var(--bone);
}
.wordmark img { height: 40px; width: auto; }
/* A fixed row: with a word instead of a logo the chrome keeps the same height. */
.chrome--top { min-height: var(--chrome-h); }
/* #units, #amenities and the results anchor land under the chrome, not behind it. */
.doc [id], .listing[id], .listing [id] { scroll-margin-top: calc(var(--chrome-h) + 1rem); }
.nav-rail { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav-rail__link {
    position: relative;
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    padding-bottom: 0.2rem;
    color: var(--bone);
}
.nav-rail__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--hair);
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--t-base) var(--ease-cine);
}
.nav-rail__link:hover::after, .nav-rail__link:focus-visible::after,
.nav-rail__link[aria-current]::after { transform: scaleX(1); transform-origin: left center; }
.nav-rail__link--book { color: var(--ember); }
.lang-switcher { display: inline-flex; gap: 0.6rem; }
.lang { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.12em; color: var(--bone-faint); }
.lang.current { color: var(--ember); }
a.lang:hover { color: var(--bone); }

/* 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-fast) var(--ease-cine); }
.lang-switcher--menu[open] > summary::after { transform: rotate(-90deg); }
.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--stage-raised);
    border-radius: var(--radius-card);
    box-shadow: inset 0 0 0 1px var(--rule), var(--card-shadow);
}
.lang-menu .lang { text-align: right; }

.chrome--bottom {
    bottom: 0;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1rem, 2.2vh, 1.6rem) var(--gutter);
}
.chrome--bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, var(--scrim), transparent);
}
body.is-document .chrome--bottom { display: none; }
.counter {
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.progress { position: relative; flex: 1 1 auto; height: 1px; background: var(--rule); }
.progress__fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--progress, 0%);
    background: var(--bone);
}
.rail-step {
    flex: 0 0 auto;
    width: 2.25rem; height: 2.25rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--bone);
    border: 0;
    border-radius: var(--radius-ui);
    box-shadow: inset 0 0 0 1px var(--rule);
    font-size: 0.9rem;
    cursor: pointer;
    transition: box-shadow var(--t-fast) var(--ease-cine), color var(--t-fast) var(--ease-cine);
}
.rail-step:hover { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.hint {
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone-faint);
    white-space: nowrap;
}
/* The hint describes the wheel remap, which only exists with JS. */
.js .hint { display: flex; }
@media (prefers-reduced-motion: no-preference) {
    .hint__arrow { animation: nudge 2.6s var(--ease-inout) infinite; }
    @keyframes nudge { 0%, 62%, 100% { transform: translateX(0); } 76% { transform: translateX(0.35rem); } }
}
/* A strip that fits the viewport has nowhere to travel. */
.chrome--bottom.is-static .progress,
.chrome--bottom.is-static .hint,
.chrome--bottom.is-static .rail-step { display: none; }

/* ---------- the rail ---------- */

.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}
.stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to right, var(--stage-deep), transparent 7%, transparent 93%, var(--stage-deep));
    opacity: 0.55;
}
.rail {
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--frame-gap);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    /* No snapping on a pointer: the frames are wide, and a strip that pulls
       itself back to a frame's centre whenever the hand stops short of one
       reads as the page jumping. Touch keeps its deck (below). */
    scroll-snap-type: none;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.frame {
    flex: 0 0 auto;
    height: 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--rail-pad-block);
    min-height: 0;
}
.frame--intro { width: min(84vw, 1100px); }
.frame--media { width: min(58vw, 780px); }
.frame--index { width: min(88vw, 1240px); }
.frame--end   { width: min(64vw, 860px); }

@media (prefers-reduced-motion: no-preference) {
    .js .frame {
        opacity: 0.25;
        transform: translate3d(0, 1.5rem, 0);
        transition: opacity var(--t-slow) var(--ease-cine), transform var(--t-slow) var(--ease-cine);
    }
    .js .frame.is-live { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- frames ---------- */

.intro { display: grid; gap: clamp(1.5rem, 4vh, 2.75rem); align-content: center; }
.intro__title {
    font-size: var(--t-hero);
    font-weight: 300;
    line-height: calc(var(--lh-display) * 0.92);
    max-width: 16ch;
}
.intro__lead {
    font-size: var(--t-lead);
    font-weight: 300;
    line-height: calc(var(--lh-body) * 0.94);
    max-width: 42ch;
    color: var(--bone-dim);
}
.intro__links { border-top: 0; padding-top: 0; }

/* The plate: a full-height slab, and it IS the link. */
.plate {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--stage-raised);
}
.plate__media { position: absolute; inset: 0; }
.plate__img {
    width: 100%; height: 100%;
    object-fit: cover;
    scale: 1.06;
    filter: saturate(0.92) contrast(1.04);
    transition: scale var(--t-slow) var(--ease-cine), filter var(--t-base) var(--ease-cine);
}
.plate__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--stage-deep) 72%, transparent) 0%,
        color-mix(in srgb, var(--stage-deep) 30%, transparent) 34%,
        color-mix(in srgb, var(--stage-deep) 8%, transparent) 62%,
        color-mix(in srgb, var(--stage-deep) 20%, transparent) 100%
    );
    transition: opacity var(--t-base) var(--ease-cine);
}
.plate__cue {
    position: absolute;
    top: clamp(1rem, 2.5vw, 1.75rem);
    right: clamp(1rem, 2.5vw, 1.75rem);
    width: 2.75rem; height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--stage) 42%, transparent);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px var(--rule-strong);
    color: var(--bone);
    opacity: 0;
    transform: scale(0.82) rotate(-12deg);
    transition: opacity var(--t-fast) var(--ease-cine), transform var(--t-base) var(--ease-cine);
}
.plate__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: grid;
    gap: 0.75rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
}
.plate__place {
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone);
    opacity: 0.8;
}
.plate__title {
    position: relative;
    align-self: start;
    font-family: var(--font-display);
    font-size: var(--t-title);
    font-weight: 300;
    letter-spacing: var(--track-tight);
    line-height: calc(var(--lh-display) * 1.02);
    color: var(--bone);
    max-width: 14ch;
    padding-bottom: 0.35rem;
}
.plate__title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--ember);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--ease-cine);
}
.plate__excerpt {
    font-size: var(--t-meta);
    line-height: 1.5;
    color: var(--bone-dim);
    max-width: 34ch;
    opacity: 0;
    max-height: 0;
    transform: translateY(0.5rem);
    overflow: hidden;
    transition: opacity var(--t-base) var(--ease-cine), transform var(--t-base) var(--ease-cine), max-height var(--t-base) var(--ease-cine);
}
@media (hover: hover) and (pointer: fine) {
    .plate:hover .plate__img { scale: 1.12; filter: saturate(1.04) contrast(1.06); }
    .plate:hover .plate__scrim { opacity: 0.82; }
    .plate:hover .plate__cue { opacity: 1; transform: scale(1) rotate(0deg); }
    .plate:hover .plate__title::after { transform: scaleX(1); }
    .plate:hover .plate__excerpt { opacity: 1; max-height: 8rem; transform: translateY(0); }
}
.plate:focus-visible .plate__cue { opacity: 1; transform: scale(1) rotate(0deg); }
.plate:focus-visible .plate__excerpt { opacity: 1; max-height: 8rem; transform: translateY(0); }
.plate:focus-visible .plate__title::after { transform: scaleX(1); }

/* ---------- the index (front-page frame AND every listing) ---------- */

.index__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--frame-gap);
    border-bottom: var(--hair) solid var(--rule);
    padding-bottom: clamp(0.75rem, 2vh, 1.25rem);
}
.index__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 300;
    letter-spacing: var(--track-tight);
    color: var(--bone);
}
.frame--index { min-height: 0; }
.frame--index .index__list {
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
}
.frame--index .index__list::-webkit-scrollbar { display: none; }
.frame--index .index__wrap { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }

.index__row {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem 1fr auto auto;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.75rem);
    padding-block: clamp(0.7rem, 1.8vh, 1.15rem);
    border-bottom: var(--hair) solid var(--rule);
    color: var(--bone-dim);
}
.index__row > * { position: relative; }
.index__row::before {
    content: "";
    position: absolute;
    inset: 0 -1rem;
    z-index: 0;
    background: var(--bone);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform var(--t-fast) var(--ease-cine);
}
.index__num {
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: var(--bone-faint);
}
.index__name {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.9vw, 1.65rem);
    font-weight: 300;
    letter-spacing: var(--track-tight);
    line-height: calc(var(--lh-display) * 1.15);
    color: var(--bone);
    transition: transform var(--t-base) var(--ease-cine);
}
.index__place {
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: var(--bone-faint);
}
.index__arrow { color: var(--evenue-icon); font-size: 1rem; opacity: 0.62; transition: transform var(--t-base) var(--ease-cine); }

.index__item:hover .index__row::before,
.index__item:focus-within .index__row::before { transform: scaleY(1); }
.index__item:hover .index__row,
.index__item:hover .index__row .index__num,
.index__item:hover .index__row .index__name,
.index__item:hover .index__row .index__place,
.index__item:hover .index__row .index__arrow,
.index__item:focus-within .index__row,
.index__item:focus-within .index__row .index__num,
.index__item:focus-within .index__row .index__name,
.index__item:focus-within .index__row .index__place,
.index__item:focus-within .index__row .index__arrow { color: var(--stage); }
.index__item:hover .index__name, .index__item:focus-within .index__name { transform: translateX(0.6rem); }
.index__item:hover .index__arrow, .index__item:focus-within .index__arrow { transform: translateX(0.4rem); }

/* The concertina: pure CSS, 0fr → 1fr, pushes the rows below it down. */
.index__preview {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-base) var(--ease-cine);
}
.index__preview-inner {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    gap: clamp(0.85rem, 2vw, 1.5rem);
    align-items: center;
    min-height: 0;
    padding-block: 0;
    transition: padding-block var(--t-base) var(--ease-cine);
}
.index__preview-img {
    width: 100%;
    height: clamp(96px, 15vh, 150px);
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    opacity: 0;
    scale: 1.04;
    transition: opacity var(--t-base) var(--ease-cine), scale var(--t-slow) var(--ease-cine);
}
.index__preview-text {
    display: grid;
    gap: 0.4rem;
    padding-right: clamp(0.5rem, 2vw, 2rem);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--t-base) var(--ease-cine), transform var(--t-base) var(--ease-cine);
}
.index__preview-meta {
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ember);
}
.index__preview-excerpt { font-size: var(--t-meta); line-height: 1.5; color: var(--bone-dim); }
.index__item:hover .index__preview,
.index__item:focus-within .index__preview { grid-template-rows: 1fr; }
.index__item:hover .index__preview-inner,
.index__item:focus-within .index__preview-inner { padding-block: clamp(0.75rem, 1.8vh, 1.25rem); }
.index__item:hover .index__preview-img,
.index__item:focus-within .index__preview-img { opacity: 1; scale: 1; }
.index__item:hover .index__preview-text,
.index__item:focus-within .index__preview-text { opacity: 1; transform: translateY(0); }
/* A pointer sweeping down the list must not open every row it crosses: the
   strip opens once the pointer has rested on a row for a moment, and then
   slowly — the rows below are being pushed down, and at the usual pace that
   shove read as a jolt. The delay and the slow pace sit on the way in alone;
   leaving is immediate, and a hover that ends inside the delay never starts
   the transition. Keyboard focus is deliberate and opens at once. */
.index__item:hover .index__preview,
.index__item:hover .index__preview-inner { transition-delay: 220ms; transition-duration: 720ms; transition-timing-function: cubic-bezier(0.33, 0, 0.18, 1); }
.index__item:hover .index__preview-img,
.index__item:hover .index__preview-text { transition-delay: 220ms; transition-duration: 620ms; transition-timing-function: cubic-bezier(0.33, 0, 0.18, 1); }
.index__item:focus-within .index__preview,
.index__item:focus-within .index__preview-inner,
.index__item:focus-within .index__preview-img,
.index__item:focus-within .index__preview-text { transition-delay: 0s; }

/* ---------- the end frame ---------- */

.end { display: grid; gap: clamp(1.25rem, 3.5vh, 2.25rem); align-content: center; }
.end__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: calc(var(--lh-display) * 1.05);
    max-width: 18ch;
}
.end__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    border-top: var(--hair) solid var(--rule);
    padding-top: clamp(1rem, 2.5vh, 1.75rem);
}
.end__colophon, .legal {
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone-faint);
}
.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; padding: 0 var(--gutter) clamp(2rem, 5vh, 3rem); }
.end .legal { justify-content: flex-start; padding: 0; }
.legal a:hover { color: var(--bone); }
.legal-note { padding: 0 var(--gutter) 0.75rem; text-align: center; font-size: var(--t-meta); color: var(--bone-faint); }
.end .legal-note { padding: 0; text-align: left; }

/* ---------- documents (singles + listings): the stage releases ---------- */

.doc { padding-bottom: clamp(5rem, 12vh, 9rem); }
.doc__hero {
    position: relative;
    height: min(72vh, 680px);
    background: var(--stage-raised);
    overflow: hidden;
}
.doc__hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.04);
}
.doc__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--stage) 2%,
        color-mix(in srgb, var(--stage) 35%, transparent) 42%,
        color-mix(in srgb, var(--stage) 55%, transparent) 100%
    );
}
.doc__inner {
    position: relative;
    z-index: 2;
    width: min(72ch, calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
    display: grid;
    /* The one track may be narrower than its content: the breadcrumb trail is
       nowrap and scrolls inside itself. With an auto track it set the
       column's width and pushed documents up to 776px wide on a phone. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 3vh, 2rem);
    padding-top: clamp(6rem, 14vh, 9rem);
}
.doc__hero + .doc__inner { margin-top: clamp(-9rem, -12vh, -5rem); padding-top: 0; }
.doc__label {
    display: flex;
    gap: 0.75rem;
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone-faint);
}
.doc__label span:first-child { color: var(--ember); }
.doc__title { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); line-height: calc(var(--lh-display) * 1.02); }
.doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
    border-top: var(--hair) solid var(--rule);
    padding-top: clamp(1rem, 2.5vh, 1.5rem);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bone-faint);
}
.doc__meta b {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bone);
}
.doc__meta a { color: var(--ember); }
.doc__body {
    font-size: var(--t-lead);
    font-weight: 300;
    line-height: calc(var(--lh-body) * 1.06);
    color: var(--bone-dim);
}
.doc__body > * + * { margin-top: 1.1em; }
.doc__body h2, .doc__body h3 { font-family: var(--font-display); font-weight: 300; margin-top: 1.8em; }
.doc__body a { color: var(--evenue-link); text-decoration: underline; text-underline-offset: 0.2em; }
.doc__body ul { padding-left: 1.2em; }
.doc__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--frame-gap);
}
.doc__gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-media);
    box-shadow: var(--card-shadow);
}
.doc__section { border-top: var(--hair) solid var(--rule); padding-top: clamp(1rem, 2.5vh, 1.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } /* same as .doc__inner: the label row must not set the track's width */
.doc__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    border-top: var(--hair) solid var(--rule);
    padding-top: clamp(1.25rem, 3vh, 2rem);
}

/* The amenity ledger: same hairline grammar as the index. */
.ledger { display: grid; }
.ledger__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.6rem;
    border-bottom: var(--hair) solid var(--rule);
    font-size: var(--t-meta);
}
.ledger__name { color: var(--bone); }
a.ledger__name:hover { color: var(--ember); }
.ledger__note { color: var(--bone-faint); text-align: right; }

/* ---------- breadcrumbs: the trail leads every document and listing ---------- */

/* The chrome is a fixed gradient scrim, not a solid header, so the trail
   does not stick under it: it opens the document column and the listing
   head instead, one line in the label voice, scrollable on phones. */
.breadcrumbs {
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone-faint);
}
.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(--ember); }
.breadcrumbs a { color: var(--bone-faint); transition: color var(--t-fast) var(--ease-cine); }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--bone); }
.breadcrumbs [aria-current] { color: var(--bone); }
.listing .breadcrumbs { padding-bottom: clamp(0.75rem, 2vh, 1.25rem); }

/* ---------- listings ---------- */

.listing {
    width: min(1240px, calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
    padding-top: clamp(6rem, 14vh, 9rem);
    padding-bottom: clamp(5rem, 12vh, 9rem);
}
.listing__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--frame-gap);
    border-bottom: var(--hair) solid var(--rule);
    padding-bottom: clamp(0.75rem, 2vh, 1.25rem);
}
.listing__title { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.listing__count {
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    font-variant-numeric: tabular-nums;
    color: var(--bone-faint);
}
.listing__empty { padding-top: clamp(1.5rem, 4vh, 2.5rem); color: var(--bone-faint); }
/* A scoped listing names its scope under the head, with the way back out. */
.listing__scope {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding-top: clamp(0.75rem, 2vh, 1.25rem);
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone-faint);
}
.listing__scope b { font-family: var(--font-display); font-size: clamp(1.1rem, 1.9vw, 1.65rem); font-weight: 300; letter-spacing: var(--track-tight); text-transform: none; color: var(--bone); }
.listing__scope a { color: var(--ember); }
.listing__scope a:hover, .listing__scope a:focus-visible { color: var(--bone); }
.listing .doc__foot { margin-top: clamp(2rem, 5vh, 3rem); }

/* Pager: the label voice under the rows — tracked steps, tabular position. */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--frame-gap);
    padding-top: clamp(1rem, 2.5vh, 1.5rem);
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone-faint);
}
.pager__step { display: inline-block; padding-block: 0.75rem; color: var(--bone); transition: color var(--t-fast) var(--ease-cine); }
a.pager__step:hover, a.pager__step:focus-visible { color: var(--ember); }
.pager__step[aria-hidden] { color: var(--bone-faint); opacity: 0.45; }
.pager__position { font-variant-numeric: tabular-nums; }

/* The frame shows the first rows; the last row leads to the rest. */
.index__more {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-block: clamp(0.7rem, 1.8vh, 1.15rem);
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ember);
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
    .rail { scroll-snap-type: x mandatory; gap: 1rem; padding-inline: 1rem; }
    .frame--intro, .frame--media, .frame--index, .frame--end { width: calc(100vw - 2rem); }
    .hint { display: none !important; }
    .index__row { grid-template-columns: 2.25rem 1fr auto; }
    .index__place { display: none; }
    .nav-rail { gap: 0.9rem; flex-wrap: wrap; row-gap: 0.4rem; }
    .nav-rail__link { letter-spacing: 0.12em; }
    /* Phone: the chrome needs ~600px in one line; wrap it and push the pages down. */
    .chrome--top { flex-wrap: wrap; row-gap: 0.6rem; }
    .listing, .doc__hero { padding-top: clamp(9rem, 20vh, 11rem); }
}
/* Touch: no hover, so the concertina and the plate copy stay open. */
@media (hover: none) {
    .plate__excerpt { opacity: 1; max-height: 8rem; transform: none; }
    .plate__cue { opacity: 1; transform: none; }
    .index__preview { grid-template-rows: 1fr; }
    .index__preview-inner { padding-block: clamp(0.75rem, 1.8vh, 1.25rem); }
    .index__preview-img, .index__preview-text { opacity: 1; transform: none; scale: 1; }
}
@media (max-height: 520px) {
    :root { --rail-pad-block: 3.5rem; }
}

/* In-page jumps on documents glide instead of cutting — the rail's own
   travel is the JS's business. Motion is a preference. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Reduced motion: keep every reveal, drop only the travel. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
    .plate__excerpt { opacity: 1; max-height: 8rem; transform: none; }
    .plate__cue { opacity: 1; transform: none; }
    .plate__img { scale: 1; }
    .index__name, .index__arrow, .btn, .button { transform: none !important; }
    .index__preview { grid-template-rows: 1fr; }
    .index__preview-inner { padding-block: clamp(0.75rem, 1.8vh, 1.25rem); }
    .index__preview-img, .index__preview-text { opacity: 1; transform: none; scale: 1; }
}

/* ---------- AI image label (contract 2.11.0) ---------- */

/* 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; }

/* An image the plugin flags as AI-generated carries one caption line in the
   label voice. Muted text stays out of it: on several customer palettes the
   muted token misses 4.5:1 on the page ground; body and heading text do not. */
.ai-label {
    display: block;
    font-size: var(--t-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--bone-dim);
}
/* On an image (plate, document hero) the line sits on a solid stage ground. */
.plate__body > .ai-label,
.doc__hero > .ai-label {
    padding: 0.35rem 0.6rem;
    background: var(--stage);
    color: var(--bone);
}
/* The plate's last row, bottom right. In the flow, so a label that wraps
   (fr or it on a phone) lifts the title instead of covering the excerpt. */
.plate__body > .ai-label { justify-self: end; }
/* Top right of the hero, under the fixed chrome: the document column is
   pulled up over the hero's bottom. */
.doc__hero > .ai-label {
    position: absolute;
    z-index: 1;
    top: calc(var(--chrome-h) + 0.75rem);
    right: var(--gutter);
}
/* Under the preview thumbnail, as a second row of the image column. Nothing
   else opens that row, so the tighter row gap changes no other preview. */
.index__preview-inner { row-gap: 0.5rem; }
.index__preview-inner > .ai-label { grid-column: 1; grid-row: 2; }
@media (max-width: 860px) {
    /* The wrapped chrome is taller; the hero's image starts below its padding. */
    .doc__hero > .ai-label { top: calc(clamp(9rem, 20vh, 11rem) + 0.75rem); }
}

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

.starter-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--stage-deep) 90%, 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; border-radius: var(--radius-media); }
.starter-lightbox button {
    position: absolute;
    background: none;
    border: none;
    color: var(--bone);
    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%); }
.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; }

/* 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; }

/* Gallery tiles: the picture sits in a tile, so an image the plugin flags as
   AI-generated carries its label on the tile itself, not only in the lightbox.
   The label lets clicks through to the picture, which opens the lightbox. */
.gallery-tile { position: relative; display: block; }
.gallery-tile > img { display: block; }
.gallery-tile > .ai-label { position: absolute; left: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); margin: 0; padding: 0.25rem 0.5rem; background: var(--stage); color: var(--bone); pointer-events: none; }