:root {
  color-scheme: light;
  --ink: #243127;
  --muted: #505a4e;
  --paper: #f8f6ee;
  --line: #d0d3c4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 1rem/1.6 "Instrument Sans", Arial, sans-serif;
}
a { color: inherit; }
a:focus-visible { outline: 3px solid #7b5423; outline-offset: 5px; }
.skip { position: absolute; top: .5rem; left: .5rem; padding: .5rem; background: white; transform: translateY(-150%); z-index: 2; }
.skip:focus { transform: none; }
.wrap { width: min(1280px, calc(100% - 2 * clamp(20px, 5vw, 80px))); margin-inline: auto; }
.masthead, .footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.375rem; }
.masthead { border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font: 1.5rem/1 "Instrument Serif", Georgia, serif; }
.brand small { display: block; margin-top: .3rem; font: bold .65rem/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--ink); color: var(--paper); font-style: italic; }
nav a, .footer > a:last-child { font-size: .875rem; text-underline-offset: .28em; }
.hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 5vw, 80px); padding-block: clamp(36px, 6vw, 96px); }
.eyebrow { margin: 0 0 1rem; font-size: .72rem; font-weight: bold; text-transform: uppercase; letter-spacing: .17em; }
h1, h2, h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: normal; margin: 0; }
h1 { font-size: clamp(3rem, 5.1vw, 5.75rem); line-height: .99; letter-spacing: -.055em; }
h1 em { color: #4d6047; }
.lede { max-width: 43ch; margin: 1.4rem 0 1.7rem; color: var(--muted); }
.button { display: inline-flex; align-items: center; gap: 1.7rem; padding: .8rem 1.1rem; background: var(--ink); color: white; text-decoration: none; font-weight: bold; font-size: .88rem; }
.button:hover { background: #3f513c; }
.landscape { aspect-ratio: 1.22; background: #c8cdba; overflow: hidden; }
.landscape img { display: block; width: 100%; height: 100%; object-fit: cover; }
.services { background: #e8ebdf; padding-block: clamp(34px, 5vw, 72px); }
h2 { font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1.06; letter-spacing: -.035em; margin-bottom: 1.65rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 6vw, 96px); }
article { border-top: 1px solid #bbc3b2; padding: 1.2rem 0 1.45rem; }
h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.15; }
article p { margin: .55rem 0 0; max-width: 54ch; color: var(--muted); }
@media (max-width: 760px) {
  .hero, .grid { grid-template-columns: 1fr; }
  .landscape { aspect-ratio: 1.55; }
}