:root { color-scheme: light; --cream:#f7eddf; --paper:#fffaf2; --cocoa:#4a2921; --rust:#8d4936; --gold:#d4a34f; --sage:#78816d; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--cocoa); font-family:"DM Sans",system-ui,sans-serif; }
.coming-soon { background:var(--cream); }
.hero { min-height:100vh; min-height:100svh; display:grid; place-items:center; overflow:hidden; position:relative; padding:28px; background:radial-gradient(circle at 16% 12%,#fffaf0 0 16%,transparent 38%),radial-gradient(circle at 88% 88%,#e7c998 0,transparent 34%),linear-gradient(145deg,#f9f0e3,#ead7bb); }
.grain { position:absolute; inset:0; opacity:.18; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.hero-card { width:min(720px,100%); position:relative; text-align:center; padding:clamp(46px,8vw,86px) clamp(24px,7vw,78px); border:1px solid rgba(115,61,45,.2); border-radius:32px 12px 32px 12px; background:rgba(255,250,242,.82); box-shadow:0 30px 80px rgba(87,53,33,.16); backdrop-filter:blur(10px); }
.brand-mark { height:64px; display:flex; justify-content:center; align-items:flex-end; gap:4px; margin-bottom:18px; }
.brand-mark span { width:10px; height:44px; border:2px solid var(--gold); border-radius:100% 0 100% 0; transform:rotate(-23deg); transform-origin:bottom; }
.brand-mark span:nth-child(2) { height:58px; transform:rotate(0); }
.brand-mark span:nth-child(3) { transform:rotate(23deg) scaleX(-1); }
.eyebrow { margin:0 0 15px; color:var(--rust); font-weight:600; letter-spacing:.22em; text-transform:uppercase; font-size:.78rem; }
h1 { margin:0; font-family:"Fraunces",Georgia,serif; font-size:clamp(2.6rem,8vw,5.7rem); line-height:.94; letter-spacing:-.045em; text-wrap:balance; }
.lead { max-width:500px; margin:28px auto 0; color:#6d5147; font-size:clamp(1rem,2vw,1.18rem); line-height:1.75; text-wrap:balance; }
.flourish { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px; color:var(--rust); font-family:"Fraunces",serif; font-style:italic; }
.flourish i { display:block; width:54px; height:1px; background:var(--gold); }
.flourish b { font-size:1.35rem; font-weight:600; }
@media (max-width:520px) { .hero { padding:18px; } .hero-card { border-radius:24px 8px; } }
@media (prefers-reduced-motion:no-preference) { .hero-card { animation:arrive .8s cubic-bezier(.2,.8,.2,1) both; } @keyframes arrive { from { opacity:0; transform:translateY(18px); } } }