:root {
  --bg: #f6f3ec;
  --ink: #252b2b;
  --muted: #77766f;
  --line: #dfd9cf;
  --accent: #a16b4f;
  --dark: #303b39;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.wrap { width: min(1160px, calc(100% - 64px)); margin: auto; }

.header { border-bottom: 1px solid var(--line); }
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 90px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .13em;
}
.brand-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 27px var(--serif);
  letter-spacing: 0;
}
.brand-light { font-weight: 400; color: var(--muted); }
nav { display: flex; gap: 33px; }
nav a {
  font-size: 12px;
  text-decoration: none;
  color: var(--muted);
}
nav a:hover { color: var(--accent); }

.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 7%;
  min-height: 675px;
  padding-top: 65px;
  padding-bottom: 85px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .19em;
  line-height: 1.8;
}
.eyebrow-line { display: block; width: 24px; height: 1px; background: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  font: 400 clamp(58px, 6.2vw, 91px)/1.08 var(--serif);
  letter-spacing: -.055em;
  margin: 30px 0;
}
h1 em, h2 em, .closing-text em {
  font-weight: 400;
  color: var(--accent);
}
.intro {
  color: var(--muted);
  max-width: 405px;
  font-size: 15px;
  line-height: 1.95;
}
.hero-link {
  display: inline-flex;
  gap: 38px;
  align-items: center;
  margin-top: 26px;
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 650;
  border-bottom: 1px solid var(--accent);
  text-decoration: none;
}
.hero-link span { font-size: 20px; color: var(--accent); }
.hero-link:hover { color: var(--accent); }

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.08;
  background: #eae4d8;
  overflow: hidden;
  isolation: isolate;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(90,80,66,.20);
}
.art-orbit {
  position: absolute;
  border: 1px solid rgba(161,107,79,.37);
  border-radius: 50%;
  width: 77%;
  aspect-ratio: 1;
}
.orbit-one { transform: translate(-12%,0); }
.orbit-two { transform: translate(12%,0); }
.orbit-three {
  width: 57%;
  border-color: rgba(60,70,60,.18);
}
.art-letter {
  position: relative;
  z-index: 2;
  font: 400 clamp(140px, 20vw, 290px)/1 var(--serif);
  letter-spacing: -.08em;
  color: var(--dark);
  padding-right: .08em;
}
.art-caption, .art-number {
  position: absolute;
  font-size: 9px;
  letter-spacing: .18em;
  color: #70695e;
}
.art-caption { bottom: 44px; left: 45px; }
.art-number { top: 45px; right: 45px; }

.family-section {
  background: var(--dark);
  color: #f2efe8;
  padding: 110px 0 125px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 47px;
}
.section-heading h2 {
  font: 400 clamp(42px, 5vw, 66px)/1.15 var(--serif);
  letter-spacing: -.045em;
  margin: 15px 0 0;
}
.section-heading h2 em { color: #d5a98b; }
.section-heading > p {
  color: #aaaead;
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 7px;
}
.members { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.member {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #414b48;
  border: 1px solid #56605a;
  min-height: 340px;
  padding: 27px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.member:hover { background: #4b5853; transform: translateY(-4px); }
.member-top { display: flex; justify-content: space-between; align-items: start; }
.member-num { color: #c2b5a8; font-size: 11px; letter-spacing: .12em; }
.member-arrow { font-size: 21px; color: #d5a98b; }
.member-initial {
  align-self: center;
  font: 140px/.9 var(--serif);
  color: rgba(230,218,201,.18);
}
.member h3 { margin: 0; font: 29px var(--serif); }
.member h3 span { color: #c6b9a8; }
.member-bottom p { margin: 9px 0 0; color: #b7c0ba; font-size: 12px; }

.closing {
  text-align: center;
  padding-top: 135px;
  padding-bottom: 145px;
}
.closing .eyebrow { justify-content: center; }
.closing-text {
  max-width: 810px;
  margin: 24px auto;
  font: 400 clamp(35px, 4.7vw, 60px)/1.24 var(--serif);
  letter-spacing: -.035em;
}
.closing-small {
  max-width: 430px;
  margin: auto;
  color: var(--muted);
  line-height: 1.85;
  font-size: 13px;
}
.footer { border-top: 1px solid var(--line); padding: 30px 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-brand { text-decoration: none; font: 23px var(--serif); }
.footer p, .footer span { margin: 0; font-size: 11px; color: var(--muted); }

@media(max-width: 850px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { max-width: 580px; width: 100%; margin: auto; }
  .members { grid-template-columns: 1fr; }
  .member { min-height: 230px; }
  .member-initial { font-size: 85px; }
}
@media(max-width: 550px) {
  .wrap { width: calc(100% - 36px); }
  .nav { min-height: 75px; }
  .brand-light { display: none; }
  nav { gap: 17px; }
  .hero { padding-top: 55px; padding-bottom: 60px; }
  h1 { font-size: clamp(48px, 12vw, 70px); }
  .family-section { padding: 75px 0; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 20px; }
  .closing { padding: 95px 0; }
  .footer-inner { flex-wrap: wrap; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .member { transition: none; }
}