/* ==========================================================================
   Some Tuesday — shared styles
   Tokens mirror the live Shopify theme: white ground, near-black ink,
   Jost for body copy, Poppins for headings, KnightBrushDemo for the wordmark.
   ========================================================================== */

:root {
    --bg: #ffffff;
    --ink: #1c1d1d;
    --ink-dim: rgba(28, 29, 29, 0.62);
    --border: #e8e8e1;
    --dim: #f6f6f6;
    --dark: #111111;
    --on-dark: #ffffff;

    --shell: 1240px;
    --shell-narrow: 760px;

    --body-font: 'Jost', system-ui, -apple-system, sans-serif;
    --head-font: 'Poppins', system-ui, sans-serif;
    --script-font: 'KnightBrushDemo', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
    font-family: 'KnightBrushDemo';
    src: url('../fonts/Knight%20Brush%20Demo.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--body-font);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.025em;
    background: var(--bg);
    color: var(--ink);
}

h1, h2, h3, h4 {
    font-family: var(--head-font);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
}

h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }

p + p, .prose > * + * { margin-top: 1.1em; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell.narrow, .narrow { max-width: var(--shell-narrow); margin-left: auto; margin-right: auto; }
.center { text-align: center; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    background: #fff; color: var(--ink); padding: 12px 20px; font-weight: 500;
}
.skip-link:focus { left: 0; }

/* --- Header ------------------------------------------------------------- */

.site-header {
    position: sticky; top: 0; z-index: 200;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
}

.wordmark {
    font-family: var(--script-font);
    font-size: 2.3rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.site-header nav ul {
    list-style: none;
    display: flex; flex-wrap: wrap; justify-content: flex-end;
    gap: 2px 4px;
}

.site-header nav a {
    display: block;
    text-decoration: none;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 8px 10px;
    color: var(--ink);
    border-bottom: 2px solid transparent;
}

.site-header nav a:hover { border-bottom-color: var(--ink); }
.site-header nav a[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 500; }

.nav-toggle {
    display: none;
    background: none; border: 0; cursor: pointer;
    font-size: 1.4rem; color: var(--ink); padding: 8px;
}

/* --- Hero -------------------------------------------------------------- */

/* The boat is a portrait subject in a landscape frame: the mast makes it
   549x795 in the source photograph, so any frame wide enough to read as a hero
   has to carry open water at the sides. `background-size: cover` bought that
   width by cropping the top and bottom instead, which is what kept taking the
   masthead and the waterline out of shot at some viewport or other.

   So the photograph is not a background any more. It is an <img> laid out in
   normal flow with `object-fit: contain` — a combination that cannot crop at
   any container size, rather than one that merely happens not to at the sizes
   that were measured. The section is exactly as tall as the photograph, and
   the type is overlaid by sharing a single grid cell with it. */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    background: var(--dark);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

/* Photograph, scrim and type all occupy the one cell, stacked by z-index. */
.hero-media,
.hero::after,
.hero-inner { grid-area: 1 / 1; }

.hero-media { z-index: 0; display: block; }

.hero-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 86vh;
    object-fit: contain;
    aspect-ratio: 1781 / 856;
}

/* Three art-directed crops of the same photograph: a phone gets a square
   frame, a desktop a cinematic one. Each was measured to hold the whole boat
   with clear water on all four sides. The ratios below must match the files
   the <picture> element serves at the same widths, or the frame will letterbox
   onto the dark ground — visible, but still never cropped. */
@media (max-width: 1024px) {
    .hero-media img { aspect-ratio: 1284 / 856; }
}
@media (max-width: 600px) {
    .hero-media img { aspect-ratio: 1 / 1; }
}

/* Scrim, weighted to the top where the type sits and left almost clear across
   the middle so the lagoon keeps its colour — a flat wash over the whole frame
   greys the photograph out. Tinted rather than neutral black, and closing dark
   at the foot so the frame hands off to the band below.

   The top stop is heavier than the old photograph needed: this water measures
   a mean luminance of 93/255 behind the type, which leaves white at only
   2.6:1 unscrimmed. At 0.62 it clears 4.5:1. */
.hero::after {
    content: '';
    z-index: 1;
    background: linear-gradient(to bottom,
        rgba(3, 27, 33, 0.62) 0%,
        rgba(3, 27, 33, 0.34) 22%,
        rgba(3, 27, 33, 0.07) 46%,
        rgba(3, 27, 33, 0.12) 70%,
        rgba(3, 27, 33, 0.46) 100%);
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.34em;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.9);
}

/* The lagoon throws specular highlights the scrim does not fully cover, so the
   two smaller lines carry a shadow of their own. */
.hero .hero-eyebrow,
.hero .hero-sub { text-shadow: 0 1px 12px rgba(0, 20, 26, 0.55); }

.hero-title {
    font-family: var(--script-font);
    font-weight: 400;
    font-size: clamp(3.4rem, 13vw, 7.5rem);
    line-height: 1;
    margin: 10px 0 4px;
    text-shadow: 0 3px 26px rgba(0, 0, 0, 0.35);
}

.hero-sub {
    font-size: clamp(1rem, 2.4vw, 1.3rem);
    letter-spacing: 0.06em;
}

.hero-inner {
    z-index: 2;
    align-self: start;
    justify-self: center;
    max-width: 900px;
    padding: clamp(44px, 9vh, 104px) 24px clamp(40px, 7vh, 76px);
}

.hero .btn { margin-top: 28px; }

/* One quiet reveal on arrival. Anything busier competes with the photograph. */
.hero .hero-inner > * {
    animation: hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero .hero-inner > :nth-child(1) { animation-delay: 0.06s; }
.hero .hero-inner > :nth-child(2) { animation-delay: 0.18s; }
.hero .hero-inner > :nth-child(3) { animation-delay: 0.32s; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* --- Page heads -------------------------------------------------------- */

.page-head {
    border-bottom: 1px solid var(--border);
    padding: 54px 24px 34px;
    text-align: center;
}

/* --- Prose ------------------------------------------------------------- */

.prose { padding-top: 44px; padding-bottom: 64px; max-width: 820px; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose .lead { font-size: 1.15rem; color: var(--ink-dim); }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }

.inline-img { margin: 34px 0; }
.inline-img img { width: 100%; border-radius: 2px; }
.inline-img figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--ink-dim);
    text-align: center;
}

/* Visible stand-in for a photo the owners have not supplied yet. */
.img-placeholder-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 3 / 2;
    border: 2px dashed var(--border);
    border-radius: 2px;
    background: var(--dim);
    color: var(--ink-dim);
    text-align: center;
    padding: 20px;
}
.img-placeholder-icon { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1; }
.img-placeholder-text {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --- Feature rows ------------------------------------------------------ */

.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    padding: clamp(46px, 7vw, 86px) 0;
    border-bottom: 1px solid var(--border);
}

.feature:last-child { border-bottom: 0; }
.feature.reverse .feature-media { order: 2; }
.feature.reverse .feature-body { order: 1; }

.feature-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Wide art — a map, say — that must not be cropped to 4:3. */
.feature-media.media-wide img { aspect-ratio: 16 / 9; }

.feature-body h2 { margin-bottom: 0.5em; }
.feature-body .btn { margin-top: 26px; }

/* --- Bands ------------------------------------------------------------- */

.band { padding: clamp(52px, 8vw, 92px) 0; background: var(--dim); }
.band.dark { background: var(--dark); color: var(--on-dark); }
.band.dark a { color: var(--on-dark); }

/* A band carrying only a heading and one row of controls; the full measure of
   padding leaves it stranded in empty space. */
.band.tight { padding: clamp(38px, 5.5vw, 60px) 0; }

.section-title { text-align: center; margin-bottom: 44px; }

/* Sets a run of feature rows apart from the section that follows it, matching
   the hairline the rows themselves are divided by. */
.section-block {
    border-top: 1px solid var(--border);
    padding-top: clamp(46px, 7vw, 82px);
}

/* --- Buttons ----------------------------------------------------------- */

.btn {
    display: inline-block;
    background: var(--dark);
    color: #fff;
    text-decoration: none;
    font-family: var(--body-font);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 15px 32px;
    border: 1px solid var(--dark);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.btn:hover { background: #fff; color: var(--dark); }

.btn-light { background: #fff; color: var(--dark); border-color: #fff; }
.btn-light:hover { background: transparent; color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* Outlined button for use over photography. */
.btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.btn-outline:hover { background: #fff; color: var(--dark); border-color: #fff; }

/* --- Social ------------------------------------------------------------ */

.social { display: flex; flex-wrap: wrap; gap: 14px; }
.social a {
    display: inline-flex; align-items: center; gap: 9px;
    text-decoration: none; font-size: 1.05rem;
}
.social a:hover { text-decoration: underline; }
.social-lg { justify-content: center; margin-top: 30px; font-size: 1.1rem; }
.social-lg i { font-size: 1.3rem; }

/* One row, always. A fixed track count keeps the six channels evenly spaced
   and stops the last one being orphaned onto a second line, which is what made
   this block so tall. Outlined rather than filled discs so the row reads as a
   quiet index instead of a wall of buttons. */
.social-tiles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    max-width: 664px;
    margin: 30px auto 0;
}
.social-tiles a {
    flex-direction: column;
    gap: 9px;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
}
.social-tiles a:hover { text-decoration: none; }
.social-tiles span { white-space: nowrap; }
.social-tiles i {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    border-radius: 50%;
    border: 1px solid rgba(28, 29, 29, 0.22);
    transition: background-color 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.3s ease;
}
.social-tiles a:hover i {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    transform: translateY(-4px);
}

/* Same row inverted for a dark band. */
.band.dark .social-tiles i { border-color: rgba(255, 255, 255, 0.32); }
.band.dark .social-tiles a:hover i {
    background: #fff;
    border-color: #fff;
    color: var(--dark);
}

/* --- Grids: photos, posts ---------------------------------------------- */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    padding: 44px 0 64px;
}

.tile { display: block; overflow: hidden; background: var(--dim); }
.tile img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    transition: transform 0.4s ease;
}
.tile:hover img { transform: scale(1.04); }

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 34px;
    padding: 10px 0 0;
}

.post { text-decoration: none; display: block; }
.post img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
    background: var(--dim); margin-bottom: 16px;
}
.post h3 { font-size: 1.05rem; font-weight: 400; }
.post img { transition: opacity 0.4s ease; }
.post:hover img { opacity: 0.86; }
.post:hover h3 { text-decoration: underline; }
.post-date { color: var(--ink-dim); font-size: 0.86rem; margin-top: 4px; }
.page-head .post-date { margin-top: 10px; }

.post-grid { padding-bottom: 34px; }

/* --- Forms ------------------------------------------------------------- */

.form { margin: 34px 0 56px; max-width: 640px; }
.field { margin-bottom: 22px; }
.field label {
    display: block;
    font-family: var(--head-font);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    margin-bottom: 8px;
}
.field input,
.field textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: #fff;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 2px;
}
.field input:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
    border-color: var(--ink);
}
.field textarea { resize: vertical; }
.form .btn { cursor: pointer; }

/* --- Route page -------------------------------------------------------- */

.stops { list-style: none; padding-left: 0; counter-reset: stop; }
.stops li {
    border-left: 2px solid var(--border);
    padding: 4px 0 22px 26px;
    position: relative;
}
.stops li::before {
    content: ''; position: absolute; left: -6px; top: 12px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ink);
}
.stops h3 { font-size: 1.1rem; }

.float-plan { width: 100%; border-collapse: collapse; margin-top: 1em; }
.float-plan th, .float-plan td {
    text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--border);
}
.float-plan th { font-family: var(--head-font); font-weight: 500; }

/* --- Video ------------------------------------------------------------- */

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 32px 0;
    background: #000;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
    background: var(--dark);
    color: var(--on-dark);
    padding: 68px 24px 34px;
    margin-top: 0;
}

.foot-logo {
    display: block;
    width: max-content;
    margin: 0 auto 46px;
}
.foot-logo img { display: block; width: 260px; height: auto; }

.foot-grid {
    max-width: var(--shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 44px;
}

.site-footer h2 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
}

.foot-links { list-style: none; }
.foot-links li + li { margin-top: 0.55em; }
.foot-links a { text-decoration: none; color: rgba(255, 255, 255, 0.78); }
.foot-links a:hover { color: #fff; text-decoration: underline; }

.site-footer .social { margin-top: 20px; font-size: 1.4rem; }

.copyright {
    max-width: var(--shell);
    margin: 52px auto 0;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1080px) {
    .site-header nav a { font-size: 0.74rem; padding: 7px 7px; letter-spacing: 0.06em; }
    .wordmark { font-size: 1.9rem; }
}

@media (max-width: 860px) {
    .nav-toggle { display: block; }

    /* Collapsed menu needs JS; without it the nav simply stays open. */
    .has-js .site-header nav { display: none; }
    .has-js .site-header nav.is-open { display: block; }

    .site-header {
        flex-wrap: wrap;
        padding: 12px 18px;
    }

    .site-header nav {
        flex-basis: 100%;
        border-top: 1px solid var(--border);
        margin-top: 10px;
        padding-top: 10px;
    }

    .site-header nav ul { flex-direction: column; justify-content: flex-start; }
    .site-header nav a { padding: 11px 2px; font-size: 0.9rem; }

    .feature { grid-template-columns: 1fr; }
    /* Image first on every stacked row, so the order reads consistently. */
    .feature.reverse .feature-media { order: 1; }
    .feature.reverse .feature-body { order: 2; }

    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    /* Two rows of three is the widest arrangement that still leaves the
       longest label on a single line at this measure. */
    .social-tiles { grid-template-columns: repeat(3, 1fr); gap: 22px 12px; max-width: 300px; }
    .social-tiles a { font-size: 0.72rem; }
    .social-tiles i { width: 44px; height: 44px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
    .tile:hover img { transform: none; }
    .social-tiles a:hover i { transform: none; }
}

@media print {
    .site-header, .hero, .site-footer, .video, .foot-logo { display: none; }
    body { font-size: 12pt; }
}


/* ==========================================================================
   Ranch listing page — hero, facts, highlights, masonry gallery, CTAs.
   Reuses the site tokens; nothing here is used by the sailing pages.
   ========================================================================== */

.listing-hero {
    position: relative;
    color: #fff;
    min-height: clamp(440px, 72vh, 660px);
    display: flex; align-items: flex-end;
    background: var(--dark) center / cover no-repeat;
    overflow: hidden;
}

/* The photo sits in an <img> rather than a background so it can be
   eager-loaded and given a proper alt for screen readers. */
.listing-hero > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.listing-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0.78) 100%);
}

.listing-hero-inner {
    position: relative; z-index: 1;
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(46px, 9vw, 84px) 24px clamp(34px, 5vw, 52px);
}

.listing-hero .hero-eyebrow { margin-bottom: 6px; }

.listing-hero-title {
    font-family: var(--script-font);
    font-weight: 400;
    font-size: clamp(3rem, 10vw, 6rem);
    line-height: 0.95;
    text-shadow: 0 3px 30px rgba(0, 0, 0, 0.4);
}

.listing-hero-sub {
    font-size: clamp(1.02rem, 2.1vw, 1.28rem);
    max-width: 30em;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.92);
}

.hero-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px;
    margin-top: 30px;
}

/* --- Rating pill -------------------------------------------------------- */

.rating-pill {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    /* Safari 17 and earlier only support the prefixed form. */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: rgba(0, 0, 0, 0.2);
}

.rating-pill i { font-size: 0.78rem; }

/* --- Facts strip -------------------------------------------------------- */

.fact-strip {
    border-bottom: 1px solid var(--border);
    background: var(--dim);
}

.fact-strip-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 20px 24px;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px clamp(18px, 3vw, 38px);
}

.fact-list {
    list-style: none;
    display: flex; flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 0.95rem;
}

.fact-list li { display: inline-flex; align-items: center; gap: 9px; }
.fact-list i { color: var(--ink-dim); font-size: 0.92rem; width: 1.1em; text-align: center; }
.fact-strip .btn { margin-left: auto; }

/* --- Highlight cards ---------------------------------------------------- */

.hl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(18px, 2.6vw, 30px);
}

.hl {
    border: 1px solid var(--border);
    padding: 26px 24px 28px;
    background: #fff;
}

.hl i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 14px;
}

.hl h3 { font-size: 1.06rem; margin-bottom: 0.45em; }
.hl p { font-size: 0.94rem; color: var(--ink-dim); line-height: 1.55; }

/* --- Masonry photo gallery --------------------------------------------- */

.gallery-group + .gallery-group { margin-top: clamp(38px, 5vw, 58px); }

.gallery-group h3 {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    color: var(--ink-dim);
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.masonry { columns: 3; column-gap: 14px; }

/* Each shot links to the full-resolution file; the grid only ever loads
   the ~640px thumbnail. */
.shot {
    display: block;
    position: relative;
    break-inside: avoid;
    margin: 0 0 14px;
    overflow: hidden;
    background: var(--dim);
    text-decoration: none;
    color: #fff;
}

.shot img {
    width: 100%; height: auto;
    transition: transform 0.5s ease;
}

.shot:hover img, .shot:focus-visible img { transform: scale(1.035); }

.shot-cap {
    position: absolute; inset: auto 0 0 0;
    padding: 34px 14px 12px;
    font-size: 0.84rem;
    line-height: 1.4;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.shot::after {
    content: "\f065"; /* expand */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.74rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.shot:hover::after, .shot:focus-visible::after { opacity: 1; }

.gallery-note {
    font-size: 0.86rem;
    color: var(--ink-dim);
    margin-bottom: 30px;
}

/* --- Amenities ---------------------------------------------------------- */

.amenity-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(24px, 3vw, 44px);
}

.amenity-cols h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 500;
    margin-bottom: 14px;
}

.amenity-cols ul { list-style: none; }
.amenity-cols li {
    display: flex; gap: 10px;
    font-size: 0.95rem;
    padding: 5px 0;
    color: var(--ink-dim);
}
.amenity-cols li i { color: var(--ink); font-size: 0.78rem; margin-top: 0.45em; }
.amenity-cols li.absent { text-decoration: line-through; opacity: 0.65; }

/* --- Sleeping arrangements & info cards -------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 2.4vw, 26px);
}

.card {
    border: 1px solid var(--border);
    padding: 22px 22px 24px;
}

.card i { font-size: 1.25rem; display: block; margin-bottom: 12px; color: var(--ink-dim); }
.card h3 { font-size: 1rem; margin-bottom: 0.4em; }
.card p, .card ul { font-size: 0.93rem; color: var(--ink-dim); line-height: 1.55; }
.card ul { list-style: none; }
.card li + li { margin-top: 0.35em; }

/* --- Distances ---------------------------------------------------------- */

.distance-list { list-style: none; }
.distance-list li {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.97rem;
}
.distance-list li:last-child { border-bottom: 0; }
.distance-list span { color: var(--ink-dim); white-space: nowrap; }

/* --- Closing CTA -------------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band p { max-width: 46em; margin: 0 auto; color: rgba(255, 255, 255, 0.76); }
.cta-band .btn { margin-top: 30px; }
.cta-fine {
    display: block;
    margin-top: 22px;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
}

/* --- Mobile booking bar ------------------------------------------------- */

/* On narrow screens the hero CTA scrolls away almost immediately, so it is
   mirrored in a fixed bar. Hidden on wider screens where the page CTAs are
   always within reach. */
.book-bar { display: none; }

@media (max-width: 720px) {
    .book-bar {
        display: block;
        position: fixed; inset: auto 0 0 0; z-index: 190;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--border);
    }
    .book-bar .btn { display: block; text-align: center; }
    /* Keep the footer clear of the fixed bar. */
    body.has-book-bar .site-footer { padding-bottom: 96px; }
}

@media (max-width: 980px) {
    .masonry { columns: 2; }
}

@media (max-width: 860px) {
    .fact-strip .btn { margin-left: 0; }
    .fact-list { gap: 8px 18px; font-size: 0.9rem; }
}

@media (max-width: 520px) {
    .masonry { columns: 1; }
    .shot-cap { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .shot:hover img, .shot:focus-visible img { transform: none; }
}

@media print {
    .listing-hero, .book-bar, .fact-strip { display: none; }
    .masonry { columns: 2; }
}

/* Vertical rhythm for the listing page's plain (unbanded) sections. */
.section-pad { padding-top: clamp(52px, 8vw, 92px); }
.section-pad-sm { padding-bottom: clamp(20px, 4vw, 40px); }
.section-title-tight { margin-bottom: 14px; }
.band-top { margin-top: clamp(52px, 8vw, 92px); }
.note-foot { margin-top: 34px; margin-bottom: 0; }
.distance-list { margin-top: 24px; }

/* `.band.dark a` is more specific than `.btn-light`, which would otherwise
   leave the closing CTA as white text on a white button. */
.band.dark .btn-light { color: var(--dark); }
.band.dark .btn-light:hover { color: #fff; }