:root{--night:#0f1f1c;--pine:#1d3b33;--cran:#a3122f;--berry:#5b1a3a;--birch:#f4efe6;--gold:#c9a24a;--ink:#1a1a1a}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--birch);line-height:1.6}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.05}
a{color:inherit}
.nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw;z-index:10;color:var(--birch);background:linear-gradient(#0f1f1ccc,#0f1f1c00)}
.nav .logo{font-family:Fraunces,serif;font-size:1.3rem;text-decoration:none;letter-spacing:.02em}
.nav ul{display:flex;gap:1.6rem;list-style:none;padding:0}.nav ul a{text-decoration:none;font-size:.9rem;opacity:.85}
.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:999px;background:var(--cran);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;transition:transform .3s,background .3s}
.btn:hover{transform:translateY(-2px);background:#c2183b}.btn.ghost{background:transparent;border:1px solid currentColor}
.hero{min-height:100vh;position:relative;overflow:hidden;color:var(--birch);display:grid;place-items:center;text-align:center;padding:7rem 5vw 12rem;
 background:radial-gradient(ellipse at 50% 110%,#a3122f55,transparent 60%),linear-gradient(#0b1614,#1d3b33 70%,#2c4d43)}
.hero .eyebrow{letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;color:var(--gold)}
.hero h1{font-size:clamp(3rem,9vw,7.5rem);margin:.6rem 0}.hero h1 em{color:#e8455f;font-style:italic}
.hero p{max-width:34rem;margin:0 auto 2rem;opacity:.85}
.pines{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto}
.moon{position:absolute;top:14%;right:14%;width:90px;height:90px;border-radius:50%;background:#f4efe6;box-shadow:0 0 80px #f4efe688;animation:float 8s ease-in-out infinite}
.berry{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6b81,var(--cran) 60%,var(--berry));animation:drift linear infinite;opacity:.8}
@keyframes float{50%{transform:translateY(-12px)}}@keyframes drift{from{transform:translateY(110vh)}to{transform:translateY(-20vh)}}
section{padding:6rem 5vw}.wrap{max-width:1150px;margin:auto}
.kicker{color:var(--cran);letter-spacing:.25em;text-transform:uppercase;font-size:.75rem;font-weight:700}
h2{font-size:clamp(2.2rem,5vw,3.8rem);margin:.5rem 0 1.2rem}
.story{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
.year{font-family:Fraunces,serif;font-size:clamp(6rem,16vw,12rem);color:var(--cran);line-height:.8;font-style:italic}
.wines{background:var(--night);color:var(--birch)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2.5rem}
.card{background:#16302a;border-radius:18px;overflow:hidden;transition:transform .4s}.card:hover{transform:translateY(-6px) rotate(-.5deg)}
.card .ph{background:#fff;aspect-ratio:1;display:grid;place-items:center}.card img{max-height:90%;max-width:80%;object-fit:contain}
.card div.t{padding:1.2rem 1.4rem 1.6rem}.card h3{font-size:1.5rem}.card p{font-size:.9rem;opacity:.8;margin:.4rem 0 1rem}
.card a{font-size:.85rem;font-weight:600;color:var(--gold)}
.finder{background:var(--cran);color:#fff;text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2rem}
.chips a{padding:.7rem 1.3rem;border:1px solid #fff8;border-radius:999px;text-decoration:none;transition:background .3s}.chips a:hover{background:#fff;color:var(--cran)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.tile{padding:2rem;border-radius:18px;background:#fff;border:1px solid #0001}.tile h3{font-size:1.6rem;margin-bottom:.5rem}
.placeholder{display:inline-block;font-size:.7rem;background:#ffe9a8;color:#5a4300;padding:.15rem .5rem;border-radius:4px;font-weight:700;letter-spacing:.05em}
footer{background:var(--night);color:#f4efe6aa;padding:3rem 5vw;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}.reveal.in{opacity:1;transform:none}
@media (max-width:760px){.nav ul{display:none}.story,.tiles{grid-template-columns:1fr}.moon{width:56px;height:56px;right:10%}section{padding:4rem 6vw}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* added: logo, sub-page hero, prose, tables, age gate */
.nav .logo img{height:44px;width:auto;display:block}
.hero.sub{min-height:56vh;padding-bottom:9rem}
.prose{max-width:860px}.prose p,.prose ul{margin:0 0 1rem}.prose ul{padding-left:1.2rem}.prose h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.tiles.two{grid-template-columns:repeat(2,1fr)}
.lic{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:.9rem}.lic th,.lic td{padding:.55rem .8rem;border-bottom:1px solid #0001;text-align:left;vertical-align:top}.lic th{background:var(--pine);color:var(--birch)}
footer a{color:#f4efe6}
#agegate{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 110%,#a3122f66,transparent 60%),linear-gradient(#0b1614,#1d3b33);color:var(--birch);display:grid;place-items:center;text-align:center;padding:2rem}
#agegate h2{margin:.8rem 0}#agegate img{height:70px}#agegate .btn{margin:.4rem;border:0;cursor:pointer;font:inherit;font-weight:600}
@media (max-width:760px){.tiles.two{grid-template-columns:1fr}.lic{font-size:.8rem}}