/* A photographic collection, continuing the home's charcoal, paper and gold palette. */
#main-content > .properties { height: auto; min-height: 100vh; overflow: visible; padding-block: calc(var(--nav-height) + 40px) 64px; background: var(--color-black); color: var(--color-paper); scroll-snap-stop: normal; }
.properties-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 48px; }
.properties .eyebrow { color: var(--color-primary); margin-bottom: 22px; font-size: 13px; }
.properties h2 { font-size: clamp(38px, 4.5vw, 70px); line-height: 1.15; letter-spacing: -.035em; }
.properties h2 em { color: var(--color-primary); }
.properties-heading > p { max-width: 360px; font-size: 16px; color: #bdc2b9; line-height: 1.85; padding-bottom: 6px; }
.property-search { display: flex; align-items: center; gap: 18px; min-height: 76px; border-top: 1px solid #707568; border-bottom: 1px solid #707568; }
.property-search > svg { flex: 0 0 23px; width: 23px; height: 23px; color: var(--color-primary); }
.property-search input { width: 100%; min-width: 0; min-height: 58px; border: 0; border-radius: 0; background: transparent; color: var(--color-paper); font-size: 16px; }
.property-search input::placeholder { color: #b6bcb2; opacity: 1; }
.property-search input:focus-visible { outline-offset: 0; box-shadow: none; }
.property-search button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 46px; padding: 10px 0 10px 28px; background: none; border: 0; border-left: 1px solid #707568; color: var(--color-primary-light); font-size: 14px; }
.properties .arrow { width: 20px; height: 20px; }
.property-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin: 22px 0 48px; }
#property-count { font-size: 13px; color: #b6bcb2; font-variant-numeric: tabular-nums; }
.property-gallery { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: start; column-gap: clamp(24px, 3.2vw, 52px); row-gap: 64px; }
.property-card { min-width: 0; }
.property-card:nth-child(1) { grid-column: 1 / 8; }
.property-card:nth-child(2) { grid-column: 9 / 13; padding-top: 100px; }
.property-card:nth-child(3) { grid-column: 1 / 5; padding-top: 12px; }
.property-card:nth-child(4) { grid-column: 6 / 13; padding-top: 62px; }
.property-image { position: relative; overflow: hidden; background: #303930; }
.property-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0004 0%, transparent 25%, transparent 65%, #0008 100%); pointer-events: none; }
.property-image img { width: 100%; height: 100%; aspect-ratio: 1.2; object-fit: cover; transition: transform 800ms cubic-bezier(.2,.7,.3,1); }
.property-card:nth-child(2) img { aspect-ratio: .77; }
.property-card:nth-child(3) img { aspect-ratio: .96; }
.property-card:nth-child(4) img { aspect-ratio: 1.45; }
.property-card:hover img { transform: scale(1.025); }
.property-number { position: absolute; z-index: 1; top: 22px; left: 24px; color: white; font-family: var(--serif-font-family); font-style: italic; font-size: 22px; }
.property-image-label { position: absolute; z-index: 1; bottom: 22px; left: 24px; right: 20px; color: white; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.property-card figcaption { padding: 23px 0 0; }
.property-location { text-transform: uppercase; font-size: 12px; letter-spacing: .14em; color: var(--color-primary-light); margin-bottom: 9px; }
.property-card h3 { font-size: clamp(28px, 2.8vw, 43px); letter-spacing: -.025em; line-height: 1.2; }
.property-details { font-size: 14px; color: #b6bcb2; margin-top: 12px; }
.property-details span { padding-inline: 8px; color: var(--color-primary); }
.property-gallery.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
.property-gallery.is-filtered .property-card { grid-column: auto; padding-top: 0; }
.property-gallery.is-filtered img { aspect-ratio: 1.3; }
.property-empty { padding: 72px 0 100px; text-align: center; color: #bdc2b9; }
.property-empty-title { font-family: var(--serif-font-family); font-size: clamp(30px, 4vw, 48px); color: var(--color-paper); margin-bottom: 16px; }
.property-reset { display: inline-flex; align-items: center; gap: 18px; margin-top: 24px; min-height: 44px; background: none; color: var(--color-primary-light); border: 0; border-bottom: 1px solid var(--color-primary); font-size: 14px; }
.properties-footer { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 20px; margin-top: 76px; padding-top: 26px; border-top: 1px solid #52594f; font-size: 12px; color: #b6bcb2; }
.properties-footer > span { font-family: var(--serif-font-family); font-style: italic; color: var(--color-primary-light); font-size: 18px; }
@media (max-width: 1000px) {
    .properties-heading { flex-direction: column; align-items: flex-start; gap: 24px; }
    .properties-heading > p { max-width: 520px; }
    .properties-desktop-break { display: none; }
    .property-card:nth-child(2) { grid-column: 8 / 13; padding-top: 80px; }
    .property-card:nth-child(3) { grid-column: 1 / 6; }
    .property-card:nth-child(4) { grid-column: 6 / 13; }
}
@media (max-width: 600px) {
    #main-content > .properties { padding-top: calc(var(--nav-height) + 32px); padding-bottom: 40px; }
    .properties-heading { margin-bottom: 32px; }
    .properties h2 { font-size: clamp(33px, 8.7vw, 48px); }
    .property-search { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
    .property-search input { flex: 1; width: auto; }
    .property-search button { width: 100%; justify-content: space-between; padding: 10px 0; border-left: 0; border-top: 1px solid #52594f; }
    .property-toolbar { gap: 12px; margin-bottom: 32px; }
    .property-gallery, .property-gallery.is-filtered { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
    .property-gallery .property-card { grid-column: auto; padding-top: 0; }
    .property-gallery .property-card img { aspect-ratio: 1.1; }
    .property-gallery:not(.is-filtered) .property-card:nth-child(2) { padding-left: 28px; }
    .property-gallery:not(.is-filtered) .property-card:nth-child(3) { padding-right: 28px; }
    .property-gallery:not(.is-filtered) .property-card:nth-child(2) img { aspect-ratio: .9; }
    .property-image-label { left: 18px; bottom: 18px; font-size: 12px; letter-spacing: .08em; }
    .property-number { left: 18px; top: 18px; }
    .property-location { letter-spacing: .09em; }
    .properties-footer { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) { .property-image img { transition: none; } .property-card:hover img { transform: none; } }

/* Keep the entire collection in one viewport, beneath the fixed navigation. */
#main-content > .properties {
    height: 100vh;
    min-height: 0;
    max-height: 100vh;
    padding-block: calc(var(--nav-height) + 16px) 20px;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
#main-content > .properties > .container {
    height: 100%;
    min-height: 0;
    margin-block: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
}
.properties-heading { margin: 0 0 8px; gap: 30px; flex-direction: row; align-items: flex-end; }
.properties .eyebrow { margin-bottom: 8px; }
.properties h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.12; }
.properties-heading > p { font-size: 14px; line-height: 1.65; padding: 0; }
.property-search { min-height: 48px; gap: 16px; }
.property-search input { min-height: 44px; }
.property-search button { min-height: 44px; padding-block: 6px; }
.property-toolbar { margin: 0; gap: 12px; flex-wrap: nowrap; justify-content: flex-end; }
#property-count { flex-shrink: 0; }
.property-gallery {
    min-height: 0;
    height: 100%;
    grid-template-columns: 4fr 4fr 4fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
.property-gallery .property-card { min-height: 0; padding: 0; position: relative; }
.property-gallery .property-card:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.property-gallery .property-card:nth-child(2) { grid-column: 2; grid-row: 1 / 3; margin-block: 0; }
.property-gallery .property-card:nth-child(3) { grid-column: 3; grid-row: 1; }
.property-gallery .property-card:nth-child(4) { grid-column: 3; grid-row: 2; margin-left: 0; }
.property-card figure, .property-image { height: 100%; min-height: 0; }
.property-gallery .property-card img { height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover; }
.property-image::after { background: linear-gradient(180deg, #0003, transparent 25%, #0002 45%, #000c 100%); }
.property-image-label { display: none; }
.property-number { top: 14px; left: 18px; font-size: 20px; }
.property-card figcaption { position: absolute; inset: auto 18px 18px; z-index: 1; padding: 0; }
.property-location { color: #ead7af; font-size: 12px; letter-spacing: .08em; margin-bottom: 6px; }
.property-card h3 { color: white; font-size: clamp(23px, 2vw, 31px); }
.property-details { color: #e6e6dc; font-size: 13px; line-height: 1.4; margin-top: 8px; }
.property-card:nth-child(n+3) .property-details { display: none; }
.property-gallery.is-filtered { display: flex; gap: 16px; }
.property-gallery.is-filtered .property-card { flex: 1; margin: 0; padding: 0; }
.property-empty { grid-row: 3; min-height: 0; overflow: auto; align-content: center; padding: 20px; }
.property-empty-title { font-size: 32px; margin-bottom: 8px; }
.property-reset { margin-top: 12px; }
.properties-footer { grid-row: 5; margin: 0; padding-top: 10px; gap: 12px; flex-wrap: nowrap; line-height: 1.4; }
.properties-footer > span { font-size: 16px; white-space: nowrap; }
@media (max-width: 1000px) {
    .properties-heading > p { max-width: 260px; }
    .property-gallery { grid-template-columns: 4fr 4fr 4fr; gap: 12px; }
    .property-card h3 { font-size: 24px; }
    .property-details { display: none; }
    .property-location { font-size: 12px; letter-spacing: .03em; }
}
@media (max-width: 700px) {
    #main-content > .properties { padding-block: calc(var(--nav-height) + 12px) 16px; }
    #main-content > .properties > .container { gap: 8px; }
    .properties-heading { margin-bottom: 8px; }
    .properties-heading > p { display: none; }
    .properties h2 { font-size: clamp(28px, 5vw, 36px); }
    .properties .eyebrow { font-size: 12px; }
    .property-search { flex-wrap: nowrap; padding: 0; gap: 10px; }
    .property-search input { width: 100%; font-size: 16px; }
    .property-search button { width: auto; border-top: 0; border-left: 1px solid #707568; padding: 6px 0 6px 12px; gap: 0; }
    .property-search button .arrow { display: none; }
    .property-toolbar { align-items: center; min-width: 0; gap: 10px; }
    #property-count { font-size: 12px; }
    .property-gallery, .property-gallery.is-filtered {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: 14px;
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) #303930;
    }
    .property-gallery .property-card, .property-gallery.is-filtered .property-card {
        flex: 0 0 85%;
        grid-column: auto;
        grid-row: auto;
        margin: 0;
        padding: 0 !important;
        scroll-snap-align: start;
    }
    .property-gallery .property-card:nth-child(even) { margin-block: 0; }
    .property-gallery.is-filtered .property-card { margin: 0; }
    .property-card h3 { font-size: 27px; }
    .property-card figcaption { inset: auto 18px 18px; }
    .property-location { letter-spacing: .06em; }
    .properties-footer { font-size: 12px; padding-top: 8px; }
    .properties-footer > span { display: none; }
}
@media (max-height: 650px) and (min-width: 701px) {
    .properties-heading > p { display: none; }
    .properties h2 { font-size: 30px; }
    .properties h2 br { display: none; }
    .properties .eyebrow { margin-bottom: 4px; }
    .properties-heading { margin: 0; }
    #main-content > .properties > .container { gap: 8px; }
    .property-card h3 { font-size: 23px; }
    .property-details { display: none; }
    .property-gallery .property-card:nth-child(2) { margin-top: 0; }
}
/* Keep controls and photos reachable on very short screens or enlarged text. */
@media (max-height: 520px) {
    #main-content > .properties > .container { overflow-y: auto; grid-template-rows: auto auto minmax(180px, 1fr) auto; }
}

#properties-title { color: var(--color-white); }

/* Fine architectural guides give the collection a quiet, structural backdrop. */
#main-content > .properties {
    position: relative;
    isolation: isolate;
    background-color: #000;
    background-image: radial-gradient(ellipse at 82% 12%, rgb(198 166 103 / 9%), transparent 56%);
}
.properties::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    --collection-guide: linear-gradient(to bottom, transparent, rgb(198 166 103 / 18%) 18%, rgb(198 166 103 / 12%) 85%, transparent);
    background-image: var(--collection-guide), var(--collection-guide), var(--collection-guide), var(--collection-guide);
    background-size: 1px 100%;
    background-position: var(--page-gutter) 0, 33.333% 0, 66.667% 0, calc(100% - var(--page-gutter)) 0;
    background-repeat: no-repeat;
}
.properties::after {
    content: "";
    position: absolute;
    top: calc(var(--nav-height) + 26px);
    right: var(--page-gutter);
    width: clamp(140px, 23vw, 370px);
    height: 54px;
    border-top: 1px solid rgb(198 166 103 / 32%);
    border-right: 1px solid rgb(198 166 103 / 32%);
    z-index: -1;
    pointer-events: none;
}
@media (max-width: 700px) {
    .properties::before {
        background-image: var(--collection-guide), var(--collection-guide);
        background-position: var(--page-gutter) 0, calc(100% - var(--page-gutter)) 0;
    }
    .properties::after { top: calc(var(--nav-height) + 12px); width: 44px; height: 26px; opacity: .65; }
}

.collection-endpoint { grid-row: 4; display: flex; justify-content: center; padding-top: 2px; }
.collection-link { display: inline-flex; align-items: center; gap: 22px; min-height: 44px; color: var(--color-primary); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.collection-link .arrow { transition: transform var(--transition-fast); }
.collection-link:hover { color: var(--color-primary-light); }
.collection-link:hover .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .collection-link .arrow { transition: none; } }

.property-listing-link { display: block; position: relative; height: 100%; min-height: 0; }
.property-listing-link:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: -2px; box-shadow: none; }
.property-price { margin-top: 7px; color: var(--color-primary-light); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; }
.property-listing-link:focus-visible img { transform: scale(1.025); }
@media (max-height: 650px) and (min-width: 701px) {
    .property-card:nth-child(n+3) figcaption { inset: auto 14px 12px; }
    .property-card:nth-child(n+3) h3 { font-size: 20px; }
    .property-card:nth-child(n+3) .property-price { margin-top: 4px; font-size: 14px; }
    .property-card:nth-child(n+3) .property-location { margin-bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) { .property-listing-link:focus-visible img { transform: none; } }

/* Keep each home's principal facade in view within the collage. */
.property-card:nth-child(1) .property-image img { object-position: 48% center; }
.property-card:nth-child(2) .property-image img { object-position: 53% center; }
.property-card:nth-child(3) .property-image img { object-position: center 48%; }
.property-card:nth-child(4) .property-image img { object-position: center 48%; }