/* ================================================================
   Split skeleton — magazine / boutique editorial page frame.
   Loaded ONLY when the template's skeleton is "split" (body.skel-split;
   see TEMPLATE_SKELETON in apps/website/services/template_tiers.py and
   docs/WEBSITE_TEMPLATES_MODERNISATION_PLAN.md §3.4). Demo template:
   Editorial.

   Frame:
   - slim menu bar: business name left, links right in small spaced
     capitals, a thin rule underneath; on phones a burger opens a
     full-height panel with large links and nested sub-pages.
   - hero cut in two on a computer: words one side, a tall edge-to-edge
     photo the other (owner's text position picks the side). Phones: photo
     first (4:3), then the words.
   - sections laid out as "spreads": numbered eyebrow (01, 02 …) + title
     in a sticky left column (~30%), content on the right (~70%); gallery
     and call-to-action run full width.
   - footer: the business name set very large, three columns, hairlines.

   Colour rules (no fixed colours): everything derives from the owner's
   --primary / --accent / --text / --bg. "Deep" bands are the primary
   forced dark, so light text always reads; small accent text is the accent
   forced dark enough for a light page (and light enough on a deep band);
   text on a primary button is black or white, whichever reads.
   oklch(from …) does the forcing; color-mix() fallbacks are declared first.

   Loaded after the template skin, so ties on specificity go to this file.
   Content is never hidden waiting for JS.
   ================================================================ */

/* ================================= */
/* 0. TOKENS                          */
/* ================================= */

.skel-split {
    --sp-paper: var(--bg, #fff);
    --sp-paper-2: color-mix(in srgb, var(--bg, #fff) 95%, var(--text, #111));
    --sp-ink: var(--text, #111);
    --sp-ink-soft: color-mix(in srgb, var(--text, #111) 76%, var(--bg, #fff));
    --sp-rule: color-mix(in srgb, var(--text, #111) 14%, transparent);
    --sp-rule-strong: color-mix(in srgb, var(--text, #111) 55%, transparent);

    --sp-deep: color-mix(in srgb, var(--primary, #2563eb) 18%, #111215);
    --sp-on-deep: #f6f4ef;
    --sp-on-deep-soft: rgba(246, 244, 239, 0.74);
    --sp-on-deep-rule: rgba(246, 244, 239, 0.18);

    --sp-accent: var(--accent, #c0392b);
    --sp-accent-ink: color-mix(in srgb, var(--accent, #c0392b) 70%, #000);
    --sp-accent-light: color-mix(in srgb, var(--accent, #c0392b) 55%, #fff);
    --sp-btn: color-mix(in srgb, var(--primary, #2563eb) 70%, #000);
    --sp-on-btn: #fff;

    --sp-nav-h: var(--nav-height, 64px);
    --sp-gutter: clamp(20px, 4vw, 56px);
    --sp-max: 1280px;
    --sp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* hero defaults — the page editor overrides any of these inline */
    --hero-text-align: left;
    --hero-align-items: center;
    --hero-justify: flex-start;
    --hero-content-width: 560px;
}
@supports (color: oklch(from red l c h)) {
    .skel-split {
        --sp-deep: oklch(from var(--primary, #2563eb) 0.22 min(c, 0.03) h);
        --sp-accent-ink: oklch(from var(--accent, #c0392b) min(l, 0.5) c h);
        --sp-accent-light: oklch(from var(--accent, #c0392b) max(l, 0.8) c h);
        --sp-btn: oklch(from var(--primary, #2563eb) min(l, 0.36) c h);
        --sp-on-btn: oklch(from var(--sp-btn) clamp(0, (0.6 - l) * 1000, 1) 0 0);
    }
}

/* Dark page (body.paper-dark — base.html sets it from the owner's
   background colour, e.g. Studio): small accent text and buttons go light
   instead of dark, and deep bands lift a little above the page so they
   still read as a band. */
.skel-split.paper-dark {
    --sp-paper-2: color-mix(in srgb, var(--bg, #111) 93%, var(--text, #fff));
    --sp-deep: color-mix(in srgb, var(--primary, #2563eb) 12%, color-mix(in srgb, var(--bg, #111) 84%, #fff));
    --sp-accent-ink: color-mix(in srgb, var(--accent, #c0392b) 60%, #fff);
    --sp-accent-light: color-mix(in srgb, var(--accent, #c0392b) 60%, #fff);
    --sp-btn: color-mix(in srgb, var(--primary, #2563eb) 70%, #fff);
    --sp-on-btn: #111;
}
@supports (color: oklch(from red l c h)) {
    .skel-split.paper-dark {
        --sp-deep: oklch(from var(--primary, #2563eb) 0.27 min(c, 0.04) h);
        --sp-accent-ink: oklch(from var(--accent, #c0392b) max(l, 0.76) c h);
        --sp-accent-light: oklch(from var(--accent, #c0392b) max(l, 0.8) c h);
        --sp-btn: oklch(from var(--primary, #2563eb) max(l, 0.66) c h);
    }
}

/* ================================= */
/* 1. PAGE + SECTION RHYTHM           */
/* ================================= */

body.skel-split {
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.skel-split main { counter-reset: sp-sec; }

.skel-split .pub-section:not(.pub-section-hero):not(.pub-page-hero) {
    padding: clamp(56px, 8vw, 112px) 0;
    border-top: 1px solid var(--sp-rule);
}
.skel-split main > .pub-section:first-child:not(.pub-section-hero),
.skel-split .pub-section-hero + .pub-section,
.skel-split .pub-page-hero + .pub-section,
.skel-split .pub-section-dark + .pub-section,
.skel-split .pub-section-accent + .pub-section,
.skel-split .pub-section[style] + .pub-section,
.skel-split .pub-section-cta_banner + .pub-section { border-top-color: transparent; }
.skel-split .pub-section:not(.pub-section-hero) > .pub-container {
    max-width: var(--sp-max);
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
}
/* skins centre their content blocks in their own narrower column (Studio:
   1100px boxes with side padding) — inside the split frame every block
   starts at the frame's left edge, so the title column lines up */
.skel-split .pub-section:not(.pub-section-hero) > .pub-container :is(.pub-about, .pub-testimonials, .pub-contact-layout, .pub-amenities-grid, .pub-text, .pub-faq, .pub-cards-grid, .pub-rooms-grid, .pub-gallery, .pub-stats, .pub-stats-grid, .pub-video-wrapper, .pub-properties-grid, .pub-trust-badges) {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.skel-split .pub-section:not(.pub-section-hero) > .pub-container :is(.pub-about, .pub-testimonials, .pub-contact-layout, .pub-amenities-grid, .pub-faq, .pub-cards-grid, .pub-rooms-grid, .pub-gallery, .pub-video-wrapper, .pub-properties-grid) { max-width: none; }
/* the book-now strip stays a slim band */
.skel-split .pub-section.pub-section-book_now { padding: clamp(24px, 3vw, 36px) 0; background: var(--sp-paper-2) !important; }

/* section colours come from the owner's palette — skins paint some of
   these with fixed light greys, which hid light text on dark palettes */
body.skel-split .pub-section.pub-section-alt:not(.pub-section-cta_banner) { background: var(--sp-paper-2) !important; }
/* plain sections are page colour: skins paint fixed-colour gradients per
   section type (Studio), which broke the rhythm and hid text on other
   palettes. Owner choices (alt / dark / accent / custom / gradient /
   photo) keep their own rules below. */
body.skel-split .pub-section:not(.pub-section-hero):not(.pub-page-hero):not(.pub-section-alt):not(.pub-section-dark):not(.pub-section-accent):not([style]):not(.pub-section-cta_banner):not(.pub-section-book_now):not(.pub-cta) { background: var(--sp-paper); }
body.skel-split .pub-section:is(.pub-section-rooms_list, .pub-section-amenities):not(.pub-section-hero):not(.pub-page-hero):not(.pub-section-alt):not(.pub-section-dark):not(.pub-section-accent):not([style]):not(.pub-section-cta_banner):not(.pub-section-book_now) { background: var(--sp-paper-2); }
body.skel-split .pub-book-now-inner { background: var(--sp-paper) !important; color: var(--sp-ink); border-color: var(--sp-rule) !important; }
body.skel-split .pub-book-now-inner :is(h2, h3) { color: var(--sp-ink) !important; }
body.skel-split .pub-book-now-inner :is(p, label) { color: var(--sp-ink-soft) !important; }
body.skel-split .pub-book-now-inner :is(input, select) { background: var(--sp-paper) !important; color: var(--sp-ink) !important; border-color: var(--sp-rule-strong) !important; color-scheme: light dark; }
.skel-split .pub-section.pub-section-dark { background: var(--sp-deep) !important; color: var(--sp-on-deep); }
.skel-split .pub-section.pub-section-accent { background: var(--sp-accent) !important; }
.skel-split .pub-section.pub-section-dark :is(h1, h2, h3, h4, .pub-card-title, .sp-room__name) { color: var(--sp-on-deep) !important; }
.skel-split .pub-section.pub-section-dark :is(p, li, .pub-section-subtitle, .rich-content, .sp-room__desc) { color: var(--sp-on-deep-soft); }
.skel-split .pub-section.pub-section-dark .pub-section-tag { color: var(--sp-accent-light) !important; }
.skel-split .pub-section.pub-section-dark { --sp-accent-ink: var(--sp-accent-light); --sp-rule: var(--sp-on-deep-rule); --sp-ink: var(--sp-on-deep); --sp-ink-soft: var(--sp-on-deep-soft); --sp-rule-strong: rgba(246, 244, 239, 0.5); }
/* accent band: black or white text, whichever reads on the accent */
.skel-split .pub-section.pub-section-accent { --sp-on-acc: #fff; }
@supports (color: oklch(from red l c h)) {
    .skel-split .pub-section.pub-section-accent { --sp-on-acc: oklch(from var(--accent, #c0392b) clamp(0, (0.58 - l) * 1000, 1) 0 0); }
    /* Accents just either side of the cut-off (e.g. #e11d48, 4.47:1 with
       black) read below 4.5:1 with either text colour. The band nudges its
       lightness out of that narrow zone: black-text accents to at least
       0.61, white-text accents to at most 0.545 — checked over the whole sRGB
       range to give 4.5:1 or more. Accents outside the zone don't change. */
    .skel-split .pub-section.pub-section-accent {
        --sp-acc-band: oklch(from var(--accent, #c0392b) calc(l + (1 - clamp(0, (0.58 - l) * 1000, 1)) * max(0, 0.61 - l) - clamp(0, (0.58 - l) * 1000, 1) * max(0, l - 0.545)) c h);
        background: var(--sp-acc-band) !important;
    }
}
.skel-split .pub-section.pub-section-accent,
.skel-split .pub-section.pub-section-accent :is(h1, h2, h3, h4, p, li, .pub-section-subtitle, .pub-section-tag, .rich-content, .sp-room__name, .sp-room__desc, .sp-room__price, .sp-room__num, .pub-card-title) { color: var(--sp-on-acc) !important; }
.skel-split .pub-section.pub-section-accent { --sp-rule: color-mix(in srgb, var(--sp-on-acc) 22%, transparent); --sp-rule-strong: color-mix(in srgb, var(--sp-on-acc) 60%, transparent); --sp-ink: var(--sp-on-acc); --sp-ink-soft: var(--sp-on-acc); }
.skel-split .pub-section.pub-section-accent .pub-section-tag::after { background: currentColor; }
/* custom colour / gradient / photo backgrounds: owner's "light text" switch */
.skel-split .pub-section.pub-section-light-text :is(h1, h2, h3, h4, p, li, .pub-section-subtitle, .pub-section-tag, .rich-content) { color: #fff !important; }
.skel-split .pub-section-bg-image > .pub-container { position: relative; z-index: 1; }
.skel-split .pub-section.pub-section-light-text,
.skel-split .pub-section.pub-section-bg-image { --sp-ink: #fff; --sp-ink-soft: rgba(255, 255, 255, 0.84); --sp-rule: rgba(255, 255, 255, 0.22); --sp-rule-strong: rgba(255, 255, 255, 0.6); --sp-accent-ink: #fff; }
/* skin drop caps follow the text colour on any band */
.skel-split .pub-section .pub-about-body::first-letter,
.skel-split .pub-section-text_block .pub-container p:first-of-type::first-letter { color: var(--sp-ink); }
.skel-split .pub-section.pub-section-bg-image :is(h2, h3, p, .rich-content, .pub-section-tag) { color: #fff !important; }

/* ================================= */
/* 2. TYPE: EYEBROWS, TITLES          */
/* ================================= */

.skel-split .pub-section h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.08;
    text-transform: none;
    color: var(--sp-ink);
    margin: 0 0 18px;
    text-wrap: balance;
}
.skel-split .pub-section h2::after { display: none !important; }
.skel-split .pub-section h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: -0.005em;
    text-transform: none;
}
.skel-split .pub-section-tag {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sp-accent-ink);
    margin: 0 0 22px;
}
/* the running number: 01, 02 … (a CSS counter, so hidden sections never
   leave a gap in the numbering) */
.skel-split .sp-eyebrow::before,
.skel-split .pub-section > .pub-container > .pub-reveal:first-child > .pub-section-tag::before {
    counter-increment: sp-sec;
    content: counter(sp-sec, decimal-leading-zero);
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--sp-ink);
    /* skins draw their own marker here (Black & White: a violet square) */
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    flex-shrink: 0;
}
body.skel-split .pub-section .pub-section-tag::before { width: auto; height: auto; background: none; border-radius: 0; }
.skel-split .sp-eyebrow::after,
.skel-split .pub-section > .pub-container > .pub-reveal:first-child > .pub-section-tag::after {
    content: '';
    order: -0;
    flex: 0 0 28px;
    height: 1px;
    background: var(--sp-rule-strong);
}
.skel-split .sp-eyebrow { order: 0; }
.skel-split .sp-eyebrow::before { order: -2; }
.skel-split .sp-eyebrow::after { order: -1; }
.skel-split .pub-section > .pub-container > .pub-reveal:first-child > .pub-section-tag::before { order: -2; }
.skel-split .pub-section > .pub-container > .pub-reveal:first-child > .pub-section-tag::after { order: -1; }
.skel-split .sp-eyebrow--num::after { display: none; }
.skel-split .pub-section-subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--sp-ink-soft);
    max-width: 520px;
    margin: 0;
}
.skel-split .pub-section .rich-content { color: var(--sp-ink-soft); line-height: 1.75; }
.skel-split .sp-muted { color: var(--sp-ink-soft); }

/* text link with an arrow */
.skel-split .sp-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sp-ink) !important;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sp-rule-strong);
    transition: border-color 0.2s, gap 0.2s;
}
.skel-split .sp-link:hover { border-bottom-color: var(--sp-ink); gap: 14px; }

/* buttons: sharp, quiet, primary forced dark */
.skel-split .pub-section:not(.pub-section-hero) .pub-btn,
.skel-split .sp-hero .pub-btn,
.skel-split .sp-room .pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 14px 30px;
    border-radius: 0;
    border: 1px solid var(--sp-btn);
    background: var(--sp-btn);
    color: var(--sp-on-btn);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: none;
    transform: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.skel-split .pub-section:not(.pub-section-hero) .pub-btn:hover,
.skel-split .sp-hero .pub-btn:hover,
.skel-split .sp-room .pub-btn:hover { background: transparent; color: var(--sp-ink); transform: none; opacity: 1; }
.skel-split .pub-section:not(.pub-section-hero) .pub-btn.pub-btn-ghost,
.skel-split .sp-hero .pub-btn.pub-btn-ghost {
    background: transparent;
    color: var(--sp-ink);
    border-color: var(--sp-rule-strong);
}
.skel-split .pub-section:not(.pub-section-hero) .pub-btn.pub-btn-ghost:hover,
.skel-split .sp-hero .pub-btn.pub-btn-ghost:hover { border-color: var(--sp-ink); }
.btn-pill.skel-split .pub-btn { border-radius: 999px !important; }
.btn-rounded.skel-split .pub-btn { border-radius: 4px; }

/* ================================= */
/* 3. MENU                             */
/* ================================= */

body.skel-split .sp-header.pub-header {
    position: sticky;
    top: calc(var(--announcement-height, 0px));
    z-index: 100;
    background: var(--nav-bg, var(--sp-paper));
    border-bottom: 1px solid var(--sp-rule);
    box-shadow: none;
    transition: background-color 0.3s var(--sp-ease), border-color 0.3s;
}
body.skel-split .sp-header.pub-header > .pub-container {
    max-width: var(--sp-max);
    min-height: var(--sp-nav-h);
    padding: 0 var(--sp-gutter);
    gap: 24px;
}
body.skel-split .sp-header.pub-header .pub-logo { transform: none; text-transform: none; letter-spacing: 0; font-weight: inherit; font-size: inherit; }
body.skel-split .sp-header.pub-header .pub-logo-text {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--logo-color, var(--nav-text, var(--sp-ink)));
}
body.skel-split .sp-header.pub-header .pub-nav {
    gap: var(--nav-link-gap, clamp(18px, 2.2vw, 30px));
    flex-wrap: nowrap;
}
body.skel-split .sp-header.pub-header .pub-nav > a,
body.skel-split .sp-header.pub-header .pub-nav-dropdown-trigger {
    font-family: var(--nav-font-family, var(--font-body));
    font-size: var(--nav-font-size, 11.5px);
    font-weight: var(--nav-font-weight, 600);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nav-text, var(--sp-ink));
    opacity: 0.72;
    padding: 6px 0;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.skel-split .sp-header.pub-header .pub-nav > a:hover,
body.skel-split .sp-header.pub-header .pub-nav > a.active,
body.skel-split .sp-header.pub-header .pub-nav-dropdown-trigger:hover { opacity: 1; }
body.skel-split .sp-header.pub-header .pub-nav > a.active { box-shadow: inset 0 -1px 0 currentColor; }
body.skel-split .sp-header.pub-header .pub-nav .sp-nav-book {
    opacity: 1;
    padding: 9px 18px !important;
    border: 1px solid currentColor !important;
    box-shadow: none !important;
}
body.skel-split .sp-header.pub-header .pub-nav .sp-nav-book:hover { background: var(--nav-text, var(--sp-ink)); color: var(--nav-bg, var(--sp-paper)); }
body.skel-split .sp-header.pub-header .pub-nav-contact { display: none; }
body.skel-split .sp-header.pub-header .pub-nav-admin-btn {
    font-size: 11px;
    letter-spacing: 0.12em;
    opacity: 0.6;
}
/* sub-page dropdown */
body.skel-split .sp-header.pub-header .pub-nav-dropdown { position: relative; }
body.skel-split .sp-header.pub-header .pub-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    min-width: 220px;
    padding: 10px 0;
    background: var(--sp-paper);
    border: 1px solid var(--sp-rule);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.25);
    display: none;
    flex-direction: column;
    z-index: 5;
    transform: none;
    border-radius: 0;
}
body.skel-split .sp-header.pub-header .pub-nav-dropdown:hover .pub-nav-dropdown-menu,
body.skel-split .sp-header.pub-header .pub-nav-dropdown:focus-within .pub-nav-dropdown-menu,
body.skel-split .sp-header.pub-header .pub-nav-dropdown.open .pub-nav-dropdown-menu { display: flex; opacity: 1; transform: none; }
body.skel-split .sp-header.pub-header .pub-nav-dropdown-menu a {
    padding: 9px 18px;
    font-size: 14px;
    color: var(--sp-ink);
    opacity: 0.8;
    text-decoration: none;
}
body.skel-split .sp-header.pub-header .pub-nav-dropdown-menu a:hover { opacity: 1; background: var(--sp-paper-2); }
body.skel-split .sp-header.pub-header .pub-nav-toggle { color: var(--burger-color, var(--nav-text, var(--sp-ink))); }
body.skel-split .sp-header.pub-header .pub-nav a:focus-visible,
body.skel-split .sp-header.pub-header button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---- Menu over the hero (Branding → "Menu over hero") ----
   Half of the split hero is plain page colour, so the shared white-text
   rule would hide the menu. Here the floating bar keeps ink text and puts
   a paper pill behind whatever sits over the photo. */
@media (min-width: 769px) {
    body.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child) .sp-header.pub-nav-hero-transparent:not(.pub-nav-scrolled) :is(.pub-logo, .pub-logo-text, .pub-nav > a, .pub-nav-dropdown-trigger, .pub-nav-toggle) {
        color: var(--sp-ink) !important;
        text-shadow: none !important;
    }
    body.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child) .sp-header.pub-nav-hero-transparent:not(.pub-nav-scrolled) .pub-nav {
        padding: 6px 8px 6px 22px;
        background: color-mix(in srgb, var(--sp-paper) 86%, transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    body.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child .sp-hero--media-left) .sp-header.pub-nav-hero-transparent:not(.pub-nav-scrolled) .pub-nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
    body.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child .sp-hero--media-left) .sp-header.pub-nav-hero-transparent:not(.pub-nav-scrolled) .pub-logo {
        padding: 8px 14px;
        background: color-mix(in srgb, var(--sp-paper) 86%, transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    body.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child) .sp-header.pub-nav-hero-transparent.pub-nav-scrolled { border-bottom-color: var(--sp-rule); }
}

/* ---- Phone menu: full-height panel ---- */
@media (max-width: 768px) {
    body.skel-split .sp-header.pub-header > .pub-container { min-height: 58px; padding: 0 20px; }
    body.skel-split .sp-header.pub-header .pub-logo-text { font-size: 19px; }
    body.skel-split .sp-header.pub-header .pub-logo img { max-width: 170px; }
    body.skel-split .sp-header.pub-header .pub-nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 3;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        margin-right: -10px;
    }
    body.skel-split .sp-header.pub-header .pub-nav {
        position: fixed;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: calc(var(--announcement-height, 0px) + 84px) 24px calc(32px + env(safe-area-inset-bottom, 0px));
        background: var(--mobile-nav-bg, var(--sp-paper));
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s var(--sp-ease), visibility 0s linear 0.25s;
    }
    body.skel-split .sp-header.pub-header .pub-nav.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.25s var(--sp-ease), visibility 0s;
    }
    body.skel-split .sp-header.pub-header .pub-nav > a,
    body.skel-split .sp-header.pub-header .pub-nav-dropdown-trigger {
        font-family: var(--font-heading);
        font-size: 30px;
        font-weight: 400;
        letter-spacing: -0.01em;
        text-transform: none;
        opacity: 1;
        padding: 14px 0;
        border-bottom: 1px solid var(--sp-rule);
        color: var(--sp-ink) !important;
        text-shadow: none !important;
        width: 100%;
        justify-content: space-between;
        box-shadow: none;
    }
    body.skel-split .sp-header.pub-header .pub-nav > a.active { box-shadow: none; color: var(--sp-accent-ink) !important; }
    body.skel-split .sp-header.pub-header .pub-nav-dropdown { position: static; width: 100%; }
    /* sub-pages are always listed under their page (no accordion to find) */
    body.skel-split .sp-header.pub-header .pub-nav-dropdown-menu {
        position: static !important;
        display: flex !important;
        flex-direction: column;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 12px 18px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--sp-rule) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    body.skel-split .sp-header.pub-header .pub-nav-dropdown-trigger { border-bottom: 0; }
    body.skel-split .sp-header.pub-header .pub-nav-dropdown-trigger .pub-nav-chevron { display: none; }
    body.skel-split .sp-header.pub-header .pub-nav-dropdown-menu a { font-size: 17px !important; padding: 8px 0 !important; opacity: 1 !important; color: var(--sp-ink-soft) !important; font-family: var(--font-body) !important; letter-spacing: 0 !important; }
    body.skel-split .sp-header.pub-header .pub-nav-dropdown-trigger { pointer-events: none; }
    body.skel-split .sp-header.pub-header .pub-nav .sp-nav-book {
        margin-top: 28px;
        justify-content: center;
        font-family: var(--font-body);
        font-size: 13px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 16px;
        background: var(--sp-btn);
        border: 0;
        color: var(--sp-on-btn) !important;
    }
    body.skel-split .sp-header.pub-header .pub-nav-contact {
        display: flex !important;
        align-items: flex-start;
        border: 0 !important;
        padding: 0 !important;
        flex-direction: column;
        gap: 6px;
        margin-top: 24px;
    }
    body.skel-split .sp-header.pub-header .pub-nav-contact-link { display: inline-flex !important; gap: 8px; align-items: center; color: var(--sp-ink-soft) !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none; }
    body.skel-split .sp-header.pub-header .pub-nav-admin-btn { margin-top: 18px; border: 0 !important; font-size: 12px !important; font-family: var(--font-body) !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; opacity: 0.6 !important; justify-content: flex-start !important; }
    /* the open panel is page colour, like its links: nav_styles.css paints
       every open panel in the menu-bar colour (!important), which put the
       ink-coloured links on black when an owner chose a dark menu bar. An
       owner's own phone-menu colour still wins. */
    body.skel-split .sp-header.pub-header > .pub-container > .pub-nav.open { background: var(--mobile-nav-bg, var(--sp-paper)) !important; }
    html.sp-menu-open, html.sp-menu-open body { overflow: hidden; }
    html.sp-menu-open .sp-header .pub-logo,
    html.sp-menu-open .sp-header .pub-logo-text,
    html.sp-menu-open .sp-header .pub-nav-toggle { position: relative; z-index: 3; color: var(--sp-ink) !important; text-shadow: none !important; }
}
@media (max-width: 768px) {
    html.sp-menu-open .sp-header .pub-logo { position: relative; z-index: 3; }
    /* solid strip behind the name + close button: when the open panel is
       scrolled, its links slide under it instead of over the name */
    html.sp-menu-open body.skel-split .sp-header.pub-header > .pub-container::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--announcement-height, 0px) + 76px);
        z-index: 3;
        background: var(--mobile-nav-bg, var(--sp-paper));
        pointer-events: none;
    }
    html.sp-menu-open body.tpl-bold.skel-split .sp-header.pub-header > .pub-container::before {
        background: var(--mobile-nav-bg, var(--nav-bg-opaque, var(--sp-deep)));
    }
    /* staff: Dashboard (signed in) or Staff sign in (signed out) next to the
       close button while the menu is open, instead of at the bottom */
    html.sp-menu-open body.skel-split .sp-header .sp-head-dash {
        display: inline-flex;
        position: relative;
        z-index: 3;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        margin-left: auto;
        margin-right: 4px;
        padding: 0 14px;
        border: 1px solid var(--sp-rule);
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        color: var(--sp-ink) !important;
    }
    @media (max-width: 380px) {
        html.sp-menu-open body.skel-split .sp-header .sp-head-dash { padding: 0 10px; letter-spacing: 0.04em; font-size: 11.5px; gap: 5px; }
    }
    html.sp-menu-open body.tpl-bold.skel-split .sp-header .sp-head-dash {
        color: var(--ns-panel-on, var(--sp-on-deep)) !important;
        border-color: var(--sp-on-deep-rule);
    }
    html.sp-menu-open body.skel-split .sp-header .pub-nav > a.pub-nav-admin-btn { display: none; }
}
.sp-head-dash { display: none; }

/* ================================= */
/* 4. HERO — CUT IN TWO                */
/* ================================= */

.skel-split .pub-section-hero { padding: 0; border: 0; background: var(--sp-paper); }
.skel-split .pub-section-hero > .pub-container { max-width: none; padding: 0; }
body.skel-split #main-content .pub-section-hero .pub-hero.sp-hero {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    grid-template-areas: "text media";
    align-items: stretch;
    padding: 0;
    min-height: var(--hero-height, min(86vh, 820px));
    background: var(--sp-paper) !important;
    text-align: var(--hero-text-align, left);
    overflow: hidden;
}
body.skel-split #main-content .pub-section-hero .pub-hero.sp-hero--media-left { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); grid-template-areas: "media text"; }
.skel-split .sp-hero__text {
    grid-area: text;
    position: relative;
    z-index: 4;
    display: flex;
    align-items: var(--hero-align-items, center);
    justify-content: var(--hero-justify, flex-start);
    padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px) clamp(48px, 6vw, 96px) max(var(--sp-gutter), calc((100vw - var(--sp-max)) / 2 + var(--sp-gutter)));
    min-width: 0;
}
.skel-split .sp-hero--media-left .sp-hero__text {
    padding: clamp(48px, 6vw, 96px) max(var(--sp-gutter), calc((100vw - var(--sp-max)) / 2 + var(--sp-gutter))) clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px);
}
.skel-split .sp-hero .pub-hero-content {
    color: var(--sp-ink);
    max-width: var(--hero-content-width, 560px);
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    text-align: var(--hero-text-align, left);
}
.skel-split .sp-hero .pub-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--sp-accent-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.skel-split .sp-hero .pub-hero-badge::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.skel-split .sp-hero .pub-hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-transform: none;
    text-shadow: none;
    color: var(--hero-h1-color, var(--sp-ink));
    margin: 0 0 24px;
    text-wrap: balance;
}
.skel-split .sp-hero .pub-hero-accent { color: var(--sp-accent-ink); font-style: italic; }
.skel-split .sp-hero .pub-hero-accent--script { font-style: normal; }
.skel-split .sp-hero .pub-hero-content > p:not(.sp-hero__note) {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.7;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hero-p-color, var(--sp-ink-soft));
    max-width: 440px;
    margin: 0 0 34px;
    text-shadow: none;
}
.skel-split .sp-hero[style*="--hero-text-align:center"] .pub-hero-content > p:not(.sp-hero__note) { margin-left: auto; margin-right: auto; }
.skel-split .sp-hero[style*="--hero-text-align:right"] .pub-hero-content > p:not(.sp-hero__note) { margin-left: auto; }
.skel-split .sp-hero .pub-hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: var(--hero-justify, flex-start);
    margin: 0;
}
.skel-split .sp-hero .sp-hero__note {
    position: static;
    max-width: 340px;
    margin: 40px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--sp-rule);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
    color: var(--sp-ink-soft);
    font-size: 13px;
    line-height: 1.6;
    font-style: italic;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none;
    box-shadow: none;
}
.skel-split .sp-hero[style*="--hero-text-align:center"] .sp-hero__note { margin-left: auto; margin-right: auto; }
.skel-split .sp-hero[style*="--hero-text-align:right"] .sp-hero__note { margin-left: auto; }

/* the photo side */
.skel-split .sp-hero__media {
    grid-area: media;
    position: relative;
    overflow: hidden;
    min-height: 100%;
    background-color: var(--hero-bg, var(--sp-deep));
    background-size: cover;
    background-position: center;
}
.skel-split .sp-hero__img,
.skel-split .sp-hero__media .pub-hero-video-bg,
.skel-split .sp-hero__media .pub-hero-video-bg iframe,
.skel-split .sp-hero__media .pub-hero-video-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.skel-split .sp-hero__media .pub-hero-video-bg { z-index: 0; overflow: hidden; }
.skel-split .sp-hero__media .pub-hero-video-bg iframe { width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; left: 50%; top: 50%; inset: auto; transform: translate(-50%, -50%); position: absolute; }
/* a soft shade only — the words aren't on the photo */
/* a soft shade only — the words aren't on the photo, so the owner's
   darkness is capped (a gradient overlay from the editor is kept as set) */
.skel-split .sp-hero__media .pub-hero-overlay { z-index: 1; background: #000; }
.skel-split .sp-hero__media .pub-hero-overlay:not([style*="background"]) { opacity: 0.14 !important; }
.skel-split .sp-hero__media .pub-hero-credit { position: absolute; right: 12px; bottom: 10px; z-index: 3; font-size: 11px; color: rgba(255, 255, 255, 0.8); }
.skel-split .sp-hero__media .pub-hero-credit a { color: inherit; }
/* hero zoom / parallax (scroll-effects.js) move a copy of the photo inside this half */
.skel-split .sp-hero__media.pub-hero--layered { background-image: none !important; }
.skel-split .sp-hero--no-photo .sp-hero__media {
    background-image: linear-gradient(160deg, color-mix(in srgb, var(--primary, #2563eb) 70%, var(--sp-deep)), var(--sp-deep));
}
.skel-split .sp-hero--no-photo .sp-hero__media .pub-hero-overlay { opacity: 0; }
/* slideshow: the slides fill the photo side */
.skel-split .sp-hero__media .pub-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; }
.skel-split .sp-hero__media .pub-slide-text { display: none; }

/* Layout "Contained": the photo sits framed inside its half */
.skel-split .sp-hero--framed .sp-hero__media { margin: clamp(16px, 2.5vw, 36px); min-height: 0; }
.skel-split .sp-hero--framed:not(.sp-hero--media-left) .sp-hero__media { margin-left: 0; }
.skel-split .sp-hero--framed.sp-hero--media-left .sp-hero__media { margin-right: 0; }
/* Layout "Minimal": words only — a magazine opener without the photo half */
body.skel-split #main-content .pub-section-hero .pub-hero.sp-hero--text-only {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text";
    min-height: 0;
    border-bottom: 1px solid var(--sp-rule);
}
.skel-split .sp-hero--text-only .sp-hero__media { display: none; }
.skel-split .sp-hero--text-only .sp-hero__text { padding-top: clamp(56px, 9vw, 136px); padding-bottom: clamp(56px, 9vw, 136px); }
.skel-split .sp-hero--text-only .pub-hero-content { max-width: min(var(--hero-content-width, 900px), 900px); }
.skel-split .sp-hero--text-only .pub-hero-content h1 { font-size: clamp(2.8rem, 7vw, 6.4rem); }
@media (max-width: 768px) {
    body.skel-split #main-content .pub-section-hero .pub-hero.sp-hero--text-only { grid-template-areas: "text"; }
    .skel-split .sp-hero--framed .sp-hero__media,
    .skel-split .sp-hero--framed.sp-hero--media-left .sp-hero__media { margin: 16px 20px 0; }
}

/* sticky hero (scroll_effects.css): the next section curves up over the
   hero — keep the words clear of that edge, the photo runs underneath. */
body.skel-split.scroll-sticky-hero #main-content > .pub-section-hero:first-child .pub-hero.sp-hero { padding-bottom: 0 !important; }
body.skel-split.scroll-sticky-hero #main-content > .pub-section-hero:first-child .sp-hero__text { padding-bottom: calc(clamp(48px, 6vw, 96px) + var(--overlay-radius, 32px)); }
body.skel-split.scroll-sticky-hero #main-content > .pub-section-hero:first-child + .pub-section { border-top: 0; }
/* menu over the hero: the words start below the floating bar */
body.skel-split.nav-hero-transparent #main-content > .pub-section-hero:first-child .pub-hero.sp-hero { padding-top: 0 !important; }
body.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child) .sp-hero__text { padding-top: calc(var(--sp-nav-h) + clamp(40px, 5vw, 80px)); }

/* skins box the hero in their own column (Black & White's minimal hero:
   1100px + side padding) — the split hero always runs edge to edge */
body.skel-split #main-content .pub-section-hero { padding: 0; }
body.skel-split #main-content .pub-section-hero > .pub-container { max-width: none; padding: 0; margin: 0; }

/* ================================= */
/* 4b. SUB-PAGE TITLE (masthead)       */
/* ================================= */
/* Pages without their own hero (About, Rooms, Contact, Reviews, Blog …)
   open with a magazine masthead on the page colour: a hairline with a
   short accent lead, the page title set very large on the left and the
   page's short description in a narrow column on the right. Replaces
   each skin's dark centred banner. */
body.skel-split .pub-section.pub-page-hero,
body.skel-split .nav-dock ~ main .pub-section.pub-page-hero {
    background: var(--sp-paper) !important;
    color: var(--sp-ink);
    text-align: left;
    padding: clamp(40px, 6vw, 88px) 0 clamp(36px, 5vw, 64px) !important;
    margin: 0 !important;
    border: 0;
    border-bottom: 1px solid var(--sp-rule);
    border-radius: 0 !important;
    overflow: visible;
}
body.skel-split .pub-page-hero::before,
body.skel-split .pub-page-hero::after,
body.skel-split .pub-page-hero-inner::after { display: none !important; }
body.skel-split .pub-page-hero > .pub-container {
    max-width: var(--sp-max);
    padding-left: var(--sp-gutter);
    padding-right: var(--sp-gutter);
}
body.skel-split .pub-page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: clamp(32px, 5vw, 88px);
    align-items: end;
    text-align: left;
}
body.skel-split .pub-page-hero-inner::before {
    content: '';
    grid-column: 1 / -1;
    height: 1px;
    margin-bottom: clamp(28px, 4vw, 48px);
    background: linear-gradient(to right, var(--sp-accent-ink) 0 56px, var(--sp-rule-strong) 56px);
}
body.skel-split .pub-page-hero .pub-page-hero-title,
body.skel-split .nav-dock ~ main .pub-page-hero h1 {
    grid-column: 1;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 7vw, 6rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-transform: none;
    text-shadow: none;
    color: var(--sp-ink) !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
body.skel-split .pub-page-hero-inner:not(:has(.pub-page-hero-subtitle)) .pub-page-hero-title { grid-column: 1 / -1; }
body.skel-split .pub-page-hero .pub-page-hero-subtitle,
body.skel-split .nav-dock ~ main .pub-page-hero p {
    grid-column: 2;
    margin: 0;
    padding: 4px 0 6px 22px;
    max-width: none;
    border-left: 1px solid var(--sp-rule-strong);
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.65;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sp-ink-soft) !important;
}
@media (max-width: 768px) {
    body.skel-split .pub-section.pub-page-hero { padding: 32px 0 32px !important; }
    body.skel-split .pub-page-hero-inner { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
    body.skel-split .pub-page-hero-inner::before { margin-bottom: 8px; }
    body.skel-split .pub-page-hero .pub-page-hero-title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
    body.skel-split .pub-page-hero .pub-page-hero-subtitle,
    body.skel-split .nav-dock ~ main .pub-page-hero p { grid-column: 1; padding: 0; border-left: 0; }
    body.skel-split .nav-dock ~ main .pub-page-hero h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
    body.skel-split .nav-dock ~ main .pub-section.pub-page-hero { padding-top: calc(58px + 32px) !important; }
}

/* ================================= */
/* 5. SPREADS (title left, body right) */
/* ================================= */

.skel-split .sp-spread {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 88px);
    align-items: start;
}
.skel-split .sp-spread__head {
    position: sticky;
    top: calc(var(--announcement-height, 0px) + var(--sp-nav-h) + 32px);
    min-width: 0;
    text-align: left;
    margin: 0;
}
.skel-split .sp-spread__head .pub-section-subtitle { font-size: 1rem; margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
.skel-split .sp-spread__head.pub-section-header { border: 0; padding: 0; max-width: none; }
.skel-split .sp-spread__head::before,
.skel-split .sp-spread__head::after { display: none !important; }
.skel-split .sp-spread__body { min-width: 0; }
.skel-split .sp-spread--no-head { grid-template-columns: minmax(0, 1fr); }
.skel-split .sp-spread--no-head .sp-spread__body { max-width: 760px; }
.skel-split .sp-spread--text .pub-text { max-width: 680px; font-size: 1.08rem; }
.skel-split .sp-spread--text .pub-text > p:first-child::first-letter {
    float: left;
    font-family: var(--font-heading);
    font-size: 3.6em;
    line-height: 0.82;
    padding: 6px 10px 0 0;
    color: var(--sp-ink);
}

/* Standard sections that keep the standard file but read better as a
   spread (title block first, content after) — CSS only. */
.skel-split :is(.pub-section-amenities, .pub-section-properties_list, .pub-section-image_grid) > .pub-container:has(> .pub-reveal:first-child > h2) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 88px);
    align-items: start;
}
.skel-split :is(.pub-section-amenities, .pub-section-properties_list, .pub-section-image_grid) > .pub-container:has(> .pub-reveal:first-child > h2) > :first-child {
    grid-column: 1;
    grid-row: 1 / span 20;
    position: sticky;
    top: calc(var(--announcement-height, 0px) + var(--sp-nav-h) + 32px);
    text-align: left;
}
.skel-split :is(.pub-section-amenities, .pub-section-properties_list, .pub-section-image_grid) > .pub-container:has(> .pub-reveal:first-child > h2) > :not(:first-child) { grid-column: 2; min-width: 0; }
/* other standard section headings: left-aligned, same type */
.skel-split .pub-section > .pub-container > .pub-reveal:first-child:has(> h2) { text-align: left; }
.skel-split .pub-section > .pub-container > .pub-reveal:first-child > .pub-section-subtitle { margin-bottom: 32px; }

/* ================================= */
/* 6. ABOUT — PHOTO PAIR               */
/* ================================= */

.skel-split .sp-about.pub-about {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: center;
}
.skel-split .sp-about.pub-about--image-left { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.skel-split .sp-about.pub-about--image-left .pub-about-text { order: 2; }
.skel-split .sp-about .pub-about-text { text-align: left; }
.skel-split .sp-about.pub-about--center .pub-about-text { text-align: center; }
.skel-split .sp-about.pub-about--center .pub-section-tag { justify-content: center; }
.skel-split .sp-about .pub-about-body { color: var(--sp-ink-soft); font-size: 1.05rem; line-height: 1.8; }
.skel-split .sp-about .pub-section-subtitle { margin-bottom: 20px; font-family: var(--font-heading); font-style: italic; font-size: 1.15rem; color: var(--sp-ink); }
.skel-split .sp-about__photos {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 clamp(40px, 6vw, 80px) 0;
    box-shadow: none;
    border: 0;
    background: none;
}
.skel-split .sp-about__photos::before,
.skel-split .sp-about__photos::after { display: none !important; }
.skel-split .sp-about__photos > img {
    display: block;
    width: 82%;
    margin-left: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}
.skel-split .sp-about.pub-about--image-left .sp-about__photos > img { margin-left: 0; margin-right: auto; }
.skel-split .pub-about-ratio--landscape .sp-about__photos > img { aspect-ratio: 4 / 3; }
.skel-split .pub-about-ratio--square .sp-about__photos > img { aspect-ratio: 1; }
.skel-split .pub-about-ratio--portrait .sp-about__photos > img { aspect-ratio: 3 / 4; }
.skel-split .pub-about-img--rounded .sp-about__photos img { border-radius: 14px; }
.skel-split .pub-about-img--circle .sp-about__photos > img { border-radius: 50%; aspect-ratio: 1; }
.skel-split .sp-about__second {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44%;
    border: 10px solid var(--sp-paper);
    background: var(--sp-paper);
}
.skel-split .pub-section-alt .sp-about__second { border-color: var(--sp-paper-2); background: var(--sp-paper-2); }
.skel-split .pub-section-dark .sp-about__second { border-color: var(--sp-deep); background: var(--sp-deep); }
.skel-split .pub-about--image-left .sp-about__second { left: auto; right: 0; }
.skel-split .sp-about__second:empty { display: none; }
.skel-split .sp-about__second img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.skel-split .sp-about__second img:not(:first-child) { display: none; }
.skel-split .sp-about__photos:has(.sp-about__second:empty) { padding-bottom: 0; }
.skel-split .sp-about__photos:has(.sp-about__second:empty) > img { width: 100%; }
.skel-split .pub-about--no-frame .sp-about__second { border-width: 0; }
.skel-split .sp-about .pub-photo-credit { position: absolute; right: 8px; top: 8px; font-size: 11px; }
/* standard about inside the frame (carousel / stacked / text only) */
.skel-split .sp-about--plain .pub-about-text { text-align: left; }

/* ================================= */
/* 7. ROOMS — ALTERNATING ROWS         */
/* ================================= */

.skel-split .sp-rooms.pub-rooms-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none;
}
.skel-split .sp-room.pub-room-card {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: clamp(28px, 4vw, 48px) 0;
    border: 0;
    border-top: 1px solid var(--sp-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    transform: none;
}
.skel-split .sp-room.pub-room-card:first-child { border-top: 0; padding-top: 0; }
.skel-split .sp-room.pub-room-card:hover { transform: none; box-shadow: none; }
.skel-split .sp-room:nth-child(even) { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
.skel-split .sp-room:nth-child(even) .sp-room__photo { order: 2; }
.skel-split .sp-room__photo.pub-room-image {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: 4 / 3;
    margin: 0;
    background: var(--sp-paper-2);
}
.skel-split .sp-room__photo::before,
.skel-split .sp-room__photo::after { display: none !important; }
.skel-split .sp-rooms-more .pub-view-all-rooms { background: none !important; border-width: 0 0 1px !important; border-radius: 0 !important; padding: 0 0 6px !important; box-shadow: none !important; }
.skel-split .sp-room__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.8s var(--sp-ease);
}
.skel-split .sp-room:hover .sp-room__photo img { transform: scale(1.03); }
.skel-split .sp-room.pub-room-hover--none:hover .sp-room__photo img { transform: none; }
.skel-split .sp-room__photo:has(.pub-room-img--portrait) { aspect-ratio: 4 / 5; }
.skel-split .sp-room__photo:has(.pub-room-img--square) { aspect-ratio: 1; }
.skel-split .sp-room__photo:has(.pub-room-img--wide) { aspect-ratio: 16 / 9; }
.skel-split .sp-room--no-photo .sp-room__photo { background: color-mix(in srgb, currentColor 8%, transparent); }
.skel-split .sp-room__initial {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: clamp(4rem, 9vw, 7rem);
    color: color-mix(in srgb, var(--sp-ink) 35%, transparent);
}
.skel-split .sp-room__photo .pub-room-sample-tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.skel-split .sp-room__text.pub-room-info { padding: 0; text-align: left; display: block; }
.skel-split .sp-room__num {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--sp-accent-ink);
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}
.skel-split .sp-room__name {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem) !important;
    line-height: 1.1;
    margin: 0 0 14px;
    color: var(--sp-ink);
}
.skel-split .sp-room__desc { color: var(--sp-ink-soft); line-height: 1.7; margin: 0 0 18px; max-width: 420px; }
.skel-split .sp-room__meta.pub-room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sp-ink-soft);
    border: 0;
}
.skel-split .sp-room__meta li { display: inline; padding: 0; margin: 0; background: none; border: 0; font-size: inherit; }
.skel-split .sp-room__meta li + li::before { content: '·'; margin-right: 18px; }
.skel-split .sp-room__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding-top: 20px;
    border-top: 1px solid var(--sp-rule);
}
.skel-split .sp-room__price.pub-room-price { margin: 0; font-size: 14px; color: var(--sp-ink-soft); background: none; padding: 0; }
.skel-split .sp-room__price strong { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 400; color: var(--sp-ink); margin: 0 2px; }
.skel-split .sp-room__from { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.skel-split .sp-room .pub-btn-room { width: auto; margin: 0; }
.skel-split .sp-rooms-group { margin: 40px 0 8px; }
.skel-split .sp-rooms-group:first-child { margin-top: 0; }
.skel-split .sp-rooms-more { margin-top: clamp(28px, 4vw, 44px); }

/* ================================= */
/* 8. FEATURES — NUMBERED LIST         */
/* ================================= */

.skel-split .sp-features .sp-features__list.pub-cards-grid {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--sp-rule-strong);
    counter-reset: none;
}
.skel-split .sp-feature.pub-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 8px clamp(16px, 3vw, 40px);
    align-items: start;
    padding: clamp(22px, 3vw, 32px) 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--sp-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    transform: none !important;
}
.skel-split .sp-feature.pub-card[style] { padding-left: 20px; padding-right: 20px; }
.skel-split .sp-feature__num {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--sp-accent-ink);
}
.skel-split .sp-feature__body.pub-card-body { padding: 0; text-align: left; }
.skel-split .sp-feature .pub-card-title { text-transform: none; letter-spacing: -0.005em; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; margin: 0 0 8px; color: var(--sp-ink); }
.skel-split .sp-feature .pub-card-text { color: var(--sp-ink-soft); font-size: 1rem; max-width: 560px; }
.skel-split .sp-feature .pub-card-btn { display: inline-flex !important; width: auto !important; margin-top: 14px; background: none; padding: 0 0 6px; border-radius: 0; }
.skel-split .sp-feature__media { width: clamp(72px, 10vw, 128px); margin: 0; }
.skel-split .sp-feature__media.pub-card-image { aspect-ratio: 1; overflow: hidden; border-radius: 0; }
.skel-split .sp-feature__media.pub-card-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.skel-split .sp-feature__icon.pub-card-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sp-rule-strong);
    border-radius: 50%;
    background: none;
    color: var(--sp-ink);
}
.skel-split .sp-feature__icon svg { width: 22px; height: 22px; }

/* ================================= */
/* 9. GALLERY — EDITORIAL MOSAIC       */
/* ================================= */

.skel-split .sp-gallery-head { margin-bottom: clamp(28px, 4vw, 48px); }
.skel-split .sp-gallery-head .sp-spread__head { position: static; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); align-items: end; }
.skel-split .sp-gallery-head .sp-spread__head > .pub-section-tag { grid-column: 1 / -1; }
.skel-split .sp-gallery-head .sp-spread__head > h2 { grid-column: 1; margin: 0; }
.skel-split .sp-gallery-head .sp-spread__head > .pub-section-subtitle { grid-column: 2; }
/* 6-column grid: photo 1 large (4 cols × 2 rows), photos 2-3 beside it,
   then rows of three; the last row is resized by count so nothing is
   left alone. */
.skel-split .sp-gallery.pub-gallery:not(.pub-gallery-masonry) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(140px, 17vw, 240px);
    grid-auto-flow: dense;
    gap: var(--sp-gal-gap, clamp(8px, 1.2vw, 16px));
    columns: auto;
}
.skel-split .sp-gallery:not(.pub-gallery-masonry) .pub-gallery-item {
    grid-column: span 2;
    grid-row: span 1;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
    height: auto;
    aspect-ratio: auto;
}
.skel-split .sp-gallery:not(.pub-gallery-masonry) .pub-gallery-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    aspect-ratio: auto;
}
.skel-split .sp-gallery:not(.pub-gallery-masonry) .pub-gallery-item:first-child { grid-column: span 4; grid-row: span 2; }
/* counts: 1 → full; 2 → halves; 3 → big + two stacked (default) */
.skel-split .sp-gallery:not(.pub-gallery-masonry):has(> :last-child:nth-child(1)) .pub-gallery-item:first-child { grid-column: 1 / -1; }
.skel-split .sp-gallery:not(.pub-gallery-masonry):has(> :last-child:nth-child(2)) .pub-gallery-item { grid-column: span 3; grid-row: span 2; }
/* after the big block (3 photos), rows of three: a remainder of 1 or 2
   at the end is stretched to fill its row */
.skel-split .sp-gallery:not(.pub-gallery-masonry):has(> :last-child:nth-child(3n + 1)):not(:has(> :last-child:nth-child(1))) .pub-gallery-item:last-child { grid-column: 1 / -1; grid-row: span 2; }
.skel-split .sp-gallery:not(.pub-gallery-masonry):has(> :last-child:nth-child(3n + 2)):not(:has(> :last-child:nth-child(2))) .pub-gallery-item:nth-last-child(-n + 2) { grid-column: span 3; }
/* masonry: newspaper columns, every photo its own height */
.skel-split .sp-gallery.pub-gallery-masonry {
    display: block;
    columns: 3;
    column-gap: var(--sp-gal-gap, clamp(8px, 1.2vw, 16px));
}
.skel-split .sp-gallery.pub-gallery-masonry .pub-gallery-item {
    display: block;
    position: relative;
    break-inside: avoid;
    margin: 0 0 var(--sp-gal-gap, clamp(8px, 1.2vw, 16px));
    grid-column: auto;
    grid-row: auto;
    height: auto;
    overflow: hidden;
    border-radius: 0;
}
.skel-split .sp-gallery.pub-gallery-masonry .pub-gallery-item img { position: static; display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; }
.skel-split .sp-gallery.pub-gallery-masonry .pub-gallery-item:nth-child(3n + 1) img { aspect-ratio: 4 / 5; object-fit: cover; }
.skel-split .sp-gallery.pub-gallery-masonry .pub-gallery-item:nth-child(3n + 2) img { aspect-ratio: 4 / 3; object-fit: cover; }
/* album filter on: a plain even grid (hidden photos would break the counts) */
.skel-split .sp-gallery.sp-gallery--filtered .pub-gallery-item:not(.album-hidden) { grid-column: span 2 !important; grid-row: span 1 !important; }
.skel-split .sp-gallery .pub-gallery-item.album-hidden { display: none; }
.skel-split .sp-gallery.pub-gallery-gap--none { --sp-gal-gap: 0px; }
.skel-split .sp-gallery.pub-gallery-gap--small { --sp-gal-gap: 4px; }
.skel-split .sp-gallery.pub-gallery-gap--large { --sp-gal-gap: clamp(14px, 2vw, 28px); }
.skel-split .sp-gallery.pub-gallery-radius--small .pub-gallery-item { border-radius: 6px; }
.skel-split .sp-gallery.pub-gallery-radius--medium .pub-gallery-item { border-radius: 12px; }
.skel-split .sp-gallery.pub-gallery-radius--large .pub-gallery-item { border-radius: 22px; }
.skel-split .sp-gallery .pub-gallery-item img { transition: transform 0.9s var(--sp-ease); }
.skel-split .sp-gallery .pub-gallery-item:hover img { transform: scale(1.04); }
.skel-split .sp-gallery.pub-gallery-hover--none .pub-gallery-item:hover img { transform: none; }
.skel-split .sp-gallery .pub-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 28px 16px 12px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ================================= */
/* 10. TESTIMONIALS — PULL-QUOTE       */
/* ================================= */

.skel-split .sp-quotes.pub-testimonials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
    columns: auto;
}
.skel-split .sp-quote.pub-testimonial {
    margin: 0;
    padding: 24px 0 0;
    border: 0;
    border-top: 1px solid var(--sp-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    transform: none;
}
.skel-split .sp-quote--lead.pub-testimonial { grid-column: 1 / -1; padding: 0; border-top: 0; }
.skel-split .sp-quote__mark.pub-testimonial-quote {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 9vw, 8rem);
    line-height: 0.6;
    height: 0.5em;
    color: var(--sp-accent);
    opacity: 1;
    margin: 0 0 16px;
}
.skel-split .sp-quote blockquote { margin: 0; padding: 0; border: 0; }
.skel-split .sp-quote--lead .sp-quote__text,
.skel-split .sp-quote--lead .sp-quote__text p {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--sp-ink);
    font-style: normal;
}
.skel-split .sp-quote:not(.sp-quote--lead) .sp-quote__text { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.5; color: var(--sp-ink); }
.skel-split .sp-quote .pub-testimonial-stars { display: flex; gap: 3px; margin: 0 0 18px; justify-content: flex-start; }
.skel-split .sp-quote .pub-testimonial-stars svg { width: 14px; height: 14px; fill: var(--sp-accent); }
.skel-split .sp-quote__by.pub-testimonial-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 0;
    border: 0;
    justify-content: flex-start;
}
.skel-split .sp-quote--lead .sp-quote__by::before { content: ''; width: 36px; height: 1px; background: var(--sp-rule-strong); }
.skel-split .sp-quote .pub-testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sp-paper-2);
    color: var(--sp-ink);
    border: 1px solid var(--sp-rule);
    font-family: var(--font-heading);
}
.skel-split .sp-quote--lead .sp-quote__by:has(.pub-testimonial-avatar)::before { display: none; }
.skel-split .sp-quote .pub-testimonial-author { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-ink); }
.skel-split .sp-quote .pub-testimonial-role { font-size: 13px; color: var(--sp-ink-soft); }
.skel-split .sp-quotes-more { margin-top: 36px; }

/* ================================= */
/* 11. FAQ                             */
/* ================================= */

.skel-split .sp-faq.pub-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 4vw, 56px);
    max-width: none;
    margin: 0;
    border-top: 1px solid var(--sp-rule-strong);
    align-items: start;
}
.skel-split .sp-faq__item.pub-faq-item {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--sp-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.skel-split .sp-faq__item summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    line-height: 1.4;
    color: var(--sp-ink);
    cursor: pointer;
    list-style: none;
}
.skel-split .sp-faq__item summary::-webkit-details-marker { display: none; }
.skel-split .sp-faq__item summary::after {
    content: '+';
    flex: none;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1;
    color: var(--sp-accent-ink);
    transition: transform 0.25s var(--sp-ease);
    position: static;
    transform: none;
    border: 0;
    width: auto;
    height: auto;
    background: none;
}
.skel-split .sp-faq__item[open] summary::after { transform: rotate(45deg); }
.skel-split .sp-faq__item summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.skel-split .sp-faq__item .pub-faq-answer { padding: 0 0 22px; color: var(--sp-ink-soft); }

/* ================================= */
/* 12. CALL TO ACTION — FULL BAND      */
/* ================================= */

.skel-split .pub-section.pub-section-cta_banner:not([style]):not(.pub-section-accent):not(.pub-section-alt) {
    background: var(--sp-deep);
}
.skel-split .pub-section.pub-section-cta_banner.pub-section-alt { background: var(--sp-paper-2); }
.skel-split .pub-section-cta_banner > .pub-container { padding: 0 !important; max-width: none !important; }
.skel-split .sp-cta.pub-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px clamp(32px, 5vw, 80px);
    align-items: end;
    max-width: none;
    margin: 0;
    padding: clamp(64px, 9vw, 128px) max(var(--sp-gutter), calc((100vw - var(--sp-max)) / 2 + var(--sp-gutter)));
    background: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    color: var(--sp-ink);
    overflow: visible;
}
.skel-split .sp-cta.pub-cta::before,
.skel-split .sp-cta.pub-cta::after { display: none; }
.skel-split .sp-cta--own-bg.pub-cta { color: #fff; }
.skel-split .pub-section-cta_banner:not([style]):not(.pub-section-accent):not(.pub-section-alt) .sp-cta,
.skel-split .pub-section-cta_banner.pub-section-dark .sp-cta {
    --sp-ink: var(--sp-on-deep);
    --sp-ink-soft: var(--sp-on-deep-soft);
    --sp-rule: var(--sp-on-deep-rule);
    --sp-rule-strong: rgba(246, 244, 239, 0.5);
    --sp-accent-ink: var(--sp-accent-light);
    --sp-btn: var(--sp-on-deep);
    --sp-on-btn: var(--sp-deep);
    color: var(--sp-on-deep);
}
.skel-split .sp-cta--own-bg,
.skel-split .pub-section-light-text .sp-cta,
.skel-split .pub-section-bg-image .sp-cta {
    --sp-ink: #fff;
    --sp-ink-soft: rgba(255, 255, 255, 0.82);
    --sp-rule-strong: rgba(255, 255, 255, 0.55);
    --sp-btn: #fff;
    --sp-on-btn: #111;
}
.skel-split .sp-cta p { text-transform: none; letter-spacing: 0; font-size: inherit; }
.skel-split .sp-cta h2 {
    font-size: clamp(2.4rem, 6vw, 5.2rem) !important;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--sp-ink) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    max-width: 14ch;
}
.skel-split .sp-cta__kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sp-accent-ink) !important;
    opacity: 1;
}
.skel-split .sp-cta__kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.skel-split .sp-cta__body { margin-top: 22px; max-width: 560px; color: var(--sp-ink-soft) !important; }
.skel-split .sp-cta__body * { color: inherit !important; }
.skel-split .sp-cta__buttons.pub-cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin: 0; }
.skel-split .sp-cta .pub-btn:hover { background: transparent !important; color: var(--sp-ink) !important; }
.skel-split .pub-cta--center.sp-cta { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.skel-split .pub-cta--center.sp-cta h2 { max-width: 18ch; margin-inline: auto; }
.skel-split .pub-cta--center .sp-cta__kicker { justify-content: center; }
.skel-split .pub-cta--center .sp-cta__buttons { justify-content: center; }

/* ================================= */
/* 13. FOOTER                          */
/* ================================= */

.skel-split .sp-footer.pub-footer {
    --footer-text: var(--sp-on-deep);
    background: var(--sp-deep);
    color: var(--footer-text);
    padding: clamp(56px, 8vw, 104px) 0 24px;
    border-top: 0;
    border-radius: 0;
    margin: 0;
}
/* every footer text follows the footer colour (owner's choice or the deep
   band's light text) — skins colour these one by one */
.skel-split .sp-footer :is(.pub-footer-name, .pub-footer-col-title, .pub-footer-link, .pub-footer-tagline, .pub-footer-address, .pub-footer-custom-text, .pub-footer-custom-text p, .pub-footer-copy, .pub-footer-legal-link, .pub-powered, .pub-social-link) { color: inherit !important; }
.skel-split .sp-footer .pub-social-link { border-color: color-mix(in srgb, currentColor 30%, transparent) !important; }
.skel-split .sp-footer .pub-container { max-width: var(--sp-max); padding-left: var(--sp-gutter); padding-right: var(--sp-gutter); }
.skel-split .sp-footer__top { padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.skel-split .sp-footer__name-link { display: inline-block; text-decoration: none; color: inherit !important; }
.skel-split .sp-footer__name.pub-footer-name {
    display: block;
    text-transform: none;
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 9vw, 8.5rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: inherit;
    overflow-wrap: anywhere;
}
.skel-split .sp-footer__logo { max-height: 72px; width: auto; }
.skel-split .sp-footer .pub-footer-inner,
.skel-split .sp-footer .pub-footer-inner[class*="pub-footer-cols-"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.skel-split .sp-footer .pub-footer-inner > * {
    padding: clamp(24px, 3vw, 36px) clamp(16px, 2.4vw, 32px) clamp(24px, 3vw, 36px) 0;
    margin: 0;
    min-width: 0;
}
.skel-split .sp-footer .pub-footer-inner > * + * { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.skel-split .sp-footer .pub-footer-col-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 16px;
    opacity: 0.6;
    color: inherit;
}
.skel-split .sp-footer .pub-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.skel-split .sp-footer :is(.pub-footer-link, .pub-footer-tagline, .pub-footer-address, .pub-footer-custom-text p) { color: inherit; opacity: 0.85; text-decoration: none; font-size: 15px; line-height: 1.6; }
.skel-split .sp-footer .pub-footer-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.skel-split .sp-footer .pub-footer-tagline { font-family: var(--font-heading); font-size: 1.1rem; max-width: 320px; margin: 0 0 18px; }
.skel-split .sp-footer .pub-footer-bottom { border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); padding: 20px 0 0; margin: 0; background: none; }
.skel-split .sp-footer .pub-footer-bottom .pub-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 12px; letter-spacing: 0.06em; }
.skel-split .sp-footer :is(.pub-footer-copy, .pub-footer-legal-link, .pub-powered) { color: inherit; opacity: 0.78; font-size: 12px; }
.skel-split .sp-footer .pub-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.skel-split .sp-footer .pub-footer-legal-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: none; }

/* ================================= */
/* 14. TABLET                          */
/* ================================= */

@media (max-width: 1024px) {
    .skel-split .sp-spread,
    .skel-split :is(.pub-section-amenities, .pub-section-properties_list, .pub-section-image_grid) > .pub-container:has(> .pub-reveal:first-child > h2) { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
    .skel-split .sp-spread__head,
    .skel-split :is(.pub-section-amenities, .pub-section-properties_list, .pub-section-image_grid) > .pub-container:has(> .pub-reveal:first-child > h2) > :first-child { position: static; grid-row: auto; max-width: 640px; }
    .skel-split :is(.pub-section-amenities, .pub-section-properties_list, .pub-section-image_grid) > .pub-container:has(> .pub-reveal:first-child > h2) > :not(:first-child) { grid-column: 1; }
    .skel-split .sp-faq.pub-faq { grid-template-columns: minmax(0, 1fr); }
    .skel-split .sp-gallery-head .sp-spread__head { grid-template-columns: minmax(0, 1fr); }
    .skel-split .sp-gallery-head .sp-spread__head > .pub-section-subtitle { grid-column: 1; margin-top: 14px; }
}
@media (max-width: 900px) {
    body.skel-split #main-content .pub-section-hero .pub-hero.sp-hero,
    body.skel-split #main-content .pub-section-hero .pub-hero.sp-hero--media-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .skel-split .sp-hero .pub-hero-content h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
}

/* ================================= */
/* 15. PHONE                           */
/* ================================= */

@media (max-width: 768px) {
    .skel-split { --sp-gutter: 20px; }
    .skel-split .pub-section:not(.pub-section-hero) > .pub-container .pub-book-now { padding-left: 0; padding-right: 0; }
    .skel-split .pub-section:not(.pub-section-hero):not(.pub-page-hero) { padding: 52px 0; }

    /* hero: photo first (4:3), then the words — the owner's height can't
       stack two blocks, so on phones the photo takes the 4:3 frame */
    body.skel-split #main-content .pub-section-hero .pub-hero.sp-hero,
    body.skel-split #main-content .pub-section-hero .pub-hero.sp-hero--media-left {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "media" "text";
        min-height: 0 !important;
        height: auto !important;
    }
    /* explicit 4:3 height (width is the full screen): iPhone Safari can
       leave an aspect-ratio grid item with only an absolute photo inside
       at 0px tall, which hid the photo on phones */
    .skel-split .sp-hero__media { aspect-ratio: auto; height: 75vw; min-height: 0; }
    .skel-split .sp-hero--text-only .sp-hero__media { display: none; }
    .skel-split .sp-hero--framed .sp-hero__media { height: calc((100vw - 40px) * 0.75); }
    .skel-split .sp-hero__text,
    .skel-split .sp-hero--media-left .sp-hero__text {
        padding: 32px 20px 44px;
        /* the standard phone rule centres every hero; a magazine opener
           reads left — unless the owner chose a centred hero */
        --hero-text-align: left !important;
        --hero-justify: flex-start !important;
        --hero-align-items: flex-start !important;
    }
    .skel-split .sp-hero[style*="--hero-text-align:center"] .sp-hero__text {
        --hero-text-align: center !important;
        --hero-justify: center !important;
    }
    .skel-split .sp-hero .pub-hero-content h1[style*="text-align"],
    .skel-split .sp-hero .pub-hero-content p[style*="text-align"] { text-align: var(--hero-text-align) !important; }
    body.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child) .sp-hero__text { padding-top: 32px; }
    body.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child) .sp-hero__media { aspect-ratio: auto; min-height: calc(75vw + 58px); }
    body.skel-split.scroll-sticky-hero #main-content > .pub-section-hero:first-child .sp-hero__text { padding-bottom: calc(44px + min(var(--overlay-radius, 32px), 24px)); }
    .skel-split .sp-hero .pub-hero-content h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); margin-bottom: 18px; }
    .skel-split .sp-hero .pub-hero-badge { margin-bottom: 18px; }
    .skel-split .sp-hero .pub-hero-content > p:not(.sp-hero__note) { margin-bottom: 26px; }
    .skel-split .sp-hero .pub-hero-cta-group { flex-direction: column; align-items: stretch; }
    .skel-split .sp-hero .pub-hero-cta-group .pub-btn { width: 100%; }
    .skel-split .sp-hero .sp-hero__note { margin-top: 28px; max-width: none; }

    .skel-split .pub-section h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }

    /* about: text, then the photo pair */
    .skel-split .sp-about.pub-about,
    .skel-split .sp-about.pub-about--image-left { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .skel-split .sp-about.pub-about--image-left .pub-about-text { order: 0; }
    .skel-split .sp-about__photos > img { width: 86%; }
    .skel-split .sp-about__second { width: 46%; border-width: 6px; }

    /* rooms: photo then text, every row the same way round */
    .skel-split .sp-room.pub-room-card,
    .skel-split .sp-room:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px 0; }
    .skel-split .sp-room:nth-child(even) .sp-room__photo { order: 0; }
    .skel-split .sp-room__num { margin-bottom: 8px; }
    .skel-split .sp-room__foot { gap: 14px; }
    .skel-split .sp-room__foot .pub-btn-room { width: 100%; }

    /* features */
    .skel-split .sp-feature.pub-card { grid-template-columns: 40px minmax(0, 1fr); }
    .skel-split .sp-feature__media { grid-column: 2; grid-row: 2; width: 64px; }
    .skel-split .sp-feature__media.pub-card-image { width: 100%; aspect-ratio: 16 / 9; }
    .skel-split .sp-feature__num { font-size: 1.1rem; }

    /* gallery: 2 columns, first photo full width, odd remainder full width */
    .skel-split .sp-gallery.pub-gallery:not(.pub-gallery-masonry) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
    .skel-split .sp-gallery:not(.pub-gallery-masonry) .pub-gallery-item,
    .skel-split .sp-gallery:not(.pub-gallery-masonry) .pub-gallery-item:nth-last-child(-n + 2) { grid-column: span 1 !important; grid-row: span 1 !important; }
    .skel-split .sp-gallery:not(.pub-gallery-masonry) .pub-gallery-item:first-child { grid-column: 1 / -1 !important; grid-row: span 1 !important; }
    .skel-split .sp-gallery:not(.pub-gallery-masonry):has(> :last-child:nth-child(even)) .pub-gallery-item:last-child { grid-column: 1 / -1 !important; }
    .skel-split .sp-gallery.sp-gallery--filtered .pub-gallery-item:not(.album-hidden) { grid-column: span 1 !important; }

    .skel-split .sp-gallery.pub-gallery-masonry { columns: 2; }

    /* testimonials */
    .skel-split .sp-quotes.pub-testimonials { grid-template-columns: minmax(0, 1fr); }

    /* call to action */
    .skel-split .sp-cta.pub-cta { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .skel-split .sp-cta.pub-cta { padding: 56px 20px; }
    .skel-split .sp-cta p { text-transform: none; letter-spacing: 0; font-size: inherit; }
.skel-split .sp-cta h2 { font-size: clamp(2.2rem, 11vw, 3rem) !important; }
    .skel-split .sp-cta__buttons.pub-cta-buttons { justify-content: stretch; flex-direction: column; }
    .skel-split .sp-cta__buttons .pub-btn { width: 100%; }

    /* footer: name, then one column per block */
    .skel-split .sp-footer .pub-footer-inner,
    .skel-split .sp-footer .pub-footer-inner[class*="pub-footer-cols-"] { grid-template-columns: minmax(0, 1fr); }
    .skel-split .sp-footer .pub-footer-inner > *,
    .skel-split .sp-footer .pub-footer-inner > * + * { padding: 24px 0; border-left: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
    .skel-split .sp-footer .pub-footer-inner > :last-child { border-bottom: 0; }
    .skel-split .sp-footer :is(.pub-footer-inner, .pub-footer-inner > *, .pub-footer-links, .pub-footer-bottom .pub-container) { text-align: left; align-items: flex-start; justify-items: start; }
    .skel-split .sp-footer .pub-footer-bottom .pub-container { flex-direction: column; }
    /* the phone footer accordion (8+ links): one full-width row, no extra rule */
    .skel-split .sp-footer .ftr-collapsible { width: 100%; justify-self: stretch; }
    .skel-split .sp-footer .ftr-collapsible .pub-footer-col-title { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; opacity: 0.85; }
    .skel-split .sp-footer .ftr-collapsible .pub-footer-col-title.ftr-open { margin-bottom: 12px; }
    body.skel-split:has(.pub-sticky-cta) .sp-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 20px); }
}

/* ================================= */
/* 16. MOTION                          */
/* ================================= */

@media (prefers-reduced-motion: reduce) {
    .skel-split *,
    .skel-split *::before,
    .skel-split *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .skel-split .sp-room:hover .sp-room__photo img,
    .skel-split .sp-gallery .pub-gallery-item:hover img { transform: none; }
}

/* ================================= */
/* 16b. STANDARD SECTIONS, PALETTE-SAFE */
/* ================================= */
/* Room rows: skins colour room cards' text with fixed colours */
body.skel-split .sp-room .sp-room__name { color: var(--sp-ink) !important; }
body.skel-split .sp-room :is(.sp-room__desc, .sp-room__meta, .sp-room__meta li, .sp-room__price) { color: var(--sp-ink-soft) !important; }
body.skel-split .sp-room .sp-room__price strong { color: var(--sp-ink) !important; }
/* booking strip: the form box takes the page colours (Studio drew a dark slab) */
body.skel-split :is(.pub-book-now, .pub-book-now-inner) :is(p, label) { color: var(--sp-ink-soft) !important; }
body.skel-split .pub-book-now-form { background: transparent; border-color: var(--sp-rule); border-radius: 0; }
body.skel-split .pub-book-now-form :is(input, select) { background: var(--sp-paper) !important; color: var(--sp-ink) !important; border-color: var(--sp-rule-strong) !important; color-scheme: light dark; }
/* direct vs booking sites: white cards hid light text on dark palettes */
body.skel-split .pub-direct-ota__col {
    background: var(--sp-paper);
    color: var(--sp-ink);
    border: 1px solid var(--sp-rule-strong);
    border-radius: 0;
    box-shadow: none;
}
body.skel-split .pub-direct-ota__col--direct { background: var(--sp-btn); border-color: var(--sp-btn); color: var(--sp-on-btn); transform: none; }
body.skel-split .pub-direct-ota__col--direct :is(.pub-direct-ota__note, .pub-direct-ota__savings, .pub-direct-ota__label, .pub-direct-ota__price) { color: var(--sp-on-btn); }
body.skel-split .pub-direct-ota__ribbon { background: var(--sp-ink); color: var(--sp-paper); border-radius: 0; }
body.skel-split .pub-direct-ota__savings { color: var(--sp-accent-ink); }
body.skel-split .pub-direct-ota :is(.pub-direct-ota__headline, .pub-direct-ota__subheadline) { color: var(--sp-ink); }
/* inside a dark / accent band the ink turns light but --sp-paper stays the
   page colour: price columns, amenity tiles and property cards were light
   words on light boxes. There they become a faint tint of the band. */
body.skel-split .pub-section:is(.pub-section-dark, .pub-section-accent) :is(.pub-direct-ota__col:not(.pub-direct-ota__col--direct), .pub-amenity-item, .pub-property-card) { background: color-mix(in srgb, var(--sp-ink) 7%, transparent); }
body.skel-split .pub-section.pub-section-dark .pub-direct-ota__ribbon { color: var(--sp-deep); }
body.skel-split .pub-section.pub-section-accent .pub-direct-ota__ribbon { color: var(--sp-acc-band, var(--sp-accent)); }

/* Sticky "Book now" bar on phones: the frame's button colours (a skin
   coloured its words with the accent, unreadable on some palettes) */
body.skel-split .pub-sticky-cta { background: var(--sp-btn); color: var(--sp-on-btn); box-shadow: none; border-top: 1px solid var(--sp-rule); }
body.skel-split .pub-sticky-cta :is(.pub-sticky-cta__link, .pub-sticky-cta__label, .pub-sticky-cta__price) { color: var(--sp-on-btn) !important; }
body.skel-split .pub-sticky-cta__label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; }
/* contact, properties, carousel arrows, gallery captions under photos */
body.skel-split .pub-contact-channel { color: var(--sp-ink); }
body.skel-split .pub-contact-channel-info :is(strong, span) { color: var(--sp-ink); }
body.skel-split .pub-contact-channel-info span:last-child { color: var(--sp-ink-soft); }
body.skel-split .pub-contact-channel-icon { color: var(--sp-accent-ink); background: var(--sp-paper-2); }
body.skel-split .pub-contact-intro,
body.skel-split .pub-contact-optional { color: var(--sp-ink-soft) !important; }
body.skel-split .pub-property-card { background: var(--sp-paper); color: var(--sp-ink); border: 1px solid var(--sp-rule); border-radius: 0; box-shadow: none; }
body.skel-split .pub-property-card h3 { color: var(--sp-ink); }
body.skel-split .pub-property-type { background: var(--sp-paper-2); color: var(--sp-ink-soft); border-radius: 0; }
body.skel-split .pub-carousel-arrow { background: var(--sp-paper); color: var(--sp-ink); border: 1px solid var(--sp-rule-strong); box-shadow: none; }
body.skel-split .pub-gallery:not(.sp-gallery) .pub-gallery-caption { color: var(--sp-ink-soft); }
body.skel-split .pub-amenity-item { background: var(--sp-paper); border-color: var(--sp-rule); }
body.skel-split .pub-amenity-item span { color: var(--sp-ink); }
/* footer bottom line: skins dim it with a fixed white */
.skel-split .sp-footer .pub-footer-bottom,
.skel-split .sp-footer .pub-footer-bottom .pub-container { color: inherit !important; }

/* Check-in pages: checkin.css styles the card per template (a light card
   for Editorial / Black & White, a see-through dark card with white text
   for Studio). When the owner's palette goes the other way, the card is
   kept as an island in its designed tone so every step stays readable. */
body.skel-split.paper-dark:not(.tpl-studio) .checkin-card { color: #1f2937; color-scheme: light; }
body.skel-split.paper-dark:not(.tpl-studio) .checkin-card :is(label, .btn-secondary, h2, h3, strong) { color: #1f2937 !important; }
body.skel-split.paper-dark:not(.tpl-studio) .checkin-wrapper > :not(.checkin-card) { color: var(--sp-ink); }
body.skel-split .checkin-card .btn-primary { color: #fff !important; }
@supports (color: oklch(from red l c h)) {
    body.skel-split .checkin-card .btn-primary { color: oklch(from var(--primary, #2563eb) clamp(0, (0.6 - l) * 1000, 1) 0 0) !important; }
}
.tpl-studio.skel-split.paper-light .checkin-card :is(.checkin-step__title, h2, h3) { color: #f9fafb !important; }
.tpl-studio.skel-split.paper-light .checkin-card :is(.checkin-step__lede, p, small, .checkin-divider-text) { color: rgba(249, 250, 251, 0.72) !important; }
body.skel-split :is(.reviews-empty-text, .reviews-empty-title, .pub-checkin-note) { color: var(--sp-ink-soft) !important; }
/* closing call-to-action band on the reviews page: the frame's deep band */
body.skel-split .pub-section.pub-cta:not([style]) { background: var(--sp-deep); color: var(--sp-on-deep); }
body.skel-split .pub-section.pub-cta:not([style]) :is(h2, h3) { color: var(--sp-on-deep) !important; }
body.skel-split .pub-section.pub-cta:not([style]) p { color: var(--sp-on-deep-soft) !important; }
body.skel-split .pub-section.pub-cta:not([style]) .pub-btn { background: var(--sp-on-deep); border-color: var(--sp-on-deep); color: var(--sp-deep); }
/* Studio's check-in card is always dark (see the island below for light
   palettes): its title and small print are light */
.tpl-studio.skel-split .checkin-card :is(.checkin-step__title, h2, h3) { color: #f9fafb !important; }
.tpl-studio.skel-split .checkin-card :is(.checkin-step__lede, p, small, .checkin-divider-text) { color: rgba(249, 250, 251, 0.74) !important; }
body.skel-split .reviews-empty-title { color: var(--sp-ink) !important; }
body.skel-split .pub-skip-link { color: #fff !important; }
body.skel-split .guest-lang-switch { color: var(--sp-ink-soft); }
body.skel-split .guest-lang-switch :is(strong, a) { color: var(--sp-ink) !important; }
.tpl-studio.skel-split.paper-light .checkin-wrapper .guest-lang-switch,
.tpl-studio.skel-split.paper-light .checkin-wrapper .guest-lang-switch :is(strong, a) { color: #e5e7eb; }
.tpl-studio.skel-split.paper-light .checkin-wrapper {
    background: color-mix(in srgb, var(--primary, #3b82f6) 6%, #111118);
    color: #f3f4f6;
    padding: clamp(20px, 4vw, 40px);
    color-scheme: dark;
}

/* The shared menus the owner can pick instead (Split centre, Full-screen,
   Dock) keep the template's logo type — they drew a bold sans logo. An
   owner's own logo font still wins (inline style). */
body.skel-split :is(.pub-header, .pub-overlay-menu, .pub-dock-panel) .pub-logo-text {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
}
.tpl-blackwhite.skel-split :is(.pub-header, .pub-overlay-menu, .pub-dock-panel) .pub-logo-text { font-weight: 700; letter-spacing: -0.03em; }
/* Dock: its floating logo sits on page colour here (the words half of the
   split hero on a computer, the masthead on other pages), so it takes the
   ink colour and no dark scrim; on phones the hero photo comes first and
   the standard white-on-scrim logo stays. */
@media (min-width: 769px) {
    body.skel-split .pub-header.nav-dock:not(.scrolled)::before { display: none; }
    body.skel-split .pub-header.nav-dock:not(.scrolled) .pub-container :is(.pub-logo, .pub-logo-text),
    body.skel-split .pub-header.nav-dock:not(.scrolled) .pub-dock-burger { color: var(--sp-ink); text-shadow: none; }
}
body.skel-split:not(:has(#main-content > .pub-section-hero:first-child)) .pub-header.nav-dock:not(.scrolled)::before { display: none; }
body.skel-split:not(:has(#main-content > .pub-section-hero:first-child)) .pub-header.nav-dock:not(.scrolled) .pub-container :is(.pub-logo, .pub-logo-text),
body.skel-split:not(:has(#main-content > .pub-section-hero:first-child)) .pub-header.nav-dock:not(.scrolled) .pub-dock-burger { color: var(--sp-ink); text-shadow: none; }
body.skel-split .nav-dock ~ main .pub-section.pub-page-hero { padding-top: calc(var(--sp-nav-h) + clamp(48px, 6vw, 88px)) !important; }

/* ================================= */
/* 17. TEMPLATES ON THIS FRAME         */
/* ================================= */
/* The frame decides the layout; each template keeps its own voice
   (fonts and palette come from the theme). Only small, palette-safe
   touches here — no fixed colours. */

/* The skins' own colour sets are fixed (Studio: a dark canvas with white
   text; Black & White: white with near-black text). Inside the split frame
   they are re-pointed at the owner's palette, so every standard section,
   the check-in and review pages included, reads on any palette. */
.tpl-studio.skel-split {
    --stu-bg-carbon: var(--bg, #0a0a0f);
    --stu-bg-graphite: color-mix(in srgb, var(--bg, #0a0a0f) 95%, var(--text, #fff));
    --stu-bg-slate: color-mix(in srgb, var(--bg, #0a0a0f) 91%, var(--text, #fff));
    --stu-bg-charcoal: color-mix(in srgb, var(--bg, #0a0a0f) 86%, var(--text, #fff));
    --stu-bg-steel: color-mix(in srgb, var(--bg, #0a0a0f) 80%, var(--text, #fff));
    --stu-electric-dim: var(--primary, #3b82f6);
    --stu-coral-dim: var(--accent, #f97316);
    --stu-text: var(--text, #f9fafb);
    --stu-text-secondary: color-mix(in srgb, var(--text, #f9fafb) 88%, var(--bg, #0a0a0f));
    --stu-text-muted: var(--sp-ink-soft);
    --stu-text-dim: color-mix(in srgb, var(--text, #f9fafb) 60%, var(--bg, #0a0a0f));
    --stu-glass: color-mix(in srgb, var(--bg, #0a0a0f) 70%, transparent);
    --stu-glass-border: color-mix(in srgb, var(--text, #f9fafb) 10%, transparent);
    --stu-border: color-mix(in srgb, var(--text, #f9fafb) 10%, transparent);
}
.tpl-blackwhite.skel-split {
    --bw-bg: var(--bg, #fff);
    --bw-bg-alt: var(--sp-paper-2);
    --bw-bg-card: var(--sp-paper-2);
    --bw-border: var(--sp-rule);
    --bw-border-light: color-mix(in srgb, var(--text, #0a0a0a) 7%, transparent);
    --bw-text: var(--text, #0a0a0a);
    --bw-text-secondary: color-mix(in srgb, var(--text, #0a0a0a) 84%, var(--bg, #fff));
    --bw-text-muted: var(--sp-ink-soft);
    --bw-accent-deep: var(--sp-deep);
    --bw-accent-light: color-mix(in srgb, var(--primary, #7c3aed) 9%, transparent);
    --bw-accent-glow: color-mix(in srgb, var(--primary, #7c3aed) 16%, transparent);
}

/* Black & White: heavy tight headings, black buttons, violet pops (the
   square marker in every eyebrow, the current page in the menu). */
.tpl-blackwhite.skel-split {
    --sp-btn: var(--sp-ink);
    --sp-on-btn: var(--sp-paper);
}
.tpl-blackwhite.skel-split :is(.sp-hero .pub-hero-content h1, .pub-section h2, .pub-page-hero .pub-page-hero-title, .sp-footer__name.pub-footer-name, .sp-cta h2) {
    font-weight: 800 !important;
    letter-spacing: -0.045em;
}
.tpl-blackwhite.skel-split :is(.sp-room__name, .sp-feature .pub-card-title, .sp-faq__item summary, .sp-quote--lead .sp-quote__text) { font-weight: 700; letter-spacing: -0.02em; }
.tpl-blackwhite.skel-split .sp-eyebrow::after,
.tpl-blackwhite.skel-split .pub-section > .pub-container > .pub-reveal:first-child > .pub-section-tag::after {
    flex: 0 0 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--sp-accent);
}
.tpl-blackwhite.skel-split .sp-hero .pub-hero-badge::before { width: 8px; height: 8px; border-radius: 2px; background: var(--sp-accent); }
@media (min-width: 769px) { .tpl-blackwhite.skel-split .sp-header.pub-header .pub-nav > a.active { box-shadow: inset 0 -2px 0 var(--sp-accent); } }
.tpl-blackwhite.skel-split .pub-section-dark .pub-section-tag::after,
.tpl-blackwhite.skel-split .pub-section-accent .pub-section-tag::after { background: currentColor; }

/* Studio: the electric blue → coral line of the template on the eyebrow
   rules, the current menu link and the page-title lead. */
.tpl-studio.skel-split {
    --sp-studio-line: linear-gradient(90deg, var(--primary, #3b82f6), var(--accent, #f97316));
}
.tpl-studio.skel-split .sp-eyebrow::after,
.tpl-studio.skel-split .pub-section > .pub-container > .pub-reveal:first-child > .pub-section-tag::after,
.tpl-studio.skel-split .sp-hero .pub-hero-badge::before { background: var(--sp-studio-line); height: 2px; }
@media (min-width: 769px) { .tpl-studio.skel-split .sp-header.pub-header .pub-nav > a.active { box-shadow: none; background: var(--sp-studio-line) bottom / 100% 2px no-repeat; } }
.tpl-studio.skel-split .sp-hero .pub-hero-content h1,
.tpl-studio.skel-split .pub-page-hero .pub-page-hero-title { letter-spacing: -0.04em; }
.tpl-studio.skel-split .pub-section.pub-page-hero .pub-page-hero-inner::before { height: 2px; background: linear-gradient(to right, var(--primary, #3b82f6), var(--accent, #f97316) 120px, var(--sp-rule-strong) 120px); }
/* its CSS three-bar background burger doubled up with the menu's own
   drawn burger — keep just the menu's */
.tpl-blackwhite.skel-split .sp-header.pub-header .pub-nav-toggle {
    background: none;
    color: var(--burger-color, var(--nav-text, var(--sp-ink)));
}

/* Bold: the template's black blocks, heavy upper-case type and its
   signature colour (the owner's primary, used vivid — not forced dark):
   a thick bar under every title, solid buttons, the call-to-action band.
   The words half of the hero sits on the deep block. All colours come
   from the palette: the deep block is the primary taken almost to black,
   text on the primary is black or white, whichever reads. */
.tpl-bold.skel-split {
    --sp-bold: var(--primary, #2563eb);
    --sp-on-bold: #fff;
    --sp-btn: var(--sp-bold);
    --sp-on-btn: var(--sp-on-bold);
}
.tpl-bold.skel-split.paper-light { --sp-deep: color-mix(in srgb, var(--primary, #2563eb) 7%, #0b0b0d); }
@supports (color: oklch(from red l c h)) {
    .tpl-bold.skel-split { --sp-on-bold: oklch(from var(--primary, #2563eb) clamp(0, (0.58 - l) * 1000, 1) 0 0); }
    .tpl-bold.skel-split.paper-light { --sp-deep: oklch(from var(--primary, #2563eb) 0.17 min(c, 0.025) h); }
}
.tpl-bold.skel-split .pub-section:not(.pub-section-hero) .pub-btn:not(.pub-btn-ghost),
.tpl-bold.skel-split .sp-hero .pub-btn:not(.pub-btn-ghost),
.tpl-bold.skel-split .sp-room .pub-btn { font-weight: 800; }

/* heavy upper-case display type */
.tpl-bold.skel-split :is(.sp-hero .pub-hero-content h1, .pub-section h2, .pub-page-hero .pub-page-hero-title, .sp-footer__name.pub-footer-name, .sp-cta h2) {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.012em;
    overflow-wrap: break-word;
}
.tpl-bold.skel-split .sp-hero .pub-hero-content h1 { font-size: clamp(2.3rem, 4.8vw, 4.8rem); line-height: 1.02; hyphens: auto; }
.tpl-bold.skel-split .sp-hero--text-only .pub-hero-content h1 { font-size: clamp(2.5rem, 6vw, 5.6rem); }
.tpl-bold.skel-split .pub-section h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.08; }
.tpl-bold.skel-split .sp-cta h2 { font-size: clamp(2.1rem, 5vw, 4.4rem) !important; max-width: 16ch; }
.tpl-bold.skel-split .sp-footer__name.pub-footer-name { font-size: clamp(2.4rem, 7.5vw, 7rem); line-height: 0.98; }
.tpl-bold.skel-split .pub-page-hero .pub-page-hero-title { font-size: clamp(2.4rem, 6vw, 5.4rem) !important; }
.tpl-bold.skel-split :is(.sp-room__name, .sp-feature .pub-card-title, .sp-faq__item summary, .pub-card-title) {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.tpl-bold.skel-split .sp-quote--lead .sp-quote__text { font-weight: 700; }
.tpl-bold.skel-split :is(.sp-eyebrow, .pub-section-tag) { font-weight: 800; }
.tpl-bold.skel-split :is(.sp-eyebrow, .pub-section > .pub-container > .pub-reveal:first-child > .pub-section-tag)::before { font-weight: 900; }

/* the signature bar: thick, square, in the primary, under every title */
.tpl-bold.skel-split .pub-section:not(.pub-section-hero):not(.pub-section-cta_banner):not(.pub-section-book_now) h2::after,
.tpl-bold.skel-split .sp-hero .pub-hero-content h1::after {
    content: '';
    display: block !important;
    width: 56px;
    height: 5px;
    margin: 18px 0 0;
    border-radius: 0;
    opacity: 1;
    background: var(--sp-bold);
}
.tpl-bold.skel-split .sp-hero .pub-hero-content h1::after { width: 72px; height: 6px; margin-top: 24px; }
.tpl-bold.skel-split .sp-hero[style*="--hero-text-align:center"] .pub-hero-content h1::after,
.tpl-bold.skel-split .pub-section :is(.pub-section-header, .pub-cta)[style*="center"] h2::after,
.tpl-bold.skel-split .pub-section .text-center h2::after { margin-inline: auto; }
.tpl-bold.skel-split .sp-hero[style*="--hero-text-align:right"] .pub-hero-content h1::after { margin-left: auto; }
/* on the owner's accent / colour / photo bands the bar takes the text colour */
.tpl-bold.skel-split .pub-section:is(.pub-section-accent, .pub-section-light-text, .pub-section-bg-image, [style]) h2::after { background: currentColor !important; }

/* page titles (About, Rooms, Contact …): the masthead rule leads with a
   thick block of the primary */
body.tpl-bold.skel-split .pub-page-hero-inner::before {
    height: 6px;
    background: linear-gradient(var(--sp-bold), var(--sp-bold)) left top / 72px 6px no-repeat, linear-gradient(var(--sp-rule-strong), var(--sp-rule-strong)) left bottom / 100% 1px no-repeat;
}

/* the skin centres the titles of dark bands and feature cards — the
   frame keeps them left, in the title column */
.tpl-bold.skel-split :is(.pub-section-dark, .pub-section-feature_cards) .pub-section-header { text-align: left; }
.tpl-bold.skel-split .pub-section-book_now h2 { font-size: clamp(1.3rem, 2vw, 1.75rem) !important; }
.tpl-bold.skel-split .sp-room__price strong { font-weight: 900; }
/* the skin's heavy first line of the about text is a fixed near-black */
.tpl-bold.skel-split .pub-about-body::first-line { color: var(--sp-ink); }
/* the business name in the menu: heavy capitals (an owner's own logo font
   still wins, inline) */
body.tpl-bold.skel-split :is(.pub-header, .pub-overlay-menu, .pub-dock-panel) .pub-logo-text { font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; }
.tpl-bold.skel-split .sp-footer__name.pub-footer-name::after { content: ''; display: block; width: 72px; height: 6px; margin-top: 26px; background: var(--sp-bold); }

/* hero: the words on the deep block, the photo beside it */
.tpl-bold.skel-split .sp-hero:not(.sp-hero--text-only) .sp-hero__text { background: var(--sp-deep); }
.tpl-bold.skel-split .sp-hero:not(.sp-hero--text-only) .sp-hero__text {
    --sp-ink: var(--sp-on-deep);
    --sp-ink-soft: var(--sp-on-deep-soft);
    --sp-rule: var(--sp-on-deep-rule);
    --sp-rule-strong: rgba(246, 244, 239, 0.5);
    --sp-accent-ink: var(--sp-accent-light);
}
.tpl-bold.skel-split .pub-hero.sp-hero.hero-contained,
.tpl-bold.skel-split .hero-contained :is(.sp-hero__media, .pub-hero-overlay) { border-radius: 0; box-shadow: none; }
.tpl-bold.skel-split .sp-hero .pub-hero-badge::before { width: 28px; height: 4px; background: var(--sp-bold); }
@media (min-width: 769px) {
    /* menu over the hero: the logo sits on the deep words half */
    .tpl-bold.skel-split.nav-hero-transparent:has(#main-content > .pub-section-hero:first-child .sp-hero:not(.sp-hero--media-left):not(.sp-hero--text-only)) .sp-header.pub-nav-hero-transparent:not(.pub-nav-scrolled) :is(.pub-logo, .pub-logo-text) { --sp-ink: var(--sp-on-deep); }
    /* the current page: a thick bar in the primary */
    .tpl-bold.skel-split .sp-header.pub-header .pub-nav > a.active { box-shadow: inset 0 -3px 0 var(--sp-bold); }
}

/* call to action: a solid block of the primary, the button inverted */
.tpl-bold.skel-split .pub-section.pub-section-cta_banner:not([style]):not(.pub-section-accent):not(.pub-section-alt):not(.pub-section-dark) { background: var(--sp-bold); }
.tpl-bold.skel-split .pub-section-cta_banner:not([style]):not(.pub-section-accent):not(.pub-section-alt):not(.pub-section-dark) .sp-cta {
    --sp-ink: var(--sp-on-bold);
    --sp-ink-soft: var(--sp-on-bold);
    --sp-rule: color-mix(in srgb, var(--sp-on-bold) 22%, transparent);
    --sp-rule-strong: color-mix(in srgb, var(--sp-on-bold) 60%, transparent);
    --sp-accent-ink: var(--sp-on-bold);
    --sp-btn: var(--sp-on-bold);
    --sp-on-btn: var(--sp-bold);
    color: var(--sp-on-bold);
}

/* rooms: a thick primary edge under each photo */
body.tpl-bold.skel-split .sp-room__photo::after {
    display: block !important;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 5px;
    background: var(--sp-bold);
    pointer-events: none;
}

/* Bold's phone menu continues the menu bar (black by default, or the
   owner's menu / phone-menu colour): the panel takes that colour and its
   text whichever of black or white reads on it (nav_styles.css
   --ns-panel-on); the current page gets a thick primary bar. */
@media (max-width: 768px) {
    body.tpl-bold.skel-split .sp-header.pub-header > .pub-container > .pub-nav.open { background: var(--mobile-nav-bg, var(--nav-bg-opaque, var(--sp-deep))) !important; }
    body.tpl-bold.skel-split .sp-header.pub-header .pub-nav {
        --sp-ink: var(--ns-panel-on, var(--sp-on-deep));
        --sp-ink-soft: color-mix(in srgb, var(--ns-panel-on, var(--sp-on-deep)) 74%, transparent);
        --sp-rule: color-mix(in srgb, var(--ns-panel-on, var(--sp-on-deep)) 16%, transparent);
        --sp-accent-ink: var(--ns-panel-on, var(--sp-on-deep));
    }
    body.tpl-bold.skel-split .sp-header.pub-header .pub-nav > :is(a, .pub-nav-dropdown > .pub-nav-dropdown-trigger) { font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 28px; }
    body.tpl-bold.skel-split .sp-header.pub-header .pub-nav > a.active { box-shadow: inset 6px 0 0 var(--sp-bold); padding-left: 18px; }
    body.tpl-bold.skel-split .sp-header.pub-header .pub-nav .sp-nav-book { font-size: 13px !important; font-weight: 800; letter-spacing: 0.18em !important; border: 0 !important; }
    body.tpl-bold.skel-split .sp-header.pub-header .pub-nav-admin-btn { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; }
    html.sp-menu-open body.tpl-bold.skel-split .sp-header :is(.pub-logo, .pub-logo-text, .pub-nav-toggle) { color: var(--ns-panel-on, var(--sp-on-deep)) !important; }
}