:root {
  --pine: #18352b;
  --pine-dark: #0c211a;
  --paper: #fbf7ed;
  --cream: #f0e9dc;
  --copper: #925d3b;
  --ink: #23342c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.75 system-ui, -apple-system, "Segoe UI", sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--pine); text-underline-offset: 4px; }
a:hover { color: var(--copper); }
a:focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.1; }
h1 { font-size: clamp(36px, 5vw, 64px); color: var(--pine); margin: 0 0 22px; }
h2 { font-size: clamp(32px, 4vw, 46px); color: var(--pine); margin: 0 0 22px; }
p { margin: 0 0 18px; }
[id] { scroll-margin-top: 80px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 28px; padding: 14px clamp(18px, 4vw, 40px);
  background: rgba(251, 247, 237, .96);
  border-bottom: 1px solid #e2ddd0;
}
.brand {
  text-decoration: none; color: var(--pine);
  font: 700 15px Georgia, serif; letter-spacing: .16em; text-transform: uppercase;
}
.top nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.top nav a {
  text-decoration: none; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* Hero */
.hero { position: relative; min-height: min(82svh, 760px); display: grid; align-items: end; color: #fff; overflow: hidden; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 24, 18, .78), rgba(8, 24, 18, .1) 65%); }
.hero-text { position: relative; z-index: 1; width: min(1100px, 90%); margin: 0 auto; padding: 0 0 clamp(48px, 8vw, 96px); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #ecc9a6; margin: 0 0 14px; }
.hero h1 { font-size: clamp(48px, 8vw, 104px); margin: 0 0 16px; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.lede { font: italic clamp(20px, 2.6vw, 30px)/1.4 Georgia, serif; max-width: 30ch; color: #f4ecdd; margin: 0; }

/* Text and photo blocks */
.block {
  width: min(1100px, 90%); margin: 0 auto; padding: clamp(64px, 9vw, 110px) 0;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center;
  border-bottom: 1px solid #e2ddd0;
}
.block.flip .text { order: 2; }
.block.single { grid-template-columns: 1fr; text-align: center; border-bottom: 0; }
.block.single .text { max-width: 620px; margin: 0 auto; }
.text p { max-width: 60ch; }
figure { margin: 0; }
figcaption { font-size: 14px; color: #5f6a62; margin-top: 10px; }
.contact a { font: clamp(22px, 3vw, 30px) Georgia, serif; }

/* Full-width land section */
.wide { position: relative; color: #fff; min-height: 560px; display: grid; align-items: center; overflow: hidden; }
.wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 24, 18, .82), rgba(8, 24, 18, .2)); }
.wide-text { position: relative; z-index: 1; width: min(1100px, 90%); margin: 0 auto; padding: 90px 0; }
.wide-text h2 { color: #fff; }
.wide-text p { max-width: 46ch; font-size: 19px; }

/* Footer */
footer { background: var(--pine-dark); color: #d6e0d8; text-align: center; padding: 56px 24px; font-size: 15px; }
footer p { margin: 0 0 10px; }
footer a { color: #f0e2cf; margin: 0 12px; display: inline-block; }
.foot-brand { font: 22px Georgia, serif; color: #fff; }
.links { margin: 22px 0 !important; }
.small { font-size: 13px; color: #9fb1a5; }

@media (max-width: 800px) {
  .top nav { gap: 6px 14px; }
  .top nav a { font-size: 11px; letter-spacing: .06em; }
  .block { grid-template-columns: 1fr; }
  .block.flip .text { order: 0; }
  .wide::after { background: rgba(8, 24, 18, .66); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }