/* Guest preview is intentionally independent of the staff site's CSS and scripts. */
:root {
    --paper:#f8f6f0;
    --ink:#233c34;
    --muted:#68716a;
    --line:#dcded3;
    --green:#294d3f;
    --cream:#eeebdf;
    --accent:#cfdfb7;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-synthesis:none;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input {
    font:inherit;
}

button,a,input {
    touch-action:manipulation;
}

a:hover {
    text-decoration:underline;
    text-underline-offset:5px;
}

button {
    cursor:pointer;
}

a:focus-visible,button:focus-visible,input:focus-visible {
    outline:3px solid #987022;
    outline-offset:5px;
}

h1,h2,h3,p {
    margin-top:0;
}

h1,h2,h3 {
    font-family:Georgia,'Times New Roman',serif;
    font-weight:400;
}

h1 {
    font-size:clamp(2.7rem,5.6vw,5.3rem);
    line-height:1.06;
    letter-spacing:-.05em;
    margin-bottom:26px;
}

h1 em {
    font-weight:400;
    color:#657750;
}

h2 {
    font-size:clamp(2rem,3vw,2.9rem);
    line-height:1.12;
    letter-spacing:-.035em;
}

h3 {
    font-size:1.55rem;
    line-height:1.2;
}

p {
    line-height:1.7;
    color:var(--muted);
}

.preview-banner {
    padding:10px 24px;
    display:flex;
    justify-content:center;
    gap:16px;
    background:#e9eadc;
    color:#46523e;
    font-size:.75rem;
    line-height:1.5;
}

.preview-banner strong {
    text-transform:uppercase;
    letter-spacing:.12em;
}

.guest-header {
    max-width:1328px;
    margin:auto;
    padding:29px 48px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid var(--line);
}

.brand {
    display:flex;
    align-items:center;
    gap:13px;
    font-family:Georgia,serif;
    font-size:1.65rem;
    line-height:1;
}

.brand:hover {
    text-decoration:none;
}

.brand-mark {
    width:43px;
    height:43px;
    background:var(--green);
    color:var(--paper);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-style:italic;
    font-size:2rem;
    padding-bottom:5px;
}

.brand small {
    display:block;
    font: .56rem Arial,sans-serif;
    letter-spacing:.26em;
    margin-top:8px;
}

.guest-header nav {
    display:flex;
    gap:35px;
    font-size:.88rem;
}

.guest-header nav a:last-child {
    padding-left:30px;
    border-left:1px solid var(--line);
}

main {
    max-width:1328px;
    margin:auto;
}

.hero {
    display:grid;
    grid-template-columns:1.12fr 1fr;
    gap:70px;
    align-items:center;
    padding:72px 48px 86px;
}

.eyebrow {
    font-family:Arial,sans-serif;
    font-size:.66rem;
    letter-spacing:.2em;
    font-weight:700;
    color:var(--green);
    line-height:1.5;
    margin-bottom:22px;
}

.intro {
    font-size:1.06rem;
    line-height:1.8;
    max-width:500px;
}

.button {
    border:1px solid var(--green);
    background:var(--green);
    color:#fff;
    min-height:50px;
    padding:15px 22px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    font-size:.86rem;
    font-weight:600;
    border-radius:4px;
    text-decoration:none;
}

.button:hover {
    background:#3c5e4f;
    text-decoration:none;
}

.hero .button {
    margin-top:16px;
}

.secondary {
    background:transparent;
    color:var(--ink);
}

.secondary:hover {
    background:var(--cream);
}

.full {
    width:100%;
}

.hero-art {
    position:relative;
    padding-bottom:23px;
}

.hero-art .stay-photo {
    height:415px;
    border-radius:180px 180px 4px 4px;
}

.hero-note {
    display:block;
    position:relative;
    width:max-content;
    max-width:100%;
    margin:18px 0 0 auto;
    background:var(--accent);
    padding:18px 25px;
    font-family:Georgia,serif;
    font-size:1.1rem;
    transform:rotate(-3deg);
}

.stays-section {
    padding:55px 48px 80px;
    border-top:1px solid var(--line);
}

.section-heading {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:end;
    margin-bottom:32px;
}

.section-heading h2 {
    margin-bottom:0;
}

.section-heading p {
    font-size:.86rem;
    margin-bottom:0;
}

.section-heading .eyebrow {
    margin-bottom:12px;
    font-size:.66rem;
}

.stay-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.stay-card {
    border:1px solid var(--line);
    border-radius:7px;
    overflow:hidden;
    background:#fcfbf7;
}

.art-link {
    display:block;
}

.art-link:hover .stay-photo {
    filter:brightness(1.035);
}

.card-copy {
    padding:25px;
}

.card-copy .eyebrow {
    font-size:.6rem;
    margin-bottom:12px;
}

.card-copy h3 {
    font-size:1.7rem;
    min-height:2.4em;
    margin-bottom:15px;
}

.card-copy p {
    font-size:.85rem;
    min-height:3.4em;
}

.card-bottom {
    border-top:1px solid var(--line);
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:.75rem;
}

.card-bottom strong {
    font-size:1.1rem;
}

.card-bottom small {
    display:block;
    font-size:.66rem;
    color:var(--muted);
    margin-top:8px;
}

.circle-link {
    border:1px solid var(--line);
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:1.25rem;
}

.portal-callout {
    margin:0 48px 80px;
    padding:50px 60px;
    background:#e9edde;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px;
    border-radius:6px;
    align-items:center;
}

.portal-callout h2 {
    margin-bottom:0;
}

.portal-callout p {
    font-size:.93rem;
}

.text-link {
    font-size:.9rem;
    font-weight:600;
    border-bottom:1px solid var(--ink);
    padding-bottom:5px;
}

.guest-footer {
    max-width:1232px;
    margin:0 auto;
    padding:32px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    border-top:1px solid var(--line);
    font-size:.8rem;
}

.guest-footer p {
    margin:0;
    font-size:.75rem;
}

.brand-text {
    font:1.35rem Georgia,serif;
}

.guest-footer small {
    font-size:.65rem;
}

.back-link {
    display:inline-block;
    font-size:.8rem;
    margin-bottom:36px;
    padding:10px 0;
}

.unit-page,.portal-page {
    padding:30px 48px 80px;
}

.unit-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-bottom:30px;
}

.unit-title h1 {
    font-size:clamp(2.7rem,4vw,4.2rem);
    margin-bottom:0;
}

.unit-title .eyebrow {
    margin-bottom:12px;
}

.pill {
    white-space:nowrap;
    background:#e6ebdc;
    color:#455640;
    border:1px solid #d2dac6;
    border-radius:30px;
    font-size:.7rem;
    padding:7px 13px;
    display:inline-block;
}

.unit-page>.stay-photo {
    height:350px;
    border-radius:7px;
}

.unit-columns {
    display:grid;
    grid-template-columns:1fr 420px;
    gap:80px;
    padding-top:48px;
    align-items:start;
}

.unit-description h2 {
    font-size:2.3rem;
}

.unit-description>p {
    font-size:.95rem;
}

.detail-note {
    margin-top:35px;
    padding-top:30px;
    border-top:1px solid var(--line);
}

.detail-note p {
    font-size:.85rem;
}

.booking-card {
    padding:28px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fffefa;
    box-shadow:0 8px 25px #21352b06;
}

.booking-card h2 {
    font-size:2rem;
    margin-bottom:20px;
}

.booking-card>.eyebrow {
    font-size:.6rem;
    margin-bottom:10px;
}

.rate {
    font-size:1.4rem;
    color:var(--ink);
}

.muted {
    font-size:.8rem;
}

.date-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

label {
    display:block;
    font-size:.75rem;
    font-weight:700;
    margin-bottom:8px;
}

input {
    width:100%;
    min-width:0;
    border:1px solid #a9b2a5;
    padding:12px 8px;
    border-radius:4px;
    background:white;
    color:var(--ink);
    font-size:.9rem;
}

.field-help {
    font-size:.72rem;
    line-height:1.6;
    margin:12px 0 20px;
}

.booking-footnote {
    font-size:.7rem;
    text-align:center;
    margin:18px 0 0;
}

.form-error {
    padding:14px;
    background:#fbece3;
    border-left:3px solid #aa5937;
    color:#843b21;
    font-size:.85rem;
    margin:20px 0 0;
}

.quote {
    border-top:1px solid var(--line);
    margin-top:25px;
    padding-top:23px;
}

.quote h3 {
    font-size:1.4rem;
}

.quote p {
    font-size:.8rem;
}

.quote dl>div {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:10px 0;
    font-size:.83rem;
}

dd {
    margin:0;
}

.quote-total {
    margin-top:10px;
    border-top:1px solid var(--line);
    font-weight:700;
}

.quote .field-help {
    margin-bottom:0;
}

#date-result {
    scroll-margin-top:25px;
}

.signin-page {
    max-width:740px;
    text-align:center;
    padding:70px 24px 90px;
    margin:auto;
}

.signin-page h1 {
    font-size:clamp(2.7rem,4vw,4.3rem);
}

.signin-page .intro {
    margin-left:auto;
    margin-right:auto;
}

.signin-card {
    text-align:left;
    max-width:460px;
    margin:40px auto 0;
    border:1px solid var(--line);
    border-radius:8px;
    padding:30px;
    background:#fffefa;
}

.signin-card h2 {
    font-size:2rem;
    margin-top:22px;
    margin-bottom:12px;
}

.signin-card>p {
    font-size:.85rem;
}

.signin-card .button+.button {
    margin-top:12px;
}

.signin-card .field-help {
    margin-bottom:0;
}

.portal-page {
    padding-top:65px;
}

.portal-page h1 {
    font-size:3.8rem;
    margin-bottom:18px;
}

.portal-page .section-heading {
    align-items:center;
}

.text-button {
    background:transparent;
    border:0;
    border-bottom:1px solid var(--ink);
    padding:12px 0;
    color:var(--ink);
    font-size:.9rem;
}

.itinerary {
    display:grid;
    grid-template-columns:.85fr 1fr;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    background:#fffefa;
}

.itinerary .stay-photo {
    height:100%;
    min-height:350px;
}

.itinerary-copy {
    padding:38px;
}

.itinerary-copy h2 {
    font-size:2.2rem;
    margin:22px 0 10px;
}

.itinerary-copy>p {
    font-size:.88rem;
}

.stay-dates {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:23px 0;
    margin:24px 0 18px;
}

.stay-dates dt {
    font-size:.7rem;
    color:var(--muted);
    margin-bottom:10px;
}

.stay-dates dd {
    font-size:.86rem;
    font-weight:600;
}

.portal-details {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    margin-top:48px;
}

.portal-details p {
    font-size:.9rem;
}

.portal-details .eyebrow {
    font-size:.65rem;
}

.skip-link {
    position:fixed;
    top:8px;
    left:8px;
    z-index:100;
    background:white;
    padding:15px;
    transform:translateY(-200%);
}

.skip-link:focus {
    transform:none;
}

@media(min-width:1440px) {
    .hero {
        padding-top:90px;
        padding-bottom:100px;
    }
}

@media(max-width:1000px) {
    .hero {
        gap:30px;
    }
    .hero-art .stay-photo {
        height:360px;
    }
    .hero-note {
        font-size:.9rem;
        padding:15px;
    }
    .stay-grid {
        gap:16px;
    }
    .card-copy {
        padding:18px;
    }
    .card-copy h3 {
        font-size:1.5rem;
    }
    .stay-card .stay-photo {
        height:215px;
    }
    .unit-columns {
        gap:32px;
        grid-template-columns:1fr 380px;
    }
    .guest-footer {
        margin:0 48px;
    }
    .portal-callout {
        padding:38px;
        gap:35px;
    }
}

@media(max-width:760px) {
    .preview-banner {
        display:block;
        text-align:center;
        font-size:.65rem;
        padding:8px 16px;
    }
    .preview-banner strong {
        display:block;
        margin-bottom:2px;
    }
    .guest-header {
        padding:22px 20px;
    }
    .brand {
        font-size:1.35rem;
        gap:9px;
    }
    .brand-mark {
        width:36px;
        height:36px;
        font-size:1.7rem;
    }
    .brand small {
        font-size:.48rem;
    }
    .guest-header nav {
        gap:18px;
        font-size:.76rem;
    }
    .guest-header nav a:last-child {
        padding-left:0;
        border:0;
    }
    .hero {
        grid-template-columns:1fr;
        padding:43px 20px 48px;
        gap:35px;
    }
    .hero h1 {
        font-size:3.4rem;
        max-width:520px;
    }
    .hero .intro {
        font-size:.96rem;
    }
    .hero .button {
        margin-top:8px;
    }
    .hero-art {
        max-width:520px;
        width:100%;
        margin:auto;
    }
    .hero-art .stay-photo {
        height:320px;
        border-radius:150px 150px 4px 4px;
    }
    .hero-note {
        font-size:.95rem;
    }
    .eyebrow {
        font-size:.6rem;
    }
    .stays-section {
        padding:40px 20px 45px;
    }
    .section-heading {
        display:block;
    }
    .section-heading>p {
        margin-top:18px;
    }
    .section-heading h2 {
        font-size:2.2rem;
    }
    .stay-grid {
        grid-template-columns:1fr;
        gap:25px;
    }
    .stay-card .stay-photo {
        height:260px;
    }
    .card-copy {
        padding:25px;
    }
    .card-copy h3 {
        font-size:1.9rem;
        min-height:0;
    }
    .card-copy p {
        min-height:0;
    }
    .portal-callout {
        grid-template-columns:1fr;
        gap:22px;
        padding:30px;
        margin:0 20px 45px;
    }
    .portal-callout h2 {
        font-size:2.3rem;
    }
    .guest-footer {
        margin:0 20px;
        padding:28px 0;
        flex-wrap:wrap;
        align-items:start;
    }
    .guest-footer p {
        order:3;
        flex-basis:100%;
    }
    .brand-text {
        font-size:1.1rem;
    }
    .unit-page,.portal-page {
        padding:22px 20px 45px;
    }
    .unit-title {
        display:block;
    }
    .unit-title h1 {
        font-size:2.8rem;
        margin-bottom:20px;
    }
    .unit-page>.stay-photo {
        height:260px;
    }
    .unit-columns {
        grid-template-columns:1fr;
        gap:35px;
        padding-top:30px;
    }
    .booking-card {
        padding:24px;
    }
    .unit-description .detail-note {
        margin-top:25px;
        padding-top:22px;
    }
    .portal-page .section-heading {
        display:flex;
        align-items:start;
        gap:16px;
    }
    .portal-page h1 {
        font-size:2.7rem;
    }
    .portal-page .intro {
        font-size:.95rem;
    }
    .text-button {
        white-space:nowrap;
        font-size:.75rem;
    }
    .itinerary {
        grid-template-columns:1fr;
    }
    .itinerary .stay-photo {
        min-height:0;
        height:260px;
    }
    .itinerary-copy {
        padding:25px;
    }
    .itinerary-copy h2 {
        font-size:1.9rem;
    }
    .stay-dates {
        gap:10px;
    }
    .stay-dates dd {
        font-size:.77rem;
    }
    .portal-details {
        grid-template-columns:1fr;
        gap:20px;
        margin-top:30px;
    }
    .signin-page {
        padding:45px 20px 60px;
    }
    .signin-card {
        padding:25px;
    }
    .signin-page h1 {
        font-size:2.8rem;
    }
}

@media(prefers-reduced-motion:no-preference) {
    html {
        scroll-behavior:smooth;
    }
}

/* Let intrinsic date-input widths shrink inside narrow grid tracks. */
.unit-columns > *,
.date-fields > *,
.itinerary > * {
    min-width: 0;
}

.date-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 380px) {
    .date-fields,
    .stay-dates {
        grid-template-columns: 1fr;
    }
    .portal-page .section-heading {
        display: block;
    }
    .portal-page .section-heading > form {
        margin-top: 15px;
    }
    .button {
        gap: 16px;
    }
}

/* Listing photography is stored locally; no third-party requests or scripts. */
.stay-photo {
    height: 260px;
    margin: 0;
    overflow: hidden;
    background: var(--cream);
}
.stay-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-copy .unit-facts {
    min-height: 0;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--green);
}
.stay-card {
    display: flex;
    flex-direction: column;
}
.card-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.card-bottom { margin-top: auto; }
.unit-description h3 { margin-top: 28px; }
.amenities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    padding-left: 20px;
    font-size: .9rem;
    line-height: 1.5;
}
.listing-links { font-size: .8rem; }
.listing-links a { text-decoration: underline; }
.photo-gallery { margin-top: 20px; }
.photo-gallery summary {
    width: fit-content;
    padding: 12px 0;
    cursor: pointer;
    font-size: .9rem;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.photo-gallery summary:focus-visible {
    outline: 3px solid #987022;
    outline-offset: 5px;
}
.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    margin-top: 20px;
}
.photo-grid figure { margin: 0; }
.photo-grid img {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: contain;
    background: var(--cream);
    border-radius: 5px;
}
.photo-grid figcaption {
    padding-top: 10px;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--muted);
}
@media (max-width: 760px) {
    .photo-grid { grid-template-columns: 1fr; }
    .photo-grid img { height: auto; max-height: 520px; object-fit: contain; background: var(--cream); }
    .unit-description .amenities { font-size: .85rem; gap: 12px 20px; }
}
:root { color-scheme: light; }
.booking-card select, .booking-card textarea {
    width: 100%; box-sizing: border-box; font: inherit; color: inherit;
    background: white; border: 1px solid #c7c9ba; border-radius: 8px; padding: 12px;
}
.booking-card textarea { resize: vertical; min-height: 110px; }
.booking-card form > label { margin-top: 16px; }
.booking-card .date-fields input { min-width: 0; }
.form-success { background: #eaf0df; padding: 16px; border-radius: 8px; margin: 16px 0; }
.validation-summary-valid { display: none; }
.form-error ul { padding-left: 20px; }
.booking-card input:focus-visible, .booking-card select:focus-visible, .booking-card textarea:focus-visible { outline: 3px solid #728457; outline-offset: 2px; }

/* Keep native controls readable on phones, including focused date/email fields. */
.booking-card input, .booking-card select, .booking-card textarea { font-size: 1rem; }
.field-error { display: block; color: #8c2929; font-size: .9rem; margin-top: 6px; }
.field-error:empty { display: none; }
.form-error:focus, .form-success:focus { outline: 3px solid #728457; outline-offset: 4px; }

.booking-card .form-error { margin-bottom: 20px; }

.guest-offer { max-width: 760px; margin: 64px auto; padding: 0 24px; overflow-wrap: anywhere; }
.guest-offer h1 { font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3rem); }
.guest-offer p { line-height: 1.6; }
.guest-offer .offer-dates { display: flex; flex-wrap: wrap; gap: 24px; }
.guest-offer dt { font-weight: 700; }
.guest-offer dd { margin: 6px 0 0; }
.guest-offer .offer-price { width: 100%; border-collapse: collapse; margin: 28px 0; }
.guest-offer .offer-price caption { text-align: left; font-weight: 700; padding-bottom: 12px; }
.guest-offer .offer-price th, .guest-offer .offer-price td { text-align: left; padding: 12px 8px; border-bottom: 1px solid #c7c9ba; }
.guest-offer .offer-price td, .guest-offer .offer-price th:last-child { text-align: right; }
.guest-offer .quote-policy { white-space: pre-wrap; }
.guest-offer-signin label { display: block; font-weight: 700; }
.guest-offer-signin input { width: 100%; box-sizing: border-box; padding: 12px; font: inherit; margin: 0 0 16px; border: 1px solid #c7c9ba; border-radius: 8px; }
