:root {
  --ink: #18221d;
  --cream: #f4f0e7;
  --line: rgba(24, 34, 29, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.site-header {
  height: 112px;
  padding: 0 4.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; width: 280px; }
.brand img { display: block; width: 100%; height: auto; }
nav { display: flex; align-items: center; gap: 36px; font-size: 13px; }
nav a { transition: opacity .2s ease; }
nav a:hover { opacity: .58; }
.nav-contact {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 12px 17px;
  display: flex;
  gap: 18px;
}

.hero {
  min-height: calc(100vh - 112px);
  min-height: calc(100svh - 112px);
  padding: 8vh 4.5vw 5vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-glow {
  position: absolute;
  width: 46vw;
  height: 46vw;
  right: -11vw;
  top: -18vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(203, 217, 186, .65), transparent 67%);
  filter: blur(10px);
}
.hero h1 {
  position: relative;
  margin: 4vh 0 6vh;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 8.9vw, 152px);
  font-weight: 400;
  line-height: .89;
  letter-spacing: -.055em;
}
.hero h1 em { font-weight: 400; color: #56695c; }
.hero-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-left: 34%;
}
.hero-bottom p {
  max-width: 520px;
  margin: 0;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.55;
  color: #526058;
}
.round-link {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  transition: background .3s, color .3s, transform .3s;
}
.round-link:hover { background: var(--ink); color: var(--cream); transform: translateY(4px); }
.orbit { position: absolute; border: 1px solid rgba(24,34,29,.08); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 24vw; height: 24vw; right: 10vw; top: 4vw; }
.orbit-two { width: 9vw; height: 9vw; right: 17.5vw; top: 11.5vw; }

.portfolio { background: var(--ink); color: var(--cream); padding: 100px 4.5vw 120px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 34px; }
.section-heading p:first-child {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -.04em;
}
.section-note { color: #aeb8b1; font-size: 13px; }
.property-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.18);
  border-left: 1px solid rgba(255,255,255,.18);
}
.property-card {
  min-height: 580px;
  padding: 26px 28px 34px;
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: background .4s ease, color .4s ease;
}
.card-top { display: flex; justify-content: space-between; font-size: 11px; color: #aeb8b1; z-index: 2; }
.card-arrow { font-size: 24px; transition: transform .3s; }
.property-card:hover .card-arrow { transform: translate(4px,-4px); }
.monogram {
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: absolute;
  right: 7%;
  top: 17%;
  transition: transform .5s ease, border-color .4s;
}
.monogram::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
}
.monogram span { font-family: Georgia, serif; font-size: 90px; font-style: italic; }
.property-card:hover .monogram { transform: rotate(-8deg) scale(1.06); border-color: currentColor; }
.card-copy { max-width: 75%; z-index: 2; }
.card-eyebrow { text-transform: uppercase; letter-spacing: .17em; font-size: 9px; opacity: .65; }
.card-copy h2 {
  font-family: Georgia, serif;
  font-size: clamp(46px, 5.5vw, 80px);
  font-weight: 400;
  letter-spacing: -.05em;
  margin: 8px 0 18px;
}
.card-copy h2 span { color: #9ca99f; }
.card-copy p { max-width: 390px; color: #b8c1bb; line-height: 1.5; margin: 0 0 26px; }
.domain { font-size: 11px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.property-card.coral:hover { background:#c9664f; color:#fff7ee; }
.property-card.blue:hover { background:#2c6170; color:#f3fbfb; }
.property-card.gold:hover { background:#9a7a3e; color:#fffaf0; }
.property-card.violet:hover { background:#5c4e72; color:#faf5ff; }
.property-card:hover .card-copy p,
.property-card:hover .card-top { color: currentColor; opacity:.8; }

.about { padding: 150px 4.5vw 170px; display: grid; grid-template-columns: 1fr 3fr; gap: 4vw; }
.about-label { text-transform: uppercase; font-size: 10px; letter-spacing: .18em; padding-top: 16px; }
.about-copy p { font-size: 13px; color:#6f7a73; margin: 0 0 36px; }
.about h2 {
  font-family: Georgia, serif;
  font-size: clamp(45px, 6.2vw, 94px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 400;
  margin:0;
}
.about h2 em { color:#788b7d; font-weight:400; }

footer { background: #d9dfd1; padding: 90px 4.5vw 32px; }
.footer-lead { display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding-bottom:100px; }
.footer-lead > span { font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.footer-lead a {
  font-family:Georgia, serif;
  font-size:clamp(60px, 10vw, 150px);
  line-height:1;
  letter-spacing:-.055em;
  border-bottom:2px solid var(--ink);
}
.footer-lead a span {
  font-family:Arial, sans-serif;
  font-size:.45em;
  display:inline-block;
  vertical-align:top;
  margin-top:.1em;
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:26px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  font-size:11px;
}
.footer-bottom p:nth-child(2) { text-align:center; }
.footer-bottom p:last-child { text-align:right; }
.brand-footer { width:145px; }

.reveal { animation: rise .8s cubic-bezier(.22,.75,.28,1) both; }
.reveal-delay-1 { animation-delay:.1s; }
.reveal-delay-2 { animation-delay:.2s; }
@keyframes rise {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:none; }
}

@media (max-width: 760px) {
  .site-header { height:82px; padding:0 20px; }
  .brand { width:205px; }
  nav > a:not(.nav-contact) { display:none; }
  .nav-contact { padding:10px 13px; }
  .hero { min-height: calc(100svh - 82px); padding:9vh 20px 30px; }
  .hero h1 { font-size: clamp(53px, 15.5vw, 84px); line-height:.93; margin: 6vh 0; }
  .hero-bottom { padding:0; gap:26px; align-items:flex-end; }
  .hero-bottom p { font-size:15px; max-width:75%; }
  .round-link { width:68px;height:68px; }
  .orbit { display:none; }
  .portfolio { padding:70px 20px 80px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .section-note { margin:0; }
  .property-grid { grid-template-columns:1fr; }
  .property-card { min-height:480px; padding:22px; }
  .monogram { width:160px;height:160px; top:18%; }
  .monogram span { font-size:70px; }
  .card-copy { max-width:92%; }
  .card-copy h2 { font-size:54px; }
  .about { padding:90px 20px 110px; grid-template-columns:1fr; gap:35px; }
  .about h2 { font-size:47px; }
  footer { padding:70px 20px 24px; }
  .footer-lead { padding-bottom:75px; }
  .footer-lead a { font-size:18vw; }
  .footer-bottom { grid-template-columns:1fr 1fr; gap:22px; }
  .brand-footer { width:128px; }
  .footer-bottom p:nth-child(2) { display:none; }
  .footer-bottom p:last-child { text-align:right; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none!important; transition:none!important; }
}