/* Brooklyn Woods LLC — shared stylesheet */
:root {
  --forest: #1c2822;
  --forest-deep: #141d18;
  --cream: #f6f4ee;
  --paper: #fdfcf9;
  --ink: #22221c;
  --soft: #6e6c62;
  --brass: #a8894f;
  --brass-dark: #8a6f3c;
  --hairline: #e3e0d5;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; }

/* ---------- Navigation ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 252, 249, 0.96);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(6px);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #55565b; text-decoration: none;
  white-space: nowrap; display: flex; align-items: center; gap: 13px;
}
.wordmark img { height: 60px; width: auto; display: block; }
.wordmark small { font-size: 11px; letter-spacing: 0.22em; color: var(--brass); margin-left: 8px; align-self: flex-end; padding-bottom: 2px; }
nav.primary { display: flex; gap: 36px; }
nav.primary a {
  font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--soft); text-decoration: none; padding-bottom: 4px;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
nav.primary a:hover { color: var(--forest); }
nav.primary a.active { color: var(--forest); border-bottom-color: var(--brass); }

/* ---------- Shared blocks ---------- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.eyebrow {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 22px; font-weight: 500;
}
h1.display {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: clamp(38px, 5.4vw, 62px); line-height: 1.12; color: var(--forest);
  max-width: 17em;
}
h2.section {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; color: var(--forest);
  max-width: 18em;
}
.lede { font-size: 18px; line-height: 1.8; color: var(--soft); max-width: 640px; }
.rule { border: 0; border-top: 1px solid var(--hairline); }
.on-dark { color: var(--cream); }
.on-dark h1.display, .on-dark h2.section { color: var(--cream); }
.on-dark .lede { color: rgba(246, 244, 238, 0.72); }
.on-dark .eyebrow { color: var(--brass); }

.btn {
  display: inline-block; margin-top: 36px; padding: 14px 34px;
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); background: transparent; text-decoration: none;
  border: 1px solid var(--brass); transition: background .25s, color .25s;
}
.btn:hover { background: var(--brass); color: var(--forest-deep); }
.btn.dark-on-light { color: var(--forest); }
.btn.dark-on-light:hover { color: var(--cream); background: var(--forest); }

/* ---------- Photo bands ---------- */
.photo-band { height: 420px; background-color: var(--forest); background-size: cover; background-position: center; }
@media (max-width: 760px) { .photo-band { height: 240px; } }

/* ---------- Footer ---------- */
footer.site {
  background: var(--forest-deep); color: rgba(246, 244, 238, 0.55);
  padding: 64px 0 48px; margin-top: 0;
}
footer.site .container { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
footer.site .fm {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream);
}
footer.site .fm span { color: var(--brass); }
footer.site p { font-size: 12.5px; line-height: 1.8; max-width: 520px; }
footer.site a { color: rgba(246, 244, 238, 0.75); text-decoration: none; border-bottom: 1px solid rgba(168, 137, 79, 0.5); }
footer.site a:hover { color: var(--cream); }
footer.site .cols { display: flex; gap: 56px; }
footer.site .cols h4 {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 12px; font-weight: 500;
}
footer.site .cols li { list-style: none; font-size: 13px; margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .nav-inner { flex-direction: column; gap: 14px; align-items: flex-start; padding: 18px 24px; }
  nav.primary { gap: 22px; flex-wrap: wrap; }
  .container { padding: 0 24px; }
  footer.site .container { flex-direction: column; }
}