/* boutique-cottage — for small owner-operated communities (8-30 residents).
   Structurally different from warm-resort: 3 narrative pages (Our Home,
   A Day Here, Visit Us) plus the photo journal. Single-column long-form
   layout, generous whitespace, first-person voice in copy.

   Visual language:
     - Oat / putty primary (--primary)
     - Dusty rose accent
     - Ivory paper background
     - Lora serif for headings (PINNED via 'Lora', serif fallback chain so
       the controller font-swap regex won't touch it — the boutique feel
       depends on this typeface)
     - DM Sans for body (customer-swappable via 'DM Sans', system-ui chain)

   The --primary CSS-var chain stays customer-swappable just like warm-resort.
*/

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

:root {
    --primary: #8a7e5e;          /* oat / putty */
    --primary-dark: #5e553f;
    --primary-light: #efeadb;
    --accent: #b56977;            /* dusty rose */
    --accent-soft: #f1dce0;
    --paper: #faf6ee;             /* ivory */
    --paper-warm: #f2ecdc;
    --ink: #2a2620;
    --ink-soft: #5a544a;
    --rule: #e7e0cd;
    --rule-strong: #c9c0a8;
    --gold: #b08a3e;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-size: 18px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Pinned serif — boutique-cottage's personality. NOT swappable. */
h1, h2, h3, h4, .display-serif {
    font-family: 'Lora', serif;
    font-weight: 500;
    color: var(--primary-dark);
    letter-spacing: -0.005em;
    line-height: 1.22;
}

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s; }
a:hover { color: var(--primary-dark); }

/* Single-column narrow — the structural primitive of this theme. */
.narrow { max-width: 680px; margin: 0 auto; padding: 0 28px; }
.container { max-width: 880px; margin: 0 auto; padding: 0 28px; }

/* ── NAV ─────────────────────────────────────── */
nav.site-nav {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 60;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    gap: 40px;
    padding: 12px 0;
    flex-wrap: wrap;
}
.nav-brand { display: flex; flex-direction: column; line-height: 1.2; flex-shrink: 0; }
.nav-logo {
    font-family: 'Lora', serif;
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    color: var(--primary-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.nav-tagline {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-top: 5px;
    letter-spacing: 0.03em;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.nav-links a {
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 0;
    white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }
.nav-call {
    color: var(--primary-dark) !important;
    font-weight: 600 !important;
    font-style: italic;
    font-family: 'Lora', serif !important;
    font-size: 16px !important;
}

/* Narrower breakpoint: collapse to two rows (brand on top, links below)
   rather than crushing the spacing. */
@media (max-width: 760px) {
    .nav-inner { gap: 14px; }
    .nav-links { gap: 20px; width: 100%; justify-content: flex-start; }
    .nav-links a { font-size: 13.5px; }
}

/* ── HOUSE HERO — the building is the brand ─────────────────────────── */
.house-hero { padding: 0; background: var(--paper); }
.house-hero-photo {
    width: 100%;
    height: clamp(360px, 56vw, 620px);
    overflow: hidden;
    background: var(--paper-warm);
}
.house-hero-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.house-hero-caption {
    padding: 32px 28px 28px;
    text-align: center;
    border-bottom: 1px solid var(--rule);
}
.house-hero-name {
    font-family: 'Lora', serif;
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.1;
    font-weight: 500;
    font-style: italic;
    color: var(--primary-dark);
    letter-spacing: -0.012em;
    margin-bottom: 10px;
}
.house-hero-tag {
    font-size: 15.5px;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

/* ── WELCOME — small portrait + greeting inset, distinct from hero ─── */
.welcome-section {
    padding: 64px 0 48px;
    background: var(--paper);
}
.welcome-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 36px;
    align-items: center;
    max-width: 880px;
}
@media (max-width: 720px) {
    .welcome-card { grid-template-columns: 1fr; gap: 22px; text-align: center; }
    .welcome-portrait { margin: 0 auto; }
}
.welcome-portrait {
    width: 160px; height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--paper-warm);
    box-shadow: 0 6px 22px rgba(0,0,0,0.07);
    background: var(--accent-soft);
}
.welcome-eyebrow {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 14.5px;
    color: var(--accent);
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}
.welcome-greeting {
    font-family: 'Lora', serif;
    font-size: 22px;
    line-height: 1.55;
    color: var(--primary-dark);
    font-weight: 400;
}
.welcome-greeting strong { font-weight: 600; color: var(--accent); }

/* ── TRUST LINE — one quiet sentence, no background band ──────────── */
.trust-line {
    padding: 0 0 56px;
    text-align: center;
}
.trust-line p {
    font-size: 13.5px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    font-family: 'Lora', serif;
    font-style: italic;
}

/* ── ALTERNATING SECTIONS — photo + prose, sides flip each row. Reads
       like a magazine spread instead of a grid of thumbnails. .alt-row
       is a 2-column layout where .alt-photo-left puts the figure first
       and .alt-photo-right flips it. The container's max-width is bumped
       wider here (vs .narrow used for centered prose) so the photo +
       text both get room to breathe. */
.alt-section { padding: 64px 0; }
.alt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    max-width: 1080px;
}
.alt-photo-right .alt-photo { order: 2; }
.alt-photo-right .alt-prose { order: 1; }
@media (max-width: 880px) {
    .alt-row { grid-template-columns: 1fr; gap: 28px; }
    .alt-photo-right .alt-photo,
    .alt-photo-right .alt-prose { order: unset; }
}
.alt-photo { margin: 0; }
.alt-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--paper-warm);
    border-radius: 4px;
    display: block;
}
.alt-photo figcaption {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 14.5px;
    color: var(--ink-soft);
    margin-top: 10px;
    line-height: 1.55;
}
.alt-prose .section-heading { margin-bottom: 16px; }
.alt-prose p {
    margin-bottom: 18px;
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--ink);
}
.alt-prose p.lead {
    font-size: 20px;
    color: var(--primary-dark);
    font-family: 'Lora', serif;
    line-height: 1.55;
    margin-bottom: 22px;
}

/* ── HEADINGS ─────────────────────────────────── */
.section { padding: 80px 0; }
.section-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
h1.page-heading { font-size: 44px; margin-bottom: 14px; font-weight: 500; }
h2.section-heading { font-size: 32px; margin-bottom: 12px; font-weight: 500; }
p.section-lead { font-size: 19px; color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 720px) {
    h1.page-heading { font-size: 34px; }
    h2.section-heading { font-size: 26px; }
}

/* ── BODY PROSE — the bread and butter of boutique-cottage ─────────── */
.prose p {
    margin-bottom: 22px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--ink);
}
.prose p.lead {
    font-size: 20px;
    color: var(--primary-dark);
    font-family: 'Lora', serif;
    line-height: 1.6;
    margin-bottom: 28px;
}
.prose a { color: var(--accent); }

/* ── DAY-HERE blocks — chronological narrative ─────────────────────── */
.day-block {
    border-left: 3px solid var(--accent);
    padding-left: 28px;
    margin-bottom: 48px;
}
.day-block .time-label {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--accent);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    text-transform: lowercase;
}
.day-block h3 {
    font-size: 24px;
    margin-bottom: 14px;
    font-weight: 500;
}

/* ── PRICING CARD — boutique shows the number, doesn't gate it ──── */
.price-card {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 28px;
    text-align: center;
    margin: 36px 0;
}
.price-card .price-big {
    font-family: 'Lora', serif;
    font-size: 32px;
    color: var(--primary-dark);
    font-weight: 500;
    margin-bottom: 6px;
}
.price-card .price-note {
    font-size: 14px;
    color: var(--ink-soft);
    font-style: italic;
}

/* ── TRUST STRIP — boutique trust signals: license + inspection ─── */
.trust-strip {
    background: var(--paper-warm);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 20px 0;
    text-align: center;
}
.trust-strip-inner {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.8;
}
.trust-strip-inner strong { color: var(--primary-dark); font-weight: 600; }

/* ── ADULT-CHILD QUOTE — proper pull-out, the only "wow" moment on the
       page. Big italic Lora, generous margins. No background block; the
       typography is the design. */
.adult-quote {
    margin: 24px 0;
    padding: 0;
    text-align: center;
    border: none;
    background: transparent;
}
.adult-quote::before {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    background: var(--accent);
    margin: 0 auto 32px;
}
.adult-quote p {
    font-family: 'Lora', serif;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.45;
    color: var(--primary-dark);
    font-style: italic;
    margin-bottom: 20px;
    font-weight: 400;
}
.adult-quote cite {
    display: block;
    font-style: normal;
    font-size: 13.5px;
    color: var(--ink-soft);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── INLINE CALL CTA — no big buttons, just the cell number ────────── */
.cell-cta {
    background: var(--accent-soft);
    border-radius: 8px;
    padding: 24px 26px;
    margin: 36px 0;
    text-align: center;
}
.cell-cta strong {
    font-family: 'Lora', serif;
    font-size: 22px;
    color: var(--primary-dark);
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}
.cell-cta a {
    font-size: 24px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-family: 'Lora', serif;
}
.cell-cta p {
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 8px;
    font-style: italic;
}

/* ── PHOTO JOURNAL — gallery.html's reverse-chronological feed ─── */
.journal-entry {
    margin-bottom: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--rule);
}
.journal-entry:last-child { border-bottom: none; }
.journal-entry img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 18px;
    display: block;
    background: var(--paper-warm);
}
.journal-entry .journal-date {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--accent);
    margin-bottom: 8px;
}
.journal-entry .journal-caption {
    font-family: 'Lora', serif;
    font-size: 20px;
    color: var(--primary-dark);
    line-height: 1.5;
    font-weight: 400;
}

/* ── FOOTER ──────────────────────────────────── */
footer {
    background: var(--primary-dark);
    color: var(--paper-warm);
    padding: 48px 0 28px;
    margin-top: 60px;
}
.footer-inner {
    text-align: center;
}
.footer-brand {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 20px;
    color: white;
    margin-bottom: 8px;
}
.footer-addr {
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 22px;
}
.footer-addr a { color: white; font-weight: 600; }
.footer-links {
    margin-bottom: 24px;
    font-size: 14px;
}
.footer-links a {
    color: rgba(255,255,255,0.78);
    margin: 0 12px;
    text-decoration: none;
}
.footer-links a:hover { color: var(--accent-soft); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 20px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}