:root {
    --rs-paper:       #fbfaf6;
    --rs-paper-warm:  #f3ede1;
    --rs-paper-mint:  #d8ead8;
    --rs-paper-mint-soft: #ebf3ea;
    --rs-paper-blue:  #87B7CF;
    --rs-paper-blue-soft: #cee0e9;
    --rs-ink:         #1c1812;
    --rs-ink-mute:    #6b6358;
    --rs-line:        #d8cfbd;
    --rs-line-soft:   rgba(28, 24, 18, .08);
    --rs-brand:       #784356;
    --rs-gold:        #b8924a;
    --rs-cta:         #6a5732;
}

.rs-stay { background: var(--rs-paper); color: var(--rs-ink); font-family: 'Jost', system-ui, sans-serif; line-height: 1.55; }
.rs-stay h1, .rs-stay h2, .rs-stay h3, .rs-stay h4 { margin: 0; }

/* HEADER OVERRIDE — force burgundy on this page so the white logo is visible.
   Default header is 80px tall but the centred logo is 105px tall, so the logo
   bottom overflows onto the cream. Bump to 130px + re-centre logo on /rooms. */
body:has(.rs-stay) .site-header {
    background: rgba(120, 67, 86, 0.96);
    backdrop-filter: blur(10px);
    height: 130px;
}
body:has(.rs-stay) .site-logo { top: 50%; }
body:has(.rs-stay) .site-header--scrolled { height: 64px; }
body:has(.rs-stay) .site-header--scrolled .site-logo { top: 55%; }

/* PAGE TITLE STRIP ────────────────────────────── */
.rs-stay__pagetitle {
    text-align: center;
    /* Top padding clears the 130px header + leaves room above the title */
    padding: clamp(180px, 22vh, 260px) 24px clamp(48px, 6vh, 80px);
    background: var(--rs-paper);
}
/* Match the room detail page title pattern — italic Cormorant flanked by gold
   hairlines, with a tracked-caps eyebrow tag below. */
.rs-stay__pagetitle__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 48px);
    max-width: 1240px;
    margin: 0 auto;
}
.rs-stay__pagetitle__hairline {
    flex: 1 1 auto;
    max-width: clamp(80px, 18vw, 280px);
    height: 1px;
    background: var(--rs-gold);
    opacity: .9;
}
.rs-stay__pagetitle h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2.375rem, 5vw, 4.75rem);
    line-height: 1.05;
    color: var(--rs-ink);
    letter-spacing: -.005em;
    white-space: normal;
    margin: 0;
    flex: 0 0 auto;
}
.rs-stay__pagetitle__eyebrow {
    margin: clamp(18px, 2.4vh, 30px) 0 0;
    font-size: clamp(0.875rem, 1.15vw, 1.0625rem);
    letter-spacing: .45em;
    text-transform: uppercase;
    color: var(--rs-ink-mute);
    text-indent: .45em;
    font-weight: 400;
}
/* Mid tablet — shrink hairlines so long names still fit between them */
@media (max-width: 1024px) {
    .rs-stay__pagetitle__row { gap: clamp(14px, 2vw, 28px); }
    .rs-stay__pagetitle__hairline { max-width: clamp(40px, 8vw, 120px); }
    .rs-stay__pagetitle h1 { font-size: clamp(2.125rem, 5.5vw, 3.5rem); }
}
/* Phone — allow heading to wrap; keep tiny accent hairlines on either side */
@media (max-width: 720px) {
    .rs-stay__pagetitle__row { gap: 14px; }
    .rs-stay__pagetitle h1 { white-space: normal; font-size: clamp(1.875rem, 7.5vw, 2.75rem); }
    .rs-stay__pagetitle__hairline { max-width: 32px; }
}

/* HERO IMAGE ─────────────────────────────────── */
/* Maybourne pattern: starts INSET, expands to full-bleed as user scrolls.
   Uses clip-path (GPU-composited, no layout reflow) instead of animating
   width — gives a butter-smooth feel. JS writes --hero-clip in px. */
.rs-stay__heroimg {
    --hero-clip: 96px;
    width: 100%;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;
    clip-path: inset(0 var(--hero-clip) 0 var(--hero-clip));
    will-change: clip-path;
}
@media (prefers-reduced-motion: reduce) {
    .rs-stay__heroimg { clip-path: none; }
}
.rs-stay__heroimg img, .rs-stay__heroimg picture { width: 100%; height: 100%; display: block; }
.rs-stay__heroimg img { object-fit: cover; object-position: center; }
.rs-stay__heroimg__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--rs-paper-warm) 0%, #e9dfcc 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--rs-ink-mute);
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.125rem;
    padding: 24px; text-align: center;
}

/* BOOK YOUR STAY — 3-column form ──────────────── */
/* BOOK YOUR STAY — wrapper for the shared Livewire booking picker.
   Picker styles themselves come from partials/_booking-picker-styles. */
.rs-stay__book {
    background: var(--rs-paper);
    padding: clamp(36px, 5vh, 56px) clamp(24px, 4vw, 80px) clamp(24px, 3vh, 36px);
}
.rs-stay__book__inner { max-width: 1320px; margin: 0 auto; }
.rs-stay__book__head { text-align: center; margin-bottom: 0; }

/* Sticky wrapper for the picker bar — direct child of <main> so position:sticky
   persists as the user scrolls through every subsequent section.
   Transparent background + zero top padding so the picker reads as a label
   hanging from the menu's underside when docked. */
.rs-stay__book__sticky {
    position: sticky;
    top: var(--rs-sticky-top, 130px);
    z-index: 99;
    background: transparent;
    padding: 0 clamp(24px, 4vw, 80px) 0;
    pointer-events: none;
}
.rs-stay__book__sticky > * { pointer-events: auto; }
.rs-stay__book__head h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.75rem, 3vw, 2.625rem);
    color: var(--rs-ink);
    letter-spacing: -.005em;
    line-height: 1.1;
    margin: 0 0 10px;
}
.rs-stay__book__sub {
    font-family: 'Jost', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--rs-ink-mute);
    text-indent: .32em;
    margin: 0;
}
/* Card around the picker — cream paper-warm with gold border on bottom + sides
   only; flat top so it visually hangs from the menu's underside like a label.
   Shadow casts downward, reinforcing the hanging-label feel. */
.rs-stay__book__pickerwrap {
    background: var(--rs-paper-warm);
    border: 1px solid rgba(196, 160, 82, .55);
    border-radius: clamp(10px, 1vw, 14px);
    box-shadow: 0 16px 40px rgba(28, 24, 18, .12), 0 2px 6px rgba(28, 24, 18, .04);
    padding: clamp(14px, 1.6vh, 22px) clamp(20px, 2.6vw, 36px);
    transition: border-radius .2s ease, border-top-color .2s ease;
}
/* When stuck flush against the menu, flatten the top so it reads as a label
   hanging from the menu bar. Toggled by JS via .is-pinned. */
.rs-stay__book__sticky.is-pinned .rs-stay__book__pickerwrap {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Horizontal bar that mirrors the room detail page sticky bar:
   intro text | gold rule | claim (Book Direct / Best Rate) | gold rule | from-price | picker */
.rs-stay__book__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 2.5vw, 40px);
}
.rs-stay__book__intro {
    display: flex; flex-direction: column;
    gap: 4px; min-width: 0; flex: 0 0 auto;
}
.rs-stay__book__intro__name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic; font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    color: var(--rs-ink);
    line-height: 1.02;
    letter-spacing: -.005em;
    white-space: normal;
}
.rs-stay__book__intro__room {
    font-family: 'Jost', sans-serif;
    font-size: 0.8125rem; letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--rs-ink-mute);
    text-indent: .42em;
    white-space: normal;
    font-weight: 500;
}
.rs-stay__book__claim {
    display: flex; flex-direction: column;
    gap: 4px; flex: 0 0 auto;
    padding-left: clamp(14px, 1.6vw, 22px);
    border-left: 1px solid rgba(196, 160, 82, .45);
}
.rs-stay__book__claim__line {
    font-family: 'Jost', sans-serif;
    font-size: 0.8125rem; letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--rs-brand);
    font-weight: 600;
    text-indent: .38em;
    line-height: 1.05;
    white-space: normal;
}
.rs-stay__book__claim__line:nth-child(2) {
    color: var(--rs-gold);
    font-weight: 500;
}
/* Responsive cascade — drop the optional columns first as space gets tight */
@media (max-width: 980px) {
    .rs-stay__book__claim { display: none; }
}
@media (max-width: 820px) {
    /* On mobile the picker's launcher takes over (fixed at bottom of viewport),
       so we hide the inline bar entirely and show a simple prompt instead. */
    .rs-stay__book__bar { display: none; }
    .rs-stay__book__pickerwrap::after {
        content: 'Use the Reserve a Room bar at the bottom of the screen.';
        display: block;
        text-align: center;
        font-family: 'Jost', sans-serif;
        font-size: 0.6875rem; letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--rs-ink-mute);
        text-indent: .3em;
        padding: 8px 0;
    }
}

/* FILTER STRIP ──────────────────────────────── */
.rs-stay__filter {
    border-top: 1px solid var(--rs-line);
    border-bottom: 1px solid var(--rs-line);
    padding: 20px clamp(24px, 4vw, 80px);
    font-size: 0.6875rem; letter-spacing: .35em; text-transform: uppercase;
    color: var(--rs-ink-mute);
    background: var(--rs-paper);
}
.rs-stay__filter__inner {
    max-width: 1680px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
}
.rs-stay__filter__dots { letter-spacing: .15em; }
.rs-stay__filter__chip {
    appearance: none; background: transparent; cursor: pointer;
    border: 1px solid var(--rs-line);
    padding: 7px 16px; border-radius: 999px;
    font-family: 'Jost', sans-serif; font-size: 0.6875rem;
    letter-spacing: .35em; text-transform: uppercase;
    color: var(--rs-ink-mute);
    display: inline-flex; align-items: baseline; gap: 8px;
    transition: background .2s, color .2s, border-color .2s;
}
.rs-stay__filter__chip:hover { color: var(--rs-ink); border-color: var(--rs-ink-mute); }
.rs-stay__filter__chip.is-active {
    background: var(--rs-ink); color: var(--rs-paper); border-color: var(--rs-ink);
}
.rs-stay__filter__chip__count {
    font-size: 0.625rem; opacity: 0.65; letter-spacing: .15em;
}
.rs-stay__room.is-hidden { display: none; }
/* Centre the chip row */
.rs-stay__filter__inner { justify-content: center; flex-wrap: wrap; }

/* ROOM GRID — wide cards with small breathing room from edges ── */
.rs-stay__rooms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(16px, 1.6vw, 28px);
    row-gap: clamp(80px, 10vh, 120px);
    padding: clamp(60px, 9vh, 100px) clamp(60px, 8vw, 160px);
    max-width: 100%;
    width: 100%;
    margin: 0;
}
@media (max-width: 880px) {
    .rs-stay__rooms {
        grid-template-columns: 1fr;
        row-gap: clamp(60px, 8vh, 90px);
        column-gap: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.rs-stay__room { display: block; text-decoration: none; color: inherit; }
.rs-stay__room__body {
    padding: 0;
}

/* CAROUSEL ─────────────────────────────────── */
.rs-stay__carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--rs-paper-warm);
    margin-bottom: 22px;
}
.rs-stay__carousel__frames {
    position: absolute; inset: 0;
}
.rs-stay__carousel__frame {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
}
.rs-stay__carousel__frame.is-active { opacity: 1; }
.rs-stay__carousel__frame img,
.rs-stay__carousel__frame picture { width: 100%; height: 100%; }
.rs-stay__carousel__frame img { object-fit: cover; display: block; }
/* Portrait images: fit fully inside the 16:10 window with a tinted matte fill
   so the whole frame (and door, lamps, ceiling) stays visible — same approach
   as the per-room carousel on /rooms/{slug}. placeholder-image emits inline
   object-fit:cover so !important is required to win the cascade. */
.rs-stay__carousel__frame.is-portrait { background: var(--rs-paper-warm); }
.rs-stay__carousel__frame.is-portrait img { object-fit: contain !important; }

/* placeholder frame inside carousel */
.rs-stay__carousel__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--rs-paper-warm) 0%, #e9dfcc 100%);
    border: 1px dashed rgba(184, 146, 74, .45);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px;
    position: relative;
}
.rs-stay__carousel__placeholder::before {
    content: '';
    position: absolute;
    top: 16px; left: 16px; right: 16px; bottom: 16px;
    border: 1px solid rgba(184, 146, 74, .22);
    pointer-events: none;
}
.rs-stay__carousel__placeholder__icon {
    width: 36px; height: 36px;
    margin-bottom: 12px;
    color: var(--rs-gold);
    opacity: .7;
}
.rs-stay__carousel__placeholder__label {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.375rem; color: var(--rs-ink); margin-bottom: 6px;
}
.rs-stay__carousel__placeholder__hint {
    font-size: 0.5625rem; letter-spacing: .35em; text-transform: uppercase;
    color: var(--rs-ink-mute);
}

/* arrows */
.rs-stay__carousel__nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 4px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
    color: var(--rs-ink);
    z-index: 2;
    box-shadow: 0 2px 14px rgba(28, 24, 18, .08);
}
.rs-stay__carousel__nav:hover { background: white; }
.rs-stay__carousel__nav--prev { left: 14px; }
.rs-stay__carousel__nav--next { right: 14px; }
.rs-stay__carousel__nav svg { width: 16px; height: 16px; }

.rs-stay__carousel__dots {
    position: absolute;
    bottom: 12px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
    z-index: 2;
}
.rs-stay__carousel__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .8);
    cursor: pointer; padding: 0;
    transition: background .15s, transform .15s;
}
.rs-stay__carousel__dot.is-active { background: white; transform: scale(1.15); }

/* ROOM TITLE BLOCK ──────────────────────────── */
.rs-stay__room__body { padding-top: clamp(0px, 0.2vh, 3px); }
.rs-stay__room__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.375rem, 2.2vw, 2rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rs-ink);
    line-height: 1.2;
    margin: 0 0 12px;
    transition: color .2s;
}
.rs-stay__room:hover .rs-stay__room__title { color: var(--rs-brand); }
.rs-stay__room__sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    color: var(--rs-ink-mute);
    line-height: 1.55;
    margin-bottom: 6px;
}
.rs-stay__room__features {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    color: var(--rs-ink-mute);
    line-height: 1.5;
    margin-bottom: clamp(18px, 2.2vh, 26px);
    opacity: .82;
}
.rs-stay__room__features span + span::before {
    content: ' · ';
    opacity: .55;
    margin: 0 2px;
}
.rs-stay__room__find {
    position: relative;
    display: inline-block;
    overflow: hidden;
    isolation: isolate;
    font-family: 'Jost', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--rs-brand);
    padding: 13px 30px;
    border: 1px solid var(--rs-brand);
    text-decoration: none;
    transition: color .35s ease .05s, border-color .4s ease;
    background: transparent;
}
.rs-stay__room__find::before {
    content: '';
    position: absolute;
    top: -20%; bottom: -20%;
    left: -30%; right: -30%;
    background: var(--rs-brand);
    transform: skewX(-22deg) translateX(-130%);
    transform-origin: center;
    transition: transform .6s cubic-bezier(.65, 0, .25, 1);
    z-index: -1;
    will-change: transform;
}
.rs-stay__room__find__label {
    position: relative;
    z-index: 1;
}
.rs-stay__room__find:hover,
.rs-stay__room__find:focus-visible {
    color: white;
    border-color: var(--rs-brand);
}
.rs-stay__room__find:hover::before,
.rs-stay__room__find:focus-visible::before {
    transform: skewX(-22deg) translateX(0);
}
@media (prefers-reduced-motion: reduce) {
    .rs-stay__room__find::before { transition: none; }
}

/* INTRO LEDE — editorial paragraph above the booking strip,
   tight max-width and warm tone to feel like a curated welcome. */
.rs-stay__intro {
    padding: clamp(48px, 7vh, 90px) 24px 12px;
    text-align: center;
}
.rs-stay__intro__inner {
    max-width: 680px;
    margin: 0 auto;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--rs-ink, #2a2625);
    font-style: italic;
}
.rs-stay__intro__inner p { margin: 0 0 12px; }
.rs-stay__intro__inner p:last-child { margin-bottom: 0; }
.rs-stay__closing__body {
    max-width: 620px;
    margin: 0 auto 28px;
    font-size: 1.0625rem;
    color: var(--rs-ink-mute, #6b605b);
    line-height: 1.6;
}
.rs-stay__closing__body p { margin: 0 0 12px; }
.rs-stay__closing__body p:last-child { margin-bottom: 0; }

/* CLOSING STRIP ─────────────────────────────── */
.rs-stay__closing {
    text-align: center;
    padding: clamp(60px, 9vh, 110px) 24px;
    border-top: 1px solid var(--rs-line-soft);
    background: var(--rs-paper-warm);
}
.rs-stay__closing__eyebrow {
    font-size: 0.6875rem; letter-spacing: .35em; text-transform: uppercase;
    color: var(--rs-ink-mute); margin-bottom: 18px;
}
.rs-stay__closing h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 300; max-width: 720px; margin: 0 auto 30px;
}
.rs-stay__closing__cta {
    display: inline-block;
    background: var(--rs-cta); color: white;
    padding: 16px 40px;
    font-size: 0.6875rem; letter-spacing: .3em; text-transform: uppercase;
    border: 1px solid var(--rs-cta); text-decoration: none;
    transition: background .2s, color .2s;
}
.rs-stay__closing__cta:hover { background: transparent; color: var(--rs-cta); }

/* PRICE + POLICY (P1-4) ─────────────────────── */
.rs-stay__pagetitle__from {
    margin: clamp(16px, 2vh, 24px) 0 0;
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    color: var(--rs-ink);
    letter-spacing: .02em;
}
.rs-stay__pagetitle__from strong { color: var(--rs-brand); font-weight: 600; }
.rs-stay__book__policy {
    margin: 8px 0 0;
    font-family: 'Jost', sans-serif;
    font-size: 0.75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rs-ink-mute);
}
.rs-stay__room__price {
    font-family: 'Jost', sans-serif;
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    color: var(--rs-ink);
    margin: 0 0 clamp(14px, 1.8vh, 22px);
    letter-spacing: .02em;
}
.rs-stay__room__price strong { color: var(--rs-brand); font-weight: 600; }