:root { --ink: #19251f; --pine: #24362d; --cream: #f2ede2; --sand: #d9cfbd; --terracotta: #b6523d; --line: rgba(25,37,31,.18); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; font-size: 16px; }
.announcement { height: 32px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--cream); background: var(--terracotta); font: 11px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
.announcement span { opacity: .7; }
.site-header { height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(24px,5vw,78px); border-bottom: 1px solid var(--line); background: var(--cream); }
.wordmark { color: var(--ink); text-decoration: none; font: 500 18px/1 "DM Sans", sans-serif; letter-spacing: .08em; white-space: nowrap; }.wordmark em { font-family: "Playfair Display", serif; font-size: 1.25em; letter-spacing: -.04em; }
nav { display: flex; gap: 30px; } nav a, .header-cta { color: var(--ink); text-decoration: none; text-transform: uppercase; font: 11px/1 "DM Mono", monospace; letter-spacing: .08em; } nav a { opacity: .72; transition: opacity .2s; } nav a:hover { opacity: 1; }.header-cta { justify-self: end; display: flex; gap: 12px; align-items: center; }.header-cta span { font-size: 17px; }
.hero { position: relative; min-height: calc(100svh - 114px); overflow: hidden; color: var(--cream); display: flex; align-items: end; padding: clamp(32px,7vw,104px); }.hero-image,.neighborhood-image { position:absolute; inset:0; background-position:center; background-size:cover; }.hero-image { background-image: url("images/hero.jpg"); filter: saturate(.58) contrast(1.04); transform: scale(1.01); }.hero-shade { position: absolute; inset:0; background: linear-gradient(90deg, rgba(12,21,16,.74), rgba(12,21,16,.18) 65%), linear-gradient(0deg, rgba(12,21,16,.5), transparent 55%); }.hero-content,.hero-caption,.hero-mark { position: relative; }.eyebrow { margin: 0 0 18px; color: var(--terracotta); font: 11px/1.4 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .13em; }.eyebrow.light { color: var(--sand); }.eyebrow i { display:inline-block; height:1px; width:24px; margin:0 10px 3px; background:currentColor; opacity:.7; }.hero h1 { max-width: 700px; margin: 0; font: 600 clamp(68px,10vw,154px)/.83 "Playfair Display", serif; letter-spacing:-.07em; }.hero h1 em, h2 em { font-weight:500; }.hero-copy { max-width:390px; margin: 30px 0; font-size:17px; line-height:1.55; }.button { display:inline-flex; gap:24px; align-items:center; padding:17px 21px; text-decoration:none; font: 500 11px/1 "DM Mono", monospace; text-transform:uppercase; letter-spacing:.1em; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-3px); }.button-cream { color:var(--ink); background:var(--cream); }.button-cream:hover { background:#fffaf0; }.button span { font-size:17px; }.hero-caption { position:absolute; right:clamp(24px,5vw,78px); bottom:clamp(28px,6vw,88px); text-align:right; font:10px/1.6 "DM Mono", monospace; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }.hero-mark { position:absolute; top:28px; right:clamp(24px,5vw,78px); font:500 46px/1 "Playfair Display",serif; }
.intro { min-height:680px; display:grid; grid-template-columns: .7fr 1.7fr 1.1fr; gap:clamp(30px,5vw,80px); padding:clamp(80px,12vw,180px) clamp(24px,8vw,132px); }.intro-aside { display:flex; flex-direction:column; justify-content:space-between; padding-top:4px; font:11px/1.45 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }.intro-aside p { margin:0; color:#697269; }.intro-content h2,.highlights h2,.learn-content h2 { margin:0; font:500 clamp(46px,5.8vw,88px)/.95 "Playfair Display",serif; letter-spacing:-.06em; }.intro-lede { max-width:520px; margin:36px 0 30px; font-size:18px; line-height:1.7; }.text-link { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:7px; font:11px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }.text-link span{margin-left:18px;font-size:17px}.image-placeholder { position:relative; background:#c9bba5; overflow:hidden; }.intro-image { min-height:400px; background: linear-gradient(0deg,rgba(24,37,30,.15),rgba(24,37,30,.15)), url("images/intro.jpg") center/cover; }.image-placeholder span { position:absolute; bottom:14px; left:14px; color:#fff8ec; font:10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.neighborhood { display:grid; grid-template-columns:1.1fr .9fr; min-height:720px; color:var(--cream); background:var(--pine); }.neighborhood-image { position:relative; min-height:420px; background-image:linear-gradient(rgba(20,37,29,.22),rgba(20,37,29,.22)),url("images/neighborhood.jpg"); filter:saturate(.55); }.neighborhood-panel { padding:clamp(60px,9vw,130px) clamp(32px,7vw,110px); }.neighborhood-panel h2 { margin:0 0 28px; font:500 clamp(55px,6vw,92px)/.9 "Playfair Display",serif; letter-spacing:-.07em; }.neighborhood-panel > p:not(.eyebrow) { max-width:440px; color:#d3d3c8; line-height:1.7; }.location-list { margin-top:50px; border-top:1px solid rgba(242,237,226,.25); }.location-list div { padding:17px 0; display:grid; grid-template-columns:72px 1fr; border-bottom:1px solid rgba(242,237,226,.25); }.location-list b { color:var(--sand); font:500 16px "Playfair Display",serif; }.location-list span { color:#dddacf; font-size:14px; }
.highlights { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; padding:clamp(80px,12vw,174px) clamp(24px,8vw,132px); }.highlights-list { border-top:1px solid var(--line); }.highlights article { display:grid; grid-template-columns:62px 1fr 1.25fr; gap:20px; padding:27px 0 30px; border-bottom:1px solid var(--line); }.highlights article span { color:var(--terracotta); font:10px "DM Mono",monospace; }.highlights h3 { margin:0; font:500 22px/1.12 "Playfair Display",serif; letter-spacing:-.03em; }.highlights article p { margin:0; color:#526057; font-size:14px; line-height:1.55; }
.quote { padding:clamp(80px,12vw,180px) 24px; text-align:center; color:var(--cream); background:var(--terracotta); }.quote p { margin:0; font:500 clamp(46px,6vw,96px)/.98 "Playfair Display",serif; letter-spacing:-.06em; }.quote span { display:block; margin-top:32px; font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.13em; opacity:.8; }
.learn-more { display:grid; grid-template-columns:1fr 1fr; min-height:680px; }.learn-image { background:linear-gradient(rgba(33,44,36,.2),rgba(33,44,36,.2)),url("images/learn.jpg") center/cover; }.learn-content { padding:clamp(70px,11vw,160px) clamp(30px,9vw,150px); background:var(--sand); }.learn-content > p:not(.eyebrow) { max-width:390px; margin:30px 0; font-size:17px; line-height:1.65; }.button-dark { color:var(--cream); background:var(--ink); }.button-dark:hover { background:var(--pine); }.learn-content small { display:block; margin-top:70px; color:#647067; font:10px/1.55 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.09em; }
footer { display:flex; justify-content:space-between; align-items:center; padding:31px clamp(24px,5vw,78px); background:var(--ink); color:var(--cream); } footer .wordmark { color:var(--cream); } footer p { margin:0; color:#b5b8af; font:10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width: 760px) { .announcement{font-size:9px}.site-header{height:64px;grid-template-columns:1fr auto}.site-header nav{display:none}.header-cta{font-size:10px}.hero{min-height:680px;padding:32px 25px}.hero h1{font-size:clamp(64px,19vw,104px)}.hero-caption{display:none}.intro{grid-template-columns:1fr;padding:80px 25px;gap:34px}.intro-aside{flex-direction:row}.intro-image{min-height:300px}.neighborhood{grid-template-columns:1fr}.neighborhood-panel{padding:70px 25px}.highlights{grid-template-columns:1fr;padding:80px 25px;gap:46px}.highlights article{grid-template-columns:45px 1fr;gap:14px}.highlights article p{grid-column:2}.learn-more{grid-template-columns:1fr}.learn-image{min-height:360px}.learn-content{padding:75px 25px}.learn-content small{margin-top:50px}footer{align-items:flex-start;gap:25px;flex-direction:column}.hero-mark{right:25px}.quote{padding:100px 25px} }