/* Gatcombe Estate — site components v0.42
   Shared across every page. brand.css must be loaded first.
   v0.42 — NEW PAGE: find-us.html. Replaces the old footer
           "View on map" link that pointed at a broken Google Maps
           short-link. The new page has an embedded Google Map
           (using the public q= embed, no API key required); the
           postcode PO30 3EJ and what3words ///given.washable.compliant
           prominently displayed; Open-in-Google-Maps and
           Open-in-Apple-Maps buttons; side-by-side ferry directions
           from Southampton-to-East-Cowes (Red Funnel) and
           Portsmouth-to-Fishbourne (Wightlink), each ending at the
           Old Stable Block parking; and a four-card practical-info
           strip (Parking, Accessibility, Dogs, Contact). Footer
           on all 10 existing pages updated: "View on map" link
           now points at find-us.html with the label "Directions
           & map".
   v0.41 — house.html timeline extended to 8 moments (Campbells
           "c. 1795 — The Campbells of Ardchattan" describing
           Col. Alexander Campbell's marriage to Jane Meux Worsley
           and the landscaping legacy. Verified via Wikipedia (their
           son Alexander Glynn Campbell, MP for Fowey, born at
           Westover Lodge IoW 10 Aug 1796). The "by Campbell's own
           admission, at great personal cost" line gives the entry
           a human touch and echoes the prose paragraph below.
           Grid now reads as a balanced 4×2 rather than 4+3.
   v0.40 — home hero: "Watch the film · 2:14" play arrow overlay
           removed from the hero (markup only — CSS rules for
           .play-tag remain in site.css dormant, so if a film is
           later produced the overlay can return with a single
           markup snippet).
   v0.39 — "Pl. NN ·" prefix stripped from all five photo captions on
           the site (four on the home photo essay, one on the vineyard
           page eyebrow). Captions now read as plain descriptions —
           "Pinot Noir at harvest", "The lake, May", "Park South
           Vineyard, June", "A great plane tree, midsummer". The Plate
           numbering was decorative; without an actual catalogue to
           reference it felt slightly precious. The .plate CSS class
           in house.html is internal styling, not visible to readers.
   v0.38 — vineyard close-up patch refined: berry repair using
           grapes_pinot_close.jpg repaired by cloning a strip from
           the intact berry surface immediately above (90-pixel
           vertical clone, gaussian-feathered seam blend).
   v0.36 — nav legibility lift: link opacity raised from 0.85 to 0.95
           and a gentle text-shadow (0 1px 6px rgba(0,0,0,0.25))
           added on both .nav a and .door-label, so the menu reads
           crisply against bright skies and bright foliage. The
           shadow is cleared on the scrolled/solid nav state so the
           links sit cleanly on the dark-green bar without muddying.
   v0.35 — rebuilt from v0.29 base after a CSS comment-block bug in
           v0.33-v0.34 broke the entire stylesheet. All design intact
           (dark-green floating nav, seal, palette). Content updates:
           home marquee strip removed; tagline now "A Domesday estate,
           in three modern lives"; photo essay captions Pl.03 Park
           South Vineyard, Pl.04 a great plane tree; Experience door
           links direct to garden-tour.html and vineyard-tour.html
           (new pages, single-month calendar with prev/next arrows);
           garden tour Wednesday afternoons only at £15 (calendar JS
           dow=3, gardens.html collapsed to a single weekly Wednesday
           block, home and visit summary aligned); vineyard tour
           Tue & Thu 2-4pm + Wed sunset 5.30-7.30pm at £45 (calendar
           shows Tue/Wed/Thu, date-select banner shows the right time
           per day, sharing-board copy refined to pairings through
           the tasting). booking-flow demo calendar Thursdays removed.
   v0.29 — climate paragraph refined; winery sentence refined
           (Speidel tanks, François Frères barrels).
   v0.28 — house.html: timeline expanded from 4 to 7 moments,
           history-feature prose woven with noble-family thread;
           vineyard.html: 1350 wine-press note added to intro. */

/* ============== NAV ============== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 26px 44px;
  color: var(--sand-light);
  transition: background .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled,
.nav.solid {
  background: rgba(46,71,50,0.96);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(216,192,131,0.20);
}
.nav.scrolled a,
.nav.solid a,
.nav.scrolled .door .door-label,
.nav.solid .door .door-label {
  text-shadow: none;
}
.nav .left,
.nav .right {
  display: flex; gap: 32px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: var(--track-medium); text-transform: uppercase;
}
.nav .right { justify-content: flex-end; }
.nav a { color: inherit; text-decoration: none; opacity: 0.95; text-shadow: 0 1px 6px rgba(0,0,0,0.25); transition: color .2s, opacity .2s, text-shadow .35s; }
.nav a:hover { opacity: 1; color: var(--bud-green); }
.nav a.active { color: var(--bud-green); opacity: 1; }
.nav .center a { display: block; line-height: 0; }
.nav .center img {
  height: 100px; width: auto; display: block;
  /* The PNG is white-on-transparent. Drop-shadow filter turns the visible
     silhouette into the colour we want, and we suppress the original
     white pixels by making them transparent via brightness(0) + invert
     no — simpler & robust: hue-rotate doesn't shift greys. Use this:
     keep the original white visible by default; on hover, recolour
     using a chain of filters that maps white → bud green (#98CC6C). */
  transition: filter .25s ease, height .35s ease, opacity .25s ease;
}
.nav.scrolled .center img { height: 76px; }
/* Hover recolour: white silhouette → bud green (#98CC6C).
   Calibrated filter chain: brightness(0) zeroes the source to black,
   invert flips back to a base white, then sepia + saturate +
   hue-rotate dial in the green. */
.nav .center a:hover img,
.nav .center a:focus-visible img {
  filter:
    brightness(0) saturate(100%)
    invert(80%) sepia(38%) saturate(537%)
    hue-rotate(40deg) brightness(99%) contrast(89%);
}

/* HOVER DOORS */
.nav .door { position: relative; }
.nav .door .door-label {
  display: inline-block; padding: 6px 0; cursor: pointer; opacity: 0.95;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
  transition: opacity .2s, color .2s, text-shadow .35s;
}
.nav .door:hover .door-label { opacity: 1; color: var(--bud-green); }
.nav .door .door-label::after {
  content: '·'; margin-left: 8px; color: var(--bud-green); opacity: 0.7;
  display: inline-block; transition: transform .25s, opacity .2s;
}
.nav .door:hover .door-label::after { opacity: 1; transform: rotate(90deg); }

.nav .door .menu {
  position: absolute; top: 100%; right: 0; margin-top: 16px;
  min-width: 280px;
  background: var(--estate-green-deep);
  border: 1px solid rgba(216,192,131,0.20);
  border-radius: 2px;
  padding: 16px 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s, transform .25s, visibility .25s;
  pointer-events: none;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.5);
}
.nav .door:hover .menu,
.nav .door:focus-within .menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
}
.nav .door .menu a {
  display: block; padding: 11px 26px;
  font-family: var(--serif-display); font-size: 18px;
  letter-spacing: 0.005em; text-transform: none;
  color: var(--sand-light); text-align: left;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  opacity: 1;
}
.nav .door .menu a:hover {
  color: var(--bud-green); background: rgba(152,204,108,0.06);
  border-left-color: var(--bud-green);
}
.nav .door .menu .meta {
  display: block; padding: 4px 26px 6px;
  font-family: var(--sans); font-size: 9px; letter-spacing: var(--track-loose);
  text-transform: uppercase; color: var(--sand); opacity: 0.65;
}
.nav .door .menu .ghost a { color: var(--sand); opacity: 0.45; pointer-events: none; }
.nav .door .menu .divider {
  height: 1px; background: rgba(216,192,131,0.18); margin: 10px 26px;
}

/* ============== HERO ============== */
.hero {
  position: relative; height: 100vh; min-height: 720px;
  overflow: hidden; color: var(--sand-light);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero.short { height: 70vh; min-height: 520px; }
.hero .media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hero .media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(31,51,36,0.55) 0%, rgba(31,51,36,0.10) 35%, transparent 55%, rgba(31,51,36,0.30) 100%);
}
.hero .play-tag {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  pointer-events: none;
}
.play-tag .ring {
  width: 92px; height: 92px;
  border: 1px solid rgba(216,192,131,0.55); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.play-tag .ring::after {
  content: ''; width: 0; height: 0; margin-left: 6px;
  border-style: solid; border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent var(--sand);
}
.play-tag .lbl {
  font-family: var(--sans); font-size: 10px; letter-spacing: var(--track-loose);
  text-transform: uppercase; color: var(--sand); opacity: 0.95;
}

.hero .content {
  position: relative; z-index: 1;
  padding: 0 var(--gutter) 80px;
  max-width: 1500px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 32px;
}
.hero h1 {
  font-family: var(--serif-display); font-weight: 400; line-height: 0.98;
  font-size: clamp(56px, 8vw, 132px); letter-spacing: -0.015em; margin: 0;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--bud-green); }
.hero .meta {
  font-family: var(--sans); font-size: 11px; letter-spacing: var(--track-loose);
  text-transform: uppercase; color: var(--sand); opacity: 0.92;
  text-align: right; line-height: 1.8;
}
.hero .breadcrumb {
  font-family: var(--sans); font-size: 10px; letter-spacing: var(--track-loose);
  text-transform: uppercase; color: var(--sand); opacity: 0.75;
  margin-bottom: 24px;
}

/* ============== MARQUEE ============== */
.strip {
  background: var(--estate-green); color: var(--sand);
  padding: 22px 0; overflow: hidden;
  font-family: var(--serif-display); font-style: italic; font-size: 22px;
}
.strip-track {
  display: flex; gap: 64px; white-space: nowrap;
  animation: scroll 60s linear infinite;
}
.strip-track span { display: inline-flex; align-items: center; gap: 64px; }
.strip-track .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bud-green); display: inline-block;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============== SECTIONS ============== */
section { padding: 110px 0; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }

.sec-eyebrow {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  color: var(--estate-green);
}
.sec-title {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); line-height: 1.05;
  margin: 12px 0 0; letter-spacing: -0.01em;
  max-width: 900px; text-wrap: balance;
}
.sec-title em { font-style: italic; color: var(--bud-green-deep); }
.sec-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end; padding-bottom: 56px;
}
.sec-head .lede {
  font-family: var(--serif-body); font-size: 19px; line-height: 1.55;
  color: var(--ink-soft); max-width: 480px; justify-self: end;
}

/* prose blocks for content-heavy pages */
.prose { font-family: var(--serif-body); font-size: 19px; line-height: 1.65; color: var(--ink); }
.prose p { margin: 0 0 1.2em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; }
.prose h2 {
  font-family: var(--serif-display); font-weight: 400;
  font-size: 26px; line-height: 1.25; color: var(--ink);
  margin: 1.8em 0 0.6em; letter-spacing: 0.01em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--serif-display); font-weight: 400; font-style: italic;
  font-size: 21px; line-height: 1.3; color: var(--bud-green-deep);
  margin: 1.4em 0 0.5em;
}
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: 0 0 0.5em; }
.prose .last-updated {
  margin-top: 2.2em; font-style: italic; color: var(--ink-soft); font-size: 16px;
}

.pull-quote {
  font-family: var(--serif-display); font-style: italic;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.3;
  color: var(--ink); margin: 40px 0; text-align: center;
  max-width: 720px; margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.pull-quote .by {
  display: block; margin-top: 16px;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  color: var(--estate-green); font-style: normal;
}

/* ============== TRIO CARDS ============== */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  border-radius: 2px; background: var(--estate-green);
  color: var(--sand-light); cursor: pointer; display: block;
  text-decoration: none;
}
.card .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.2s ease;
}
.card:hover .bg { transform: scale(1.04); }
.card .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,51,36,0.85) 0%, rgba(31,51,36,0.15) 50%, transparent 100%);
}
.card .seal { position: absolute; top: 28px; right: 28px; }
.card .seal img { height: 84px; opacity: 0.95; }
.card .body { position: absolute; left: 28px; right: 28px; bottom: 28px; }
.card .label-num {
  font-family: var(--sans); font-size: 10px;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  color: var(--bud-green);
}
.card h3 {
  font-family: var(--serif-display); font-weight: 400;
  font-size: 38px; line-height: 1; margin: 8px 0 14px;
  letter-spacing: var(--track-tight); text-transform: uppercase;
}
.card p {
  font-family: var(--serif-body); font-style: italic;
  font-size: 15px; line-height: 1.4;
  color: var(--sand); margin: 0;
}
.card .arrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  color: var(--sand-light);
}
.card .arrow::after { content: '→'; color: var(--bud-green); font-size: 16px; }

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  padding: 14px 22px; border: 1px solid currentColor; border-radius: 1px;
  text-decoration: none; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.btn:hover { background: var(--sand); color: var(--estate-green); border-color: var(--sand); }
.btn.solid { background: var(--sand); color: var(--estate-green-deep); border-color: var(--sand); }
.btn.solid:hover { background: transparent; color: var(--sand); border-color: var(--sand); }
.btn.dark { background: var(--estate-green); color: var(--sand); border-color: var(--estate-green); }
.btn.dark:hover { background: var(--estate-green-deep); border-color: var(--estate-green-deep); }
.ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============== QUOTE BAND ============== */
.quoteband { background: var(--sand-light); text-align: center; padding: 140px var(--gutter); }
.quoteband blockquote {
  font-family: var(--serif-display); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px); line-height: 1.1;
  max-width: 1000px; margin: 0 auto; letter-spacing: -0.005em;
  color: var(--ink); text-wrap: balance;
}
.quoteband .src {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  color: var(--estate-green); margin-top: 28px;
}

/* ============== FOOTER ============== */
.footer {
  background: var(--estate-green-deep); color: var(--sand);
  padding: 64px var(--gutter) 30px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  position: relative; z-index: 2;
  /* A clean parchment band sits above the footer so a preceding
     full-bleed photo never reads as bleeding into the footer text. */
  border-top: 12px solid var(--paper);
}
.footer .grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(216,192,131,0.18);
}
.footer .col h4 {
  font-family: var(--sans); font-size: 10px;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  color: var(--sand); opacity: 0.7;
  margin: 0 0 14px; font-weight: 500;
}
.footer .col a, .footer .col span, .footer .col p {
  display: block; color: var(--sand-light);
  font-family: var(--serif-body); font-size: 14px; line-height: 1.6;
  letter-spacing: 0; text-transform: none;
  text-decoration: none; opacity: 0.85;
  margin: 0 0 6px;
}
.footer .col a:hover { color: var(--bud-green); opacity: 1; }
.footer .seal { display: block; margin-bottom: 16px; }
.footer .seal img { height: 64px; opacity: 0.9; }
.footer .footer-bottom {
  max-width: var(--max-w); margin: 0 auto;
  padding-top: 30px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; opacity: 0.65; flex-wrap: wrap; gap: 20px;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 880px) {
  .nav { padding: 16px 20px; grid-template-columns: auto 1fr; }
  .nav .left, .nav .right { display: none; }
  .nav.solid { display: grid; grid-template-columns: auto 1fr; }
  .hero .content { grid-template-columns: 1fr; }
  .hero .meta { text-align: left; }
  .trio { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; }
  .footer .grid { grid-template-columns: 1fr 1fr; }
}