:root{
  --green:#0b241a;
  --green2:#123024;
  --deep:#07130e;
  --cream:#eee7d8;
  --paper:#e7decb;
  --gold:#d8a84e;
  --ink:#111711;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--deep);
  color:#fff9ef;
  font-family:"Roboto Slab",Georgia,serif;
  line-height:1.45;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(1200px,calc(100% - 44px));margin-inline:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,27,19,.98);
  border-bottom:1px solid rgba(216,168,78,.28);
  box-shadow:0 5px 18px rgba(0,0,0,.18);
}
.header-row{height:84px;display:flex;align-items:center;gap:30px}
.brand{width:292px;flex:0 0 auto}
.brand img{width:100%}
.nav{
  margin-left:auto;
  display:flex;gap:28px;align-items:center;
  font:600 14px "Oswald",sans-serif;
  text-transform:uppercase;letter-spacing:.055em;
}
.nav a{text-decoration:none;opacity:.9}
.nav a:hover{color:var(--gold)}
.header-badge{width:208px;border-radius:3px}
.menu-toggle{
  display:none;margin-left:auto;background:transparent;
  border:1px solid #9e875d;color:white;padding:8px 11px;
  font:600 13px "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;
}

/* Full-width hero */
.hero{
  position:relative;
  min-height:560px;
  overflow:hidden;
  background:#13261b;
}
.hero-bg{
  position:absolute;inset:0;
  background:url("assets/hero-fullwidth.jpg") center center/cover no-repeat;
}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,12,8,.94) 0%,rgba(5,12,8,.84) 29%,rgba(5,12,8,.5) 45%,rgba(5,12,8,.10) 68%,rgba(5,12,8,.02) 100%),
    linear-gradient(0deg,rgba(3,8,5,.18),rgba(3,8,5,0) 55%);
}
.hero-inner{
  position:relative;z-index:2;
  min-height:560px;
  display:flex;align-items:center;
}
.hero-copy{
  width:min(620px,56%);
  padding:48px 0 54px;
}
.hero h1{
  margin:0;
  color:var(--cream);
  font:900 clamp(58px,6.6vw,92px)/.86 "Roboto Slab",serif;
  letter-spacing:-.055em;
  text-transform:uppercase;
  text-shadow:0 4px 16px rgba(0,0,0,.42);
}
.hero h1 span{
  display:block;
  font-size:.56em;
  letter-spacing:-.025em;
  margin-top:9px;
}
.tagline{
  margin:20px 0 11px;
  color:var(--gold);
  font:700 clamp(20px,2.15vw,31px) "Oswald",sans-serif;
  letter-spacing:.18em;
}
.lead{
  max-width:590px;
  margin:0 0 27px;
  font-size:20px;
  line-height:1.45;
  color:#fff7e8;
}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  min-width:172px;gap:30px;
  padding:13px 20px;
  text-decoration:none;text-transform:uppercase;
  font:700 15px "Oswald",sans-serif;letter-spacing:.055em;
}
.btn.gold{background:var(--gold);color:#19130b}
.btn.outline{border:1px solid #f5ebdc;color:white;background:rgba(6,13,9,.2)}

.mobile-scene{display:none}

/* Story */
.story{
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.78),transparent 30%),
    linear-gradient(#ece4d4,#e5dbc5);
  border-top:1px solid #c8b999;
  border-bottom:1px solid #8d7956;
}
.story-grid{display:grid;grid-template-columns:1fr 1.55fr 1fr 1fr}
.story article{padding:34px 26px 36px;text-align:center;position:relative}
.story article+article:before{
  content:"";position:absolute;left:0;top:28px;bottom:28px;width:1px;background:#b7aa8e;
}
.icon{font-size:42px;line-height:1;color:#102117;margin-bottom:10px}
.story h2{
  margin:0 0 12px;
  font:800 21px/1.05 "Roboto Slab",serif;
  letter-spacing:-.02em;
}
.story p{margin:0;font-size:14px}
.story .roots p{font-size:13px;line-height:1.35}

/* Beers */
.beers{
  padding:38px 0 46px;
  background:
    linear-gradient(rgba(5,14,10,.94),rgba(5,14,10,.97)),
    repeating-linear-gradient(90deg,#3b2819 0 100px,#4a2d1a 100px 200px);
}
.beer-heading{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;margin-bottom:24px;
}
.beer-heading-left{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.beer-heading h2{
  margin:0;
  font:900 43px/1 "Roboto Slab",serif;
  letter-spacing:-.04em;
}
.beer-heading-left p{
  margin:0;color:var(--gold);
  font:600 14px "Oswald",sans-serif;letter-spacing:.095em;
}
.change-note{margin:0;font-style:italic;color:#e8ddc9;white-space:nowrap}
.beer-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:25px}
.beer-card{text-align:center}
.beer-card img{
  width:auto;height:306px;max-width:100%;
  margin:0 auto;object-fit:contain;
  filter:drop-shadow(0 16px 14px rgba(0,0,0,.36));
}
.beer-card h3{
  margin:13px 0 5px;
  color:#f0bf63;
  font:700 17px "Oswald",sans-serif;
  letter-spacing:.015em;
}
.beer-card p{
  margin:0;color:#eee5d8;
  font-size:12.5px;line-height:1.38;
}

/* Opening */
.opening{padding:42px 0;color:#142018;background:#d7c6a3}
.opening-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}
.eyebrow{
  margin:0 0 12px;color:#73592e;
  font:600 12px "Oswald",sans-serif;letter-spacing:.17em;
}
.opening h2{
  margin:0;
  font:900 clamp(38px,5vw,54px)/1 "Roboto Slab",serif;
  letter-spacing:-.04em;
}
.opening p{margin:0 0 10px;font-size:16px}
.opening .small{font-size:13px;opacity:.73}

/* Footer */
.site-footer{
  background:#092116;
  border-top:1px solid rgba(216,168,78,.35);
  padding:27px 0;
}
.footer-grid{
  display:grid;grid-template-columns:1fr 1.6fr 1fr;align-items:center;gap:30px;
}
.footer-logo{width:250px}
.motto{
  margin:0;text-align:center;font-style:italic;
  font-size:19px;color:#e8ddca;
}
.footer-copy{
  display:grid;gap:5px;text-align:right;
  font:600 10px "Oswald",sans-serif;letter-spacing:.075em;
}
.footer-copy span{color:#c8bda9}

/* Tablet */
@media (max-width:1024px){
  .header-badge{display:none}
  .nav{gap:19px}
  .hero{min-height:530px}
  .hero-inner{min-height:530px}
  .hero-copy{width:min(590px,63%)}
  .hero h1{font-size:clamp(54px,7vw,78px)}
  .hero-bg{background-position:58% center}
  .story-grid{grid-template-columns:1fr 1fr}
  .story article:nth-child(3):before{display:none}
  .beer-grid{grid-template-columns:repeat(3,1fr);row-gap:35px}
  .beer-card img{height:330px}
}

/* Phone */
@media (max-width:720px){
  .wrap{width:min(100% - 28px,1200px)}
  .header-row{height:72px}
  .brand{width:218px}
  .menu-toggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:72px;
    background:#0b241a;padding:18px 22px;flex-direction:column;align-items:flex-start;
    gap:17px;border-top:1px solid rgba(216,168,78,.25);
  }
  .nav.open{display:flex}

  /* Phone hero: text first, then the FULL scenic image.
     This guarantees Copperhead Road sign + barn remain visible. */
  .hero{min-height:0;background:#0b241a}
  .hero-bg,.hero-shade{display:none}
  .hero-inner{min-height:0}
  .hero-copy{width:100%;padding:42px 0 31px}
  .hero h1{font-size:clamp(49px,15vw,68px)}
  .tagline{font-size:20px;letter-spacing:.14em}
  .lead{font-size:17px;line-height:1.48}
  .mobile-scene{
    display:block;background:#0b241a;
    border-top:1px solid rgba(216,168,78,.2);
  }
  .mobile-scene img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .story-grid{grid-template-columns:1fr}
  .story article+article:before{
    left:24px;right:24px;top:0;bottom:auto;width:auto;height:1px;
  }
  .beer-heading{display:block}
  .beer-heading-left{display:block}
  .beer-heading-left p{margin-top:7px}
  .change-note{margin-top:10px;white-space:normal}
  .beer-grid{grid-template-columns:repeat(2,1fr);gap:30px 16px}
  .beer-card img{height:285px}
  .opening-grid{grid-template-columns:1fr;gap:20px}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-logo{margin:auto}
  .footer-copy{text-align:center}
}

@media (max-width:430px){
  .brand{width:203px}
  .hero h1{font-size:48px}
  .hero h1 span{font-size:.56em}
  .btn{min-width:145px;gap:17px;padding:12px 16px}
  .beer-grid{gap:26px 10px}
  .beer-card img{height:245px}
  .beer-card h3{font-size:15px}
  .beer-card p{font-size:11.8px}
}