@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=IBM+Plex+Sans:wght@400;600&display=swap');
:root{--ink:#14181f;--paper:#f5f2ea;--wine:#6b2432;--stone:#8a8680}
*{box-sizing:border-box}body{margin:0;font-family:"IBM Plex Sans",sans-serif;background:var(--paper);color:var(--ink)}
a{color:inherit;text-decoration:none}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{padding:2rem 1.4rem;border-right:1px solid #ddd6c8;position:sticky;top:0;height:100vh}
.side .logo{font-family:"Cormorant Garamond",serif;font-size:1.85rem;color:var(--wine);display:block;margin-bottom:2rem}
.side a{display:block;padding:.5rem 0;color:var(--stone);font-weight:600}
.hero{min-height:100vh;padding:10vh 5vw;color:#f5f2ea;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(20,24,31,.55),rgba(20,24,31,.25)),url('assets/hero.svg') center/cover}
.hero h1{font-family:"Cormorant Garamond",serif;font-size:clamp(2.9rem,7vw,5rem);margin:0;animation:in .8s ease both}
.btn{display:inline-block;margin-top:1.2rem;background:var(--wine);color:#fff;padding:.85rem 1.2rem;font-weight:600;animation:in .8s .12s ease both}
.pad{padding:4rem 5vw}.pad h2{font-family:"Cormorant Garamond",serif;font-size:2.3rem}
.foot{padding:1.5rem 5vw;border-top:1px solid #ddd6c8;color:var(--stone);font-size:.9rem}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:900px){.shell{grid-template-columns:1fr}.side{position:relative;height:auto}}