*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0D0509;color:#D4C8B8;font-family:'Quicksand',sans-serif;overflow-x:hidden}
.header{padding:20px 24px;position:relative;z-index:10}
.logo{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.2rem;color:#F2E4D0;letter-spacing:.15em}
.logo .a{color:#C5975B}

.hero{min-height:90vh;display:flex;align-items:center;justify-content:center;padding:60px 24px;background:radial-gradient(ellipse at center,rgba(197,151,91,.04) 0%,transparent 50%)}
.garden{padding:80px 24px;max-width:1000px;margin:0 auto}
.deep{padding:80px 24px;max-width:800px;margin:0 auto;text-align:center}

.terrarium{position:relative;margin:0 auto 40px;transform-style:preserve-3d}
.face{position:relative}
.face.top{background:#1E0B14;border:1px solid rgba(197,151,91,.12);padding:40px;border-radius:2px}
.face.left{height:30px;background:#140810;transform:skewX(-45deg);margin-left:15px;margin-right:15px;border-left:1px solid rgba(197,151,91,.08)}
.face.right{display:none}
.tower .face.left{height:60px}

.hero-block{max-width:600px;width:100%}
.hero-block .face.top{padding:60px 40px;text-align:center}
.title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(3.5rem,8vw,7rem);color:#F2E4D0;letter-spacing:.2em;line-height:1}
.title .a{color:#C5975B}
.meta{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#C5975B;margin-top:16px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.tag{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:#C5975B;display:block;margin-bottom:8px}
h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.1rem,2vw,1.5rem);color:#F2E4D0;letter-spacing:.06em;margin-bottom:10px}
.body{font-family:'Quicksand',sans-serif;font-weight:400;font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.75;color:#D4C8B8}

.terrarium:hover .face.top{border-color:rgba(197,151,91,.35);animation:shake .45s ease}
.terrarium:hover .face.left{border-color:rgba(197,151,91,.2)}
@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-3px) rotate(-.5deg)}30%{transform:translateX(3px) rotate(.5deg)}45%{transform:translateX(-2px) rotate(-.3deg)}60%{transform:translateX(2px) rotate(.3deg)}75%{transform:translateX(-1px) rotate(0)}}

.end-strip{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#C5975B;margin-top:48px;padding:16px 0;border-top:1px solid rgba(197,151,91,.12);border-bottom:1px solid rgba(197,151,91,.12)}

@media(max-width:768px){
  .grid{grid-template-columns:1fr}
  .hero-block .face.top{padding:40px 24px}
}