/* ------------------------------------------------------------------
   Elective Accommodation — site.css (v2 design)
   Palette: cream #f7ecdd · ink #3a2c20 · terracotta #9c4a2b / #b45a38
            gold #cf9a3f · tan #efe0c8 · light cream #faf1e6
   Type: Bitter (serif display) · Karla (sans body)
------------------------------------------------------------------- */

@font-face {
    font-family: 'Bitter';
    src: url('../fonts/bitter.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Bitter';
    src: url('../fonts/bitter-italic.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Karla';
    src: url('../fonts/karla.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --cream: #f7ecdd;
    --cream-light: #faf1e6;
    --cream-soft: #f0e2cf;
    --tan: #efe0c8;
    --chip: #efd9b8;
    --chip-text: #6b4a1f;
    --ink: #3a2c20;
    --ink-deep: #2e1a0e;
    --muted: #6b543f;
    --faded: #8a7358;
    --faded-light: #a3865f;
    --terracotta: #9c4a2b;
    --terracotta-bright: #b45a38;
    --terracotta-hover: #c96a45;
    --gold: #cf9a3f;
    --gold-hover: #e0ad52;
    --gold-text: #e8c887;
    --peach: #eac4ae;
    --hairline: #e0cfae;
    --footer-text: #c9b394;
    --serif: 'Bitter', Georgia, serif;
    --sans: 'Karla', 'Helvetica Neue', Arial, sans-serif;
    --display: 'Bricolage Grotesque', 'Bitter', Georgia, serif;
    --gutter: 56px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    background: var(--cream);
    color: var(--ink);
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

section[id] { scroll-margin-top: 76px; }

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

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(30px, 4vw, 40px); }

a { color: var(--terracotta); }
a:hover { color: var(--terracotta-bright); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.body-muted { font-size: 16px; line-height: 28px; color: var(--muted); margin-top: 20px; }

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    padding: 15px 30px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .18s;
}
.btn[disabled] { opacity: .55; cursor: wait; }

.btn-terracotta { background: var(--terracotta-bright); color: var(--cream-light); }
.btn-terracotta:hover { background: var(--terracotta-hover); color: var(--cream-light); }

.btn-glass {
    background: rgba(250, 241, 230, .15);
    border: 1px solid rgba(250, 241, 230, .4);
    color: var(--cream-light);
    padding: 13px 24px;
}
.btn-glass:hover { background: rgba(250, 241, 230, .28); color: var(--cream-light); }

.btn-gold { background: var(--gold); color: var(--ink); padding: 14px 32px; }
.btn-gold:hover { background: var(--gold-hover); }

.btn-small { font-size: 14px; padding: 11px 20px; }

/* ---------------------------------------------------------------- */
/* Nav                                                               */
/* ---------------------------------------------------------------- */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 18px var(--gutter);
    background: rgba(58, 44, 32, .92);
    backdrop-filter: blur(8px);
    color: var(--cream-light);
}

.nav-brand {
    font-family: var(--display);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: .2px;
    margin-right: auto;
    color: var(--cream-light);
    text-decoration: none;
}
.nav-brand:hover { color: var(--gold-text); }
.nav-brand-sub {
    display: block;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .5px;
    line-height: 1.3;
    color: var(--gold-text);
    margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
    color: var(--cream-light);
    text-decoration: none;
    font-size: 15px;
}
.nav-links a:hover { color: var(--gold-text); }

.nav-cta {
    background: var(--gold);
    color: var(--ink) !important;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 999px;
}
.nav-cta:hover { background: var(--gold-hover); }

.nav-toggle { display: none; background: none; border: 0; padding: 10px 6px; cursor: pointer; }
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cream-light);
    position: relative;
    transition: transform .2s, opacity .2s;
}
.nav-toggle-bar::before { position: absolute; top: -7px; }
.nav-toggle-bar::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: rotate(-90deg); top: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { opacity: 0; }

@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .nav-brand { font-size: 20px; }
    .nav-brand-sub { font-size: 11px; }
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(58, 44, 32, .97);
        padding: 8px 24px 20px;
        display: none;
    }
    .nav-links.is-open { display: flex; }
    .nav-links a { padding: 12px 0; font-size: 16px; }
    .nav-cta { margin-top: 8px; }
}

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

.hero { position: relative; background: var(--ink); }

.hero-img {
    width: 100%;
    height: clamp(520px, 78vh, 640px);
    object-fit: cover;
}

.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(46, 26, 14, .85) 0%, rgba(46, 26, 14, .35) 60%), rgba(46, 26, 14, .25);
}

.hero-content {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 64px;
    color: var(--cream-light);
}

.hero-eyebrow {
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold-text);
    margin-bottom: 16px;
}

.hero h1 {
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1.08;
    max-width: 18ch;
}

.hero-sub {
    font-size: 17px;
    line-height: 29px;
    margin-top: 22px;
    max-width: 52ch;
    color: var(--cream-soft);
}

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

/* ---------------------------------------------------------------- */
/* Stat band                                                         */
/* ---------------------------------------------------------------- */

.stat-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--terracotta);
    color: var(--cream-light);
}
.stat { padding: 30px 32px; }
.stat:not(:last-child) { border-right: 1px solid rgba(250, 241, 230, .25); }
.stat-big { font-family: var(--serif); font-weight: 700; font-size: 30px; }
.stat-label {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--peach);
    margin-top: 6px;
}
@media (max-width: 900px) {
    .stat-band { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(2) { border-right: 0; }
    .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(250, 241, 230, .25); }
}
@media (max-width: 480px) {
    .stat { padding: 22px 24px; }
    .stat-big { font-size: 24px; }
}

/* ---------------------------------------------------------------- */
/* The house                                                         */
/* ---------------------------------------------------------------- */

.house {
    padding: 80px var(--gutter) 0;
    max-width: 1240px;
    margin: 0 auto;
}

.house-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: center;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
    background: var(--chip);
    color: var(--chip-text);
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
}

.house-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.house-photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

.house-notes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    padding: 64px 0 80px;
}
.house-notes h3 { font-size: 19px; }
.house-notes p { font-size: 14.5px; line-height: 25px; color: var(--muted); margin-top: 10px; }

@media (max-width: 980px) {
    .house-grid { grid-template-columns: 1fr; gap: 36px; }
    .house-notes { grid-template-columns: 1fr 1fr; padding: 48px 0 64px; }
}
@media (max-width: 520px) {
    .house-notes { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Rooms                                                             */
/* ---------------------------------------------------------------- */

.rooms { background: var(--tan); padding: 72px var(--gutter); }
.rooms-inner { max-width: 1128px; margin: 0 auto; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.head-note { font-size: 14px; color: var(--faded); }

.rooms-note { max-width: 62ch; }

.room-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 32px;
}

.room-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--cream-light);
    border-radius: 14px;
    padding: 20px;
}
.room-card > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 10px;
}
.room-card > div { display: flex; flex-direction: column; flex: 1; }
.room-card h3 { font-size: 23px; }
.room-card .body-muted { font-size: 14.5px; line-height: 25px; margin: 8px 0 14px; flex: 1; }

.room-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.room-price {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 22px;
    color: var(--terracotta);
}
.room-price span {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 13px;
    color: var(--faded);
}

.rooms-fineprint { font-size: 13.5px; line-height: 23px; color: var(--faded); margin-top: 24px; }

@media (max-width: 980px) { .room-cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ---------------------------------------------------------------- */
/* Guest book                                                        */
/* ---------------------------------------------------------------- */

.guests {
    padding: 80px var(--gutter);
    max-width: 1240px;
    margin: 0 auto;
}

.eyebrow {
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--terracotta);
    margin-bottom: 20px;
}

.pull-quote {
    font-family: var(--serif);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.4;
    max-width: 36ch;
}
.quote-attribution { font-size: 15px; color: var(--faded); margin-top: 18px; }

.guest-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}
.guest-card {
    background: var(--tan);
    border-radius: 12px;
    padding: 26px 28px;
}
.guest-card-title { font-family: var(--serif); font-weight: 700; font-size: 16px; }
.guest-card p:nth-child(2) { font-size: 14px; line-height: 24px; color: var(--muted); margin-top: 10px; }
.guest-card-attribution { font-size: 13px; color: var(--faded-light); margin-top: 12px; }
.guest-reviews-link { margin-top: 40px; text-align: center; }

@media (max-width: 980px) { .guest-cards { grid-template-columns: 1fr; gap: 18px; } }

/* ---------------------------------------------------------------- */
/* Tours                                                             */
/* ---------------------------------------------------------------- */

.tours {
    padding: 0 var(--gutter) 80px;
    max-width: 1240px;
    margin: 0 auto;
}

.tours-grid {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 56px;
    align-items: center;
}
.tours-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
}
.tours h2 { font-size: clamp(28px, 3.4vw, 34px); }
.tours .body-muted { font-size: 15.5px; line-height: 27px; margin-top: 16px; }

.pay-it-forward {
    font-size: 15px;
    line-height: 26px;
    color: var(--muted);
    margin-top: 22px;
    border-top: 1px solid var(--hairline);
    padding-top: 22px;
}
.pay-it-forward strong { color: var(--ink); }

@media (max-width: 980px) { .tours-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------------------------------------------------------------- */
/* Location                                                          */
/* ---------------------------------------------------------------- */

.location {
    padding: 0 var(--gutter) 80px;
    max-width: 1240px;
    margin: 0 auto;
}
.location .section-head { margin-bottom: 28px; }
.location h2 { font-size: clamp(28px, 3.4vw, 34px); }

.map-legend {
    display: flex;
    gap: 24px;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    flex-wrap: wrap;
}
.map-legend > span { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend-house { background: var(--terracotta-bright); }
.legend-hospital { background: var(--ink); }

.location-map {
    width: 100%;
    height: 440px;
    border-radius: 14px;
    overflow: hidden;
    z-index: 1;
    background: var(--tan);
}
.location-map .map-pin {
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid var(--cream-light);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.map-pin-house { background: var(--terracotta-bright); }
.map-pin-hospital { background: var(--ink); }
.leaflet-popup-content b { font-family: var(--serif); }

.location-note { font-size: 14px; line-height: 24px; color: var(--faded); margin-top: 18px; }

@media (max-width: 640px) { .location-map { height: 360px; } }

/* ---------------------------------------------------------------- */
/* Booking                                                           */
/* ---------------------------------------------------------------- */

.book {
    background: var(--terracotta);
    color: var(--cream-light);
    padding: 72px var(--gutter);
}
.book-inner {
    max-width: 1128px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
}

.book-sub { font-size: 15px; line-height: 26px; color: var(--peach); margin-top: 16px; max-width: 42ch; }
.book-contact { font-size: 15px; line-height: 29px; margin-top: 28px; }
.book-contact a { color: var(--cream-light); }
.book-contact a:hover { color: var(--gold-text); }

.book-form { display: grid; gap: 16px; align-content: start; }

.form-row { display: grid; gap: 16px; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row-2 { grid-template-columns: 1fr 1fr; }

.book-form label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--peach);
}
.book-form select,
.book-form input {
    font-family: var(--sans);
    font-size: 15px;
    padding: 12px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--cream-light);
    color: var(--ink);
}
.book-form select { padding: 13px 14px; }

.book-form .btn { justify-self: start; }

.form-msg {
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14.5px;
}
.form-msg.success { background: rgba(250, 241, 230, .92); color: #2e5b30; }
.form-msg.error { background: rgba(46, 26, 14, .45); color: var(--cream-light); border: 1px solid rgba(250, 241, 230, .4); }

@media (max-width: 980px) {
    .book-inner { grid-template-columns: 1fr; gap: 40px; }
    .form-row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }

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

.site-footer {
    background: var(--ink);
    color: var(--footer-text);
    padding: 32px var(--gutter);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 13.5px;
    flex-wrap: wrap;
}
.site-footer a { color: var(--footer-text); }
.site-footer a:hover { color: var(--gold-text); }

/* ---------------------------------------------------------------- */
/* Small screens: tighter gutters                                    */
/* ---------------------------------------------------------------- */

@media (max-width: 860px) {
    :root { --gutter: 24px; }
    .hero-content { bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}