/* Thatch & Vine — site styles */

:root {
  --ink: #2b2b2b;
  --body: #555;
  --muted: #8a8a8a;
  --accent: #9a8a63;        /* dried-thatch gold */
  --vine: #3d4a37;          /* deep vine green */
  --line: #e6e2d9;
  --paper: #ffffff;
  --cream: #f8f6f1;
  --overlay: #282828;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Open Sans", Helvetica, Arial, sans-serif;
  --caps: "Dosis", "Open Sans", sans-serif;
  --script: "Pinyon Script", "Playfair Display", cursive;
  --container: 1170px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 15px/1.85 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); transition: color .2s, border-color .2s; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.3; margin: 0 0 .6em; }
h1, h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: clamp(22px, 2.6vw, 28px); }
h4 { font-size: 19px; }

p { margin: 0 0 1.4em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 880px; }
.center { text-align: center; }
.justify { text-align: justify; hyphens: auto; }

.subtitle {
  font-family: var(--script);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--accent);
  line-height: 1.3;
  margin: -.1em 0 1.4em;
  text-align: center;
}

.eyebrow {
  font: 600 12px/1 var(--caps);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}

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

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .35s, box-shadow .35s, padding .35s;
  padding: 28px 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { border: 0; display: flex; align-items: center; }
.brand img { height: 20px; width: auto; }
.brand .on-dark { display: block; }
.brand .on-light { display: none; }

.nav-list { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.site-header nav { margin-left: auto; }
.header-actions { display: flex; align-items: center; gap: 18px; margin-left: 30px; }
@media (max-width: 991px) { .header-actions { margin-left: auto; } }

/* Feedback: plain text, same size as the menu items, floating in the top-right
   corner of the window. It lives in the fixed header and is centred on the
   header's middle, so it lines up with the menu items in both the photo and
   the white (scrolled) states, and takes their colours for contrast. */
:root { --fb-btn-reserve: 140px; }
.feedback-chip {
  position: absolute; top: 50%; right: 28px; transform: translateY(calc(-50% - 1px));
  background: none; border: 0; cursor: pointer;
  font: 400 18px/1.2 var(--serif); color: #fff; padding: 6px 0;
}
.feedback-chip::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor; transition: right .3s;
}
.feedback-chip:hover::after, .feedback-chip:focus-visible::after, .feedback-chip[aria-expanded="true"]::after { right: 0; }
.feedback-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.feedback-chip.is-loading { opacity: .6; cursor: progress; }
.site-header.is-solid .feedback-chip { color: var(--ink); }
/* keep the menu clear of the button wherever the page content reaches the right edge */
.site-header .container { padding-right: max(24px, calc(var(--fb-btn-reserve) - max(0px, (100vw - var(--container)) / 2))); }
@media (max-width: 991px) {
  :root { --fb-btn-reserve: 122px; }
  .feedback-chip { right: 20px; transform: translateY(-50%); }
}

.nav-list a {
  font: 400 18px/1.2 var(--serif);
  color: #fff;
  border: 0;
  padding: 6px 0;
  position: relative;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor; transition: right .3s;
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { right: 0; }

.site-header.is-solid { background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--line); padding: 14px 0; }
.site-header.is-solid .nav-list a { color: var(--ink); }
.site-header.is-solid .brand .on-dark { display: none; }
.site-header.is-solid .brand .on-light { display: block; }

.menu-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  font: 400 18px/1 var(--serif);
  color: #fff; padding: 10px 0;
}
.site-header.is-solid .menu-toggle { color: var(--ink); }

/* full-screen overlay menu (mobile) */
.menu-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.72) url("../img/photos/veranda-dining.jpg") center/cover;
  background-blend-mode: multiply;
  color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding: 90px 32px 40px;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }
.menu-overlay ul { list-style: none; margin: 0; padding: 0; text-align: right; }
.menu-overlay li { margin: 6px 0; }
.menu-overlay a { position: relative; color: #fff; border: 0; font: 400 clamp(26px, 7vw, 40px)/1.4 var(--serif); transition: opacity .2s; }
/* invisible tap area around each link that fills the gaps between items and
   reaches the screen edge, so a tap near a word still counts */
.menu-overlay a::before { content: ""; position: absolute; top: -.3em; bottom: -.3em; left: -48px; right: -32px; }
/* once a link is tapped the others dim, so you can see it registered */
.menu-overlay.is-going a:not(.is-chosen) { opacity: .45; }
.menu-overlay .close {
  position: absolute; top: 28px; right: 24px;
  background: none; border: 0; color: #fff; cursor: pointer;
  font: 400 18px/1 var(--serif); padding: 10px 0;
}

@media (max-width: 991px) {
  .nav-list { display: none; }
  .menu-toggle { display: block; }
  .brand img { height: 16px; }
}

/* ---------- Image backgrounds, parallax bands ---------- */

.bg-image { position: relative; background-size: cover; background-position: center; color: #fff; }
.bg-fixed { background-attachment: fixed; }
.bg-image::before {
  content: ""; position: absolute; inset: 0;
  background: var(--tint, var(--overlay));
  opacity: var(--tint-opacity, .4);
}
.bg-image > * { position: relative; }

/* iOS/Android don't support fixed backgrounds well */
@media (hover: none), (max-width: 991px) { .bg-fixed { background-attachment: scroll; } }

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

.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  --tint: #3b4a44; --tint-opacity: .28;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 45% 35% at 50% 50%, rgba(0,0,0,.28), rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,.35));
  pointer-events: none;
}
.hero-logo { width: min(640px, 86vw); margin: 0 auto; filter: drop-shadow(0 2px 14px rgba(0,0,0,.35)); }
.hero-logo-wrap { position: relative; z-index: 2; padding: 0 16px; }

.scroll-down {
  position: absolute; z-index: 2; left: 50%; bottom: 34px; transform: translateX(-50%);
  color: #fff; border: 0;
  font: 600 11px/1 var(--caps); letter-spacing: .3em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.scroll-down::after { content: ""; width: 1px; height: 46px; background: rgba(255,255,255,.75); animation: drip 2.2s infinite; transform-origin: top; }
.scroll-down:hover { color: #fff; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .scroll-down::after { animation: none; } html { scroll-behavior: auto; } }

/* inner page hero (shorter) */
.page-hero { min-height: 62vh; display: flex; align-items: center; justify-content: center; text-align: center; --tint-opacity: .35; }
.page-hero h1 { color: #fff; margin: 0; letter-spacing: .02em; }
.page-hero .subtitle { color: #fff; margin: 6px 0 0; }

/* ---------- Sections ---------- */

.section { padding: 120px 0; }
.section-sm { padding: 70px 0; }
.section.cream { background: var(--cream); }

.band { min-height: 440px; }
@media (max-width: 767px) { .section { padding: 80px 0; } .band { min-height: 280px; } }

.band-cta { padding: 130px 0; text-align: center; }
.band-cta h3 { color: #fff; line-height: 1.7; margin: 0; }
.band-cta a { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.band-cta a:hover { color: #fff; border-bottom-color: #fff; }

.divider { width: 60px; height: 1px; background: var(--accent); margin: 40px auto; border: 0; }

/* amenity icon strip (homepage + estate) */
.highlights {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  margin: 50px auto 40px; max-width: 920px; text-align: center;
}
.highlights figure { margin: 0; }
.highlights svg { width: 46px; height: 46px; stroke: var(--accent); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 14px; display: block; }
.highlights figcaption { font: 600 12px/1.5 var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 767px) { .highlights { grid-template-columns: repeat(2, 1fr); row-gap: 34px; } .highlights figure:last-child { grid-column: 1 / -1; } }

.tagline { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); text-align: center; margin: 0; }

/* video */
.video-frame { max-width: 960px; margin: 30px auto 0; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.video-frame video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }

/* ---------- Estate page ---------- */

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 60px; margin-top: 60px; }
.feature { display: grid; gap: 22px; align-content: start; }
.feature img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.feature h4 { margin: 0; }
.feature p { margin: 0; }
@media (max-width: 767px) { .feature-grid { grid-template-columns: 1fr; gap: 50px; } }

.amenity-list { columns: 3 220px; column-gap: 40px; list-style: none; padding: 0; margin: 30px 0 0; }
.amenity-list li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 17px; color: var(--ink); }

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

.map-frame { width: 100%; aspect-ratio: 16 / 7; border: 0; display: block; filter: grayscale(.35); margin: 40px 0 10px; }
@media (max-width: 767px) { .map-frame { aspect-ratio: 4 / 3; } }
.distance-list { list-style: none; padding: 0; margin: 30px auto 0; max-width: 720px; }
.distance-list li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.distance-list span:first-child { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.distance-list span:last-child { font: 600 12px/2 var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 767px) { .split { grid-template-columns: 1fr; gap: 30px; } .split.reverse > :first-child { order: 0; } }

/* ---------- Gallery ---------- */

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 50px; }
.gallery-grid a { border: 0; display: block; overflow: hidden; position: relative; background: var(--cream); }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s, opacity .3s; }
.gallery-grid a:hover img { transform: scale(1.05); opacity: .9; }
.gallery-grid a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; } }

.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(12,12,12,.94);
  display: none; align-items: center; justify-content: center; padding: 60px 70px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lightbox button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font: 600 12px/1 var(--caps); letter-spacing: .25em; text-transform: uppercase; padding: 14px;
}
.lightbox .lb-close { top: 14px; right: 14px; }
.lightbox .lb-prev, .lightbox .lb-next { top: 50%; transform: translateY(-50%); font: 300 44px/1 var(--sans); letter-spacing: 0; }
.lightbox .lb-prev { left: 10px; }
.lightbox .lb-next { right: 10px; }
.lightbox .lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font: 600 11px/1 var(--caps); letter-spacing: .25em; }
@media (max-width: 575px) { .lightbox { padding: 60px 8px; } .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 4px; transform: none; } }

/* ---------- Blog ---------- */

.posts { display: grid; gap: 90px; margin-top: 50px; }
.post { display: grid; grid-template-columns: 5fr 7fr; gap: 50px; align-items: start; }
.post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post time { font: 600 12px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 14px; }
@media (max-width: 767px) { .post { grid-template-columns: 1fr; gap: 26px; } }

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

.booking-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; margin-top: 50px; }
@media (max-width: 991px) { .booking-grid { grid-template-columns: 1fr; gap: 50px; } }
.contact-lines { list-style: none; padding: 0; margin: 0 0 30px; }
.contact-lines li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-lines small { display: block; font: 600 11px/1.6 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.contact-lines a, .contact-lines strong { font: 400 19px/1.5 var(--serif); color: var(--ink); border: 0; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 8px; font: 600 11px/1.4 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.form input, .form select, .form textarea {
  width: 100%; font: 400 15px/1.5 var(--sans); color: var(--ink);
  padding: 12px 14px; border: 1px solid #d8d3c8; border-radius: 0; background: #fff;
  transition: border-color .2s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form textarea { min-height: 150px; resize: vertical; }
.form .hidden { display: none; }
@media (max-width: 575px) { .form { grid-template-columns: 1fr; } }

.btn {
  display: inline-block; cursor: pointer;
  font: 600 13px/1 var(--caps); letter-spacing: .25em; text-transform: uppercase;
  color: #fff; background: var(--vine); border: 1px solid var(--vine);
  padding: 18px 38px; transition: background .25s, color .25s;
}
.btn:hover { background: transparent; color: var(--vine); }
.btn-light { background: transparent; border-color: #fff; color: #fff; }
.btn-light:hover { background: #fff; color: var(--ink); }

/* ---------- FAQ ---------- */

.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative;
  font: 400 21px/1.45 var(--serif); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 24px; font: 300 26px/1 var(--sans); color: var(--accent); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; font-size: 16px; }

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

.site-footer { padding: 70px 0 50px; text-align: center; border-top: 1px solid var(--line); }
.site-footer .footer-logo { width: 220px; margin: 0 auto 26px; }
.footer-nav { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.footer-nav a { border: 0; font: 400 16px/1.4 var(--serif); color: var(--ink); }
.footer-nav a:hover { color: var(--accent); }
.site-footer p { font-size: 13px; color: var(--muted); margin: 0 auto 8px; max-width: 720px; }

/* ---------- Reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.no-js .reveal { opacity: 1; transform: none; }

@media (max-width: 575px) { .justify { text-align: left; } }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,0) 35%); pointer-events: none; }

/* guest rating line */
.rating { text-align: center; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.rating .stars { color: var(--accent); letter-spacing: .15em; margin-right: 6px; }
.rating strong { color: var(--ink); font-weight: 600; }

/* grouped amenities (estate page) */
.amenity-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 60px; margin-top: 40px; }
.amenity-groups h4 { font-size: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--accent); margin-bottom: 8px; }
.amenity-groups ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
.amenity-groups li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--body); break-inside: avoid; }
@media (max-width: 991px) { .amenity-groups ul { columns: 1; } }
@media (max-width: 575px) { .amenity-groups { grid-template-columns: 1fr; gap: 36px; } }

.amenity-list.rules { columns: 2 260px; }
.contact-lines a { border-bottom: 1px solid var(--accent); }

/* ---------- Crossfade between pages ---------- */

/* The old page dissolves straight into the new one (View Transitions API).
   Browsers without support simply switch pages instantly. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .49s; animation-timing-function: ease-in-out; }
/* the header is the same on every page, so keep it steady during the fade */
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: .49s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* dark base under banner photos so a slow image never shows white */
.hero, .page-hero { background-color: #3b4a44; }

/* booking page (Airbnb funnel) */
.booking-aside img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 18px; }
.booking-aside .rating { text-align: left; margin: 0 0 26px; }
.booking-aside h4 { margin-top: 0; }
.small-note { font-size: 13px; color: var(--muted); margin-top: -6px; }
img.img-missing { visibility: hidden; }

/* home headline: always two lines, each kept whole; shrinks on narrow
   phones so the longer second line still fits inside the 24px gutters */
.title-split { font-size: min(clamp(28px, 4vw, 42px), calc((100vw - 48px) / 13)); }
.title-split span { display: block; white-space: nowrap; }