/* ============================================================
   Forest View Residency — shared design tokens & components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --forest-900:#16281F;
  --forest-800:#1B3226;
  --forest-700:#1F3D2E;
  --forest-500:#3E5C46;
  --sage-100:#E8EEE7;
  --sage-200:#D8E3D8;
  --stone-50:#F6F4EF;
  --stone-100:#EFECE4;
  --brass-500:#AD8A4E;
  --brass-600:#8F6F3B;
  --ink-900:#1B1D1B;
  --ink-600:#5A6059;
  --ink-400:#8A8F87;
  --white:#FFFFFF;
  --line:#E1DED4;

  --font-display:'Fraunces', Georgia, serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink-900);
  background:var(--stone-50);
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width:var(--max-width); margin:0 auto; padding:0 28px; }

/* ---------- Typography ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:500; color:var(--forest-800); margin:0; }
h1{ font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.08; }
h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); line-height:1.15; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; max-width:62ch; }
p.lede{ font-size:1.15rem; color:var(--ink-600); }
.eyebrow-free{ /* deliberately no eyebrow labels used anywhere on this site */ }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,244,239,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .mark{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  flex:0 0 auto;
}
.brand .name{ font-family:var(--font-display); font-size:17px; color:var(--forest-800); line-height:1.1; }
.brand .loc{ font-size:10.5px; color:var(--ink-600); letter-spacing:.02em; }

.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-900); }
.nav-links a:hover{ color:var(--forest-700); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; text-decoration:none;
  padding:13px 26px; font-size:14.5px;
  transition:transform .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--brass-500); color:var(--white); }
.btn-primary:hover{ background:var(--brass-600); }
.btn-outline{ background:transparent; color:var(--forest-800); border:1.5px solid var(--forest-800); }
.btn-outline:hover{ background:var(--forest-800); color:var(--white); }
.btn-sm{ padding:9px 18px; font-size:13px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--forest-900); color:#C9D3C7; padding:64px 0 32px; margin-top:110px; }
.site-footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer-brand img{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; }
.footer-brand .name{ font-family:var(--font-display); font-size:19px; color:var(--white); line-height:1.15; }
.footer-tagline{ font-family:var(--font-display); font-style:italic; font-size:14px; color:#9FB09B; margin:0 0 18px; }
.site-footer h4{ color:var(--white); font-family:var(--font-display); font-weight:500; font-size:16px; margin:0 0 14px; }
.site-footer a{ text-decoration:none; color:#C9D3C7; }
.site-footer a:hover{ color:var(--white); }
.site-footer .col p, .site-footer .col a{ display:block; font-size:14px; margin:0 0 8px; }
.footer-base{
  max-width:var(--max-width); margin:48px auto 0; padding:24px 28px 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; color:#8FA091;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

@media (max-width: 860px){
  .nav-links{ display:none; }
  .site-footer .wrap{ grid-template-columns:1fr; gap:32px; }
}