*{box-sizing:border-box}
body{margin:0;background:#ebe4d8;color:#29251f;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
header{width:min(1200px,90%);margin:auto;padding:28px 0;display:flex;justify-content:space-between;align-items:center}
.logo{font:42px Georgia,serif}
nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
a{text-decoration:none;color:inherit}
.hero{width:min(1200px,90%);margin:auto;min-height:80vh;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.2em}
h1{font:clamp(55px,8vw,110px) Georgia,serif;line-height:.94;margin:20px 0}
h2{font:48px Georgia,serif}
p{font-size:18px;line-height:1.8;color:#665e53}
.hero-object{height:520px;display:grid;place-items:center}
.mineral{width:390px;height:390px;border-radius:50%;background:radial-gradient(circle at 25% 25%,#ddd1bb,#928676 45%,#544c40);box-shadow:45px 45px 100px #0003;position:relative}
.mineral:after{content:"";position:absolute;inset:35px;border:1px solid #fff5;border-radius:50%}
.editorial{width:min(1100px,90%);margin:70px auto}
.chapter{display:grid;grid-template-columns:100px 1fr;padding:40px 0;border-top:1px solid #0002}
.chapter span{font:42px Georgia,serif;color:#86725a}
.page{width:min(950px,90%);margin:70px auto;min-height:70vh}
.texture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:50px 0}
.texture-grid div{height:230px;background:linear-gradient(140deg,#c8bca9,#74695b)}
footer{text-align:center;padding:50px}
@media(max-width:800px){
.hero{display:block;min-height:auto;padding:40px 0}
.hero-object{height:350px}
.mineral{width:260px;height:260px}
.chapter{display:block}
.texture-grid{display:block}
.texture-grid div{margin:15px 0}
header{display:block}
nav{margin-top:15px}
}