:root { --red:#b9090b; --ink:#181412; --paper:#f8f3e9; --gold:#99723a; --line:#dccdab; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; } .age-note { background:var(--ink); color:#f5ead8; text-align:center; font-size:.7rem; letter-spacing:.08em; padding:.55rem 1rem; text-transform:uppercase; }
.hero { min-height:calc(100vh - 33px); background:linear-gradient(120deg,#f9f4eb 58%,#efe3ce); padding:0 7vw 2.3rem; position:relative; overflow:hidden; } .hero:after { content:""; position:absolute; right:-14rem; bottom:-18rem; width:50rem; height:50rem; border:2px solid rgba(185,9,11,.12); border-radius:50%; box-shadow:0 0 0 18px transparent,0 0 0 20px rgba(185,9,11,.1); }
.nav { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:2; } .wordmark { font-family:"Playfair Display",serif; color:var(--red); text-decoration:none; font-weight:800; letter-spacing:.045em; font-size:1.3rem; } .wordmark span { display:block; font-size:.66em; text-align:center; letter-spacing:.34em; margin-top:-.25em; } .nav-links { display:flex; gap:2.2rem; } .nav-links a { color:var(--ink); font-size:.82rem; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; } .nav-links a:hover { color:var(--red); } .menu-button { display:none; }
.hero-content { max-width:1220px; margin:0 auto; min-height:calc(100vh - 180px); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem; position:relative; z-index:1; } .hero-copy { padding:4rem 0; } .eyebrow,.section-kicker { color:var(--red); font-size:.74rem; letter-spacing:.18em; font-weight:700; text-transform:uppercase; } h1,h2 { font-family:"Playfair Display",serif; margin:.6rem 0 1.3rem; line-height:.98; letter-spacing:-.045em; } h1 { font-size:clamp(3.5rem,7vw,6.8rem); } h1 em { color:var(--red); font-style:normal; } .intro { max-width:430px; font-size:1.1rem; line-height:1.6; margin-bottom:2rem; } .button { display:inline-flex; align-items:center; gap:.8rem; padding:1rem 1.25rem; background:var(--red); color:white; text-decoration:none; font-size:.77rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:transform .2s,background .2s; } .button:hover { background:#900708; transform:translateY(-2px); } .button span { font-size:1.25rem; line-height:0; }
.seal-wrap { justify-self:center; width:min(37vw,485px); aspect-ratio:1; border-radius:50%; position:relative; z-index:1; } .seal-wrap:before { content:""; position:absolute; inset:-14px; border:1px solid var(--gold); border-radius:50%; } .seal-wrap img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; box-shadow:0 20px 50px rgba(47,26,6,.17); } .scroll-hint { position:relative; z-index:1; margin:0; text-align:center; color:var(--gold); text-transform:uppercase; font-size:.65rem; font-weight:700; letter-spacing:.15em; } .scroll-hint span { margin-left:.5rem; font-size:1rem; }
.beer-section { padding:9rem 9vw; background:#fffdf8; } .two-column { display:grid; grid-template-columns:1fr 1fr; gap:7vw; max-width:1120px; margin:2rem auto 0; } h2 { font-size:clamp(2.8rem,5vw,5.1rem); } .large-copy { font-size:1.25rem; line-height:1.55; max-width:400px; } .facts { border-top:1px solid var(--line); } .facts>div { display:grid; grid-template-columns:54px 1fr; gap:1rem; border-bottom:1px solid var(--line); padding:1.2rem 0; } .facts p { margin:0; line-height:1.5; font-size:.94rem; } .fact-number { font-family:"Playfair Display",serif; color:var(--gold); font-size:1.35rem; } .facts strong { color:var(--red); }
.heritage { display:grid; grid-template-columns:1.06fr .94fr; background:var(--ink); color:#f7efe1; } .heritage-image { min-height:590px; overflow:hidden; } .heritage-image img { width:100%; height:100%; object-fit:cover; display:block; mix-blend-mode:screen; opacity:.87; } .heritage-copy { padding:9rem max(7vw,4rem); align-self:center; } .heritage-copy h2 { color:#fffaf1; } .heritage-copy>p:not(.eyebrow) { font-size:1.04rem; line-height:1.7; max-width:420px; } .heritage-copy .accent { color:#cda666; font-family:"Playfair Display",serif; font-size:1.4rem; }
.cta { text-align:center; padding:8rem 1.5rem; background:var(--red); color:#fff8ec; } .cta .eyebrow { color:#f7d9a2; } .cta h2 { margin-bottom:.75rem; } .cta>p:not(.eyebrow) { max-width:485px; line-height:1.6; margin:0 auto 2rem; } .button.light { background:#fff8ec; color:var(--red); } .button.light:hover { background:#f3e5ce; } .contact-note { font-size:.75rem; opacity:.72; margin-top:1rem!important; }
footer { min-height:175px; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; background:#f2e7d3; padding:2rem 7vw; } footer p { margin:0; color:#5d5043; font-size:.76rem; } .footer-links { display:flex; gap:1rem; } .footer-links a { color:#5d5043; }
@media (max-width:720px) { .hero { padding:0 1.5rem 1.8rem; } .nav { height:76px; } .nav-links { display:none; position:absolute; top:75px; left:0; right:0; background:#fffaf1; padding:1.2rem 1.5rem; flex-direction:column; gap:1rem; border-bottom:1px solid var(--line); } .nav-links.open { display:flex; } .menu-button { display:block; border:0; background:transparent; color:var(--red); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; } .hero-content,.two-column,.heritage { grid-template-columns:1fr; } .hero-content { padding-top:1rem; gap:0; } .hero-copy { padding:3rem 0 1.5rem; } .seal-wrap { width:min(78vw,365px); } .beer-section { padding:5rem 1.5rem; } .two-column { gap:2rem; } .heritage-image { min-height:390px; } .heritage-copy { padding:5rem 1.5rem; } footer { padding:2rem 1.5rem; flex-direction:column; align-items:flex-start; gap:1rem; } }