/* Shared styles for every page: self-hosted fonts, menu bar behaviour,
   page transitions and smooth scrolling. Loaded after each page's own styles. */

/* ---------- Fonts (self-hosted; no requests to Google) ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-wght-normal.woff2') format('woff2-variations'),
       url('fonts/cormorant-garamond-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-wght-italic.woff2') format('woff2-variations'),
       url('fonts/cormorant-garamond-latin-wght-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jost-latin-wght-normal.woff2') format('woff2-variations'),
       url('fonts/jost-latin-wght-normal.woff2') format('woff2');
}

:root {
  --tide: cubic-bezier(.22, 1, .36, 1);     /* glides to a stop */
  --tide-io: cubic-bezier(.76, 0, .24, 1);  /* curtains and panels */
  --forest-curtain: #2c4a3e;
}

/* Images carry their real width/height so the browser can reserve their space
   before they load (no jumping). Sizes set in each page's styles still win. */
:where(img[width][height]) { height: auto; }

/* ---------- Menu bar: tucks away on scroll down, returns on scroll up ---------- */
.nav {
  transition: transform .7s var(--tide), background .4s ease, box-shadow .4s ease;
  will-change: transform;
}
.nav.nav-hidden { transform: translateY(-100%); }

/* ---------- Smooth scrolling (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Page transitions: a forest-green curtain with the full logo ---------- */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--forest-curtain) url('logo-curtain.png') center / min(260px, 62vw) auto no-repeat;
  clip-path: inset(100% 0 0 0);
}
/* leaving: the curtain rises from the bottom to cover the page */
html.pt-leave::after {
  clip-path: inset(0 0 0 0);
  transition: clip-path .65s var(--tide-io);
  pointer-events: all;
}
/* arriving: the page starts covered ... */
html.pt-enter::after { clip-path: inset(0 0 0 0); }
/* ... then the curtain lifts off the top */
html.pt-enter.pt-lift::after {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--tide-io) .05s;
}

/* ---------- Gold cursor ring (computers only) ---------- */
.cursor-ring { position: fixed; top: 0; left: 0; z-index: 9000; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid #b8976a; border-radius: 50%; pointer-events: none; opacity: 0; transition: width .5s var(--tide), height .5s var(--tide), margin .5s var(--tide), background-color .5s var(--tide), opacity .4s; }
.cursor-ring.on { opacity: .9; }
.cursor-ring.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(184,151,106,.12); }

@media (prefers-reduced-motion: reduce) {
  .cursor-ring { display: none; }
  html::after { display: none; }
  .nav { transition: background .4s ease, box-shadow .4s ease; }
  .nav.nav-hidden { transform: none; }
}

/* ---------- Readability: small grey and gold text made easier to read ---------- */
.footer-contact-label { color: #9d978f; }
.footer-legal, .footer-copy { color: #9a958e; }
.footer-legal a { color: #cfc9c0; }
.post-meta span, .sidebar-related-date, .post-nav-back, .area-tab, .sidebar-card .sidebar-agent-title,
.testimonials-count { color: #6c645b; }
.intro .label, .sidebar-related h4, .community-card-body .label, .community-grid-head .label,
.area-overview-head .label { color: #8a6c42; }
.post-hero-byline, .post-hero-meta span:not(.post-hero-cat), .post-crumbs span { color: rgba(255,255,255,.66) !important; }