Terrace hero layout

<main><nav><b>terrace</b><div><a href="#story">Our story</a><a href="#start">Find your space ↗</a></div></nav><section id="story"><div class="copy"><span>MORE ROOM TO BE YOU.</span><h1>Slow down.<br>Look around.<br><em>Live a little.</em></h1><p>Spaces for thoughtful living.<br>Made for the moments in between.</p><a class="cta" href="#start">Explore the collection <b>↗</b></a></div><div class="landscape" aria-label="Abstract sun and rolling hills"><div class="sun"></div><div class="hill h1"></div><div class="hill h2"></div><div class="hill h3"></div><span>LESS NOISE.<br>MORE LIFE.</span></div></section><footer id="start"><span>THOUGHTFULLY MADE. NATURALLY YOURS.</span><a href="#story">Back to the beginning ↑</a></footer></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:#eae6db;color:#303d2e;padding:24px}main{width:800px;max-width:100%;background:#f5f2e8;border:1px solid #d8d7c6;padding:24px 33px}nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}nav>b{font:26px Georgia,serif;letter-spacing:-1px}nav>div{display:flex;gap:23px}a{color:inherit;text-decoration:none;font-size:8px}section{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}.copy>span{font-size:6px;letter-spacing:2px;color:#79836f}h1{font:44px/1.04 Georgia,serif;margin:18px 0;letter-spacing:-1.7px}h1 em{color:#809070;font-weight:400}p{font-size:9px;line-height:1.9;color:#87917c}.cta{display:inline-flex;gap:25px;align-items:center;border-bottom:1px solid #acb39d;padding:9px 0;font-size:9px;margin-top:8px}.landscape{height:300px;border-radius:130px 130px 5px 5px;background:#e0d8bb;position:relative;overflow:hidden}.sun{position:absolute;width:70px;height:70px;top:43px;left:50%;transform:translateX(-50%);background:#f8efcf;border-radius:50%;box-shadow:0 0 60px #fff8dc}.hill{position:absolute;width:420px;height:280px;border-radius:50%;left:-160px;bottom:-130px;background:#a2ad82;transform:rotate(-20deg)}.h2{background:#7b8e6e;left:75px;bottom:-150px;transform:rotate(20deg)}.h3{background:#536c53;left:-90px;bottom:-210px}.landscape>span{position:absolute;bottom:25px;left:25px;font-size:7px;line-height:1.7;letter-spacing:2px;color:#e4e8d2}footer{display:flex;justify-content:space-between;border-top:1px solid #d8dccb;margin-top:30px;padding-top:15px;font-size:6px;letter-spacing:1px;color:#8f9985}footer a{font-size:7px;letter-spacing:0}@media(max-width:500px){body{padding:16px}main{padding:22px}section{grid-template-columns:1fr}.landscape{height:200px}h1{font-size:40px}nav div{gap:12px}footer{gap:10px}}