/* Lochiel Brewing — Vintage Old-World Craft Badge
   Palette: amber/oak + charcoal + cream. Mobile-first. */

:root{
  --charcoal:#1c1916;
  --charcoal-2:#231f1a;
  --charcoal-3:#2c2722;
  --amber:#b5832e;
  --amber-lt:#d8b574;
  --oak:#8a5a1f;
  --cream:#f3e9d6;
  --cream-dim:#e8dcc4;
  --red:#7a1f1f;
  --ink:#1c1916;
  --text-on-dark:#f3e9d6;
  --text-on-dark-mut:#c7b89c;
  --text-on-light:#2a2520;
  --text-on-light-mut:#5b5043;
  --maxw:1080px;
  --r:10px;
  --shadow:0 8px 28px rgba(0,0,0,.28);
  --font-display:"Cinzel", Georgia, serif;
  --font-body:"Spectral", Georgia, serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--text-on-light);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.center{text-align:center;}

/* ---- Accessibility ---- */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--charcoal);
  padding:12px 18px;z-index:200;border-radius:0 0 var(--r) 0;font-weight:600;
}
.skip-link:focus{left:0;}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px;border-radius:4px;
}

/* ---- Typography ---- */
h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0 0 .5em;letter-spacing:.5px;}
.eyebrow{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:3px;
  font-size:.72rem;color:var(--oak);margin:0 0 .6em;font-weight:600;
}
.section-dark .eyebrow{color:var(--amber-lt);}
.eyebrow.center{display:block;text-align:center;}
.section-title{font-size:clamp(1.7rem,6vw,2.6rem);}
.section-note{
  max-width:640px;margin:0 auto 2rem;text-align:center;color:var(--text-on-light-mut);
  font-style:italic;font-size:.97rem;
}
.section-dark .section-note{color:var(--text-on-dark-mut);}

/* ---- Buttons (>=44px taps) ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 26px;border-radius:var(--r);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:1px;
  text-transform:uppercase;text-decoration:none;cursor:pointer;border:2px solid var(--amber);
  background:var(--amber);color:var(--charcoal);transition:transform .15s ease,background .2s ease;
}
.btn:hover{background:var(--amber-lt);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--oak);}
.section-dark .btn-ghost,.hero .btn-ghost{color:var(--amber-lt);border-color:var(--amber-lt);}
.btn-ghost:hover{background:rgba(181,131,46,.15);}
.btn-sm{min-height:44px;padding:9px 18px;font-size:.82rem;}

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(28,25,22,.96);
  backdrop-filter:saturate(1.2) blur(4px);border-bottom:1px solid rgba(216,181,116,.25);
}
.header-inner{display:flex;align-items:center;gap:14px;min-height:62px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);margin-right:auto;}
.brand-mark{color:var(--amber-lt);display:flex;}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1;letter-spacing:1px;}
.brand-sub{display:block;font-size:.6rem;letter-spacing:4px;color:var(--amber-lt);text-transform:uppercase;font-weight:500;}
.main-nav{display:none;gap:22px;}
.main-nav a{
  font-family:var(--font-display);font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-on-dark-mut);text-decoration:none;padding:6px 2px;
}
.main-nav a:hover{color:var(--amber-lt);}
.header-cta{display:none;}

/* ---- Hero ---- */
.hero{
  background:radial-gradient(120% 90% at 50% 0%, #2c2722 0%, var(--charcoal) 60%);
  color:var(--text-on-dark);padding:46px 0 56px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent,transparent 6px,rgba(216,181,116,.025) 6px,rgba(216,181,116,.025) 7px);
}
.hero-inner{display:flex;flex-direction:column;gap:30px;align-items:center;text-align:center;position:relative;z-index:1;}
.hero h1{font-size:clamp(2.3rem,11vw,4rem);color:var(--cream);text-shadow:0 2px 0 rgba(0,0,0,.3);}
.hero-lede{font-size:1.08rem;max-width:32ch;margin:0 auto 8px;color:var(--text-on-dark-mut);}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.hero-art{width:min(78vw,260px);}
.crest{width:100%;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));}

/* ---- Sections ---- */
.section{padding:54px 0;}
.section-dark{background:var(--charcoal);color:var(--text-on-dark);}
.narrow{max-width:680px;}
.section p{margin:0 0 1.1em;}
.two-col{display:flex;flex-direction:column;gap:28px;}
.col-art svg,.map-art svg{border-radius:var(--r);box-shadow:var(--shadow);}
.signature{font-family:var(--font-display);color:var(--oak);font-size:1.05rem;margin-top:1.4em;}
.section-dark .signature{color:var(--amber-lt);}

/* ---- Taplist ---- */
.tap-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px;}
.tap-card{
  background:#fff;border:1px solid var(--cream-dim);border-top:4px solid var(--amber);
  border-radius:var(--r);padding:20px 20px 18px;box-shadow:0 4px 14px rgba(60,40,10,.07);
}
.tap-origin{
  font-family:var(--font-display);font-size:.66rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--oak);font-weight:600;
}
.tap-card h3{font-size:1.18rem;margin:.25em 0 .35em;color:var(--ink);}
.tap-card p{margin:0;color:var(--text-on-light-mut);font-size:.95rem;}

/* ---- Events ---- */
.event-list{list-style:none;margin:0 auto;padding:0;max-width:620px;display:grid;gap:14px;}
.event-row{display:flex;gap:16px;align-items:flex-start;background:var(--charcoal-2);border:1px solid rgba(216,181,116,.2);border-radius:var(--r);padding:16px 18px;}
.event-tag{
  flex:0 0 auto;font-family:var(--font-display);font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--amber);color:var(--charcoal);padding:5px 9px;border-radius:6px;font-weight:600;margin-top:3px;
}
.event-row h3{font-size:1.1rem;margin:0 0 .2em;color:var(--cream);}
.event-row p{margin:0;color:var(--text-on-dark-mut);font-size:.92rem;}

/* ---- Location / Hours ---- */
.nap{font-style:normal;font-size:1.05rem;line-height:1.7;margin:0 0 1em;color:var(--ink);}
.nap strong{font-family:var(--font-display);}
.hours-block{margin-top:1.8em;background:#fff;border:1px solid var(--cream-dim);border-radius:var(--r);padding:18px 20px;}
.hours-block h3{font-size:1.1rem;margin:0 0 .4em;}
.hours-list{list-style:none;margin:.6em 0 0;padding:0;}
.hours-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--cream-dim);font-size:.96rem;}
.hours-list li:last-child{border-bottom:none;}
.muted{color:var(--text-on-light-mut);font-style:italic;}
.confirm-line{font-size:.85rem;font-style:italic;color:var(--text-on-light-mut);margin:.6em 0 0;}
.section-dark .confirm-line{color:var(--text-on-dark-mut);}

/* ---- Reviews ---- */
.review-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.review-card{background:var(--charcoal-2);border:1px solid rgba(216,181,116,.2);border-left:4px solid var(--amber);border-radius:var(--r);padding:18px 20px;}
.review-card p{margin:0 0 .6em;color:var(--cream);}
.review-src{font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--amber-lt);font-family:var(--font-display);}

/* ---- Contact ---- */
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:1.4em 0 0;}

/* ---- Footer ---- */
.site-footer{background:var(--charcoal);color:var(--text-on-dark-mut);padding:40px 0 88px;border-top:2px solid var(--amber);}
.footer-inner{display:grid;gap:18px;text-align:center;}
.footer-brand .brand-text{color:var(--cream);font-family:var(--font-display);font-size:1.3rem;}
.footer-brand p{margin:.4em 0 0;font-size:.92rem;}
.footer-nap{font-style:normal;line-height:1.6;}
.footer-legal{font-size:.78rem;color:var(--text-on-dark-mut);margin:0;}

/* ---- Sticky mobile CTA ---- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;gap:1px;
  background:rgba(216,181,116,.25);box-shadow:0 -4px 18px rgba(0,0,0,.3);
}
.sticky-btn{
  flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;letter-spacing:2px;text-transform:uppercase;
  font-size:.9rem;text-decoration:none;background:var(--amber);color:var(--charcoal);
}
.sticky-btn-alt{background:var(--charcoal);color:var(--amber-lt);}

/* ---- Motion: crest draw-in + beer pour ---- */
.crest-shield,.crest-border{
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:draw 1.4s ease forwards .2s;
}
.crest-banner,.spark{opacity:0;animation:fadeUp .6s ease forwards 1.1s;}
.beer-fill{transform:translateY(103px);transform-origin:bottom;animation:pour 1.6s cubic-bezier(.2,.7,.3,1) forwards .9s;}
.foam{opacity:0;animation:foamIn .5s ease forwards 2.2s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pour{to{transform:translateY(0);}}
@keyframes foamIn{to{opacity:1;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Reveal-on-scroll helper (set by JS) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .crest-shield,.crest-border{stroke-dashoffset:0;animation:none;}
  .crest-banner,.spark,.foam{opacity:1;animation:none;}
  .beer-fill{transform:none;animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---- Responsive: tablet/desktop ---- */
@media (min-width:720px){
  .two-col{flex-direction:row;align-items:center;}
  .two-col .col-copy{flex:1.2;}
  .two-col .col-art{flex:1;max-width:340px;}
  .tap-grid{grid-template-columns:1fr 1fr;}
  .review-grid{grid-template-columns:1fr 1fr 1fr;}
  .footer-inner{grid-template-columns:1fr auto;text-align:left;align-items:center;}
  .footer-legal{grid-column:1 / -1;text-align:center;margin-top:8px;}
}
@media (min-width:860px){
  .main-nav{display:flex;}
  .header-cta{display:inline-flex;}
  .hero{padding:64px 0 72px;}
  .hero-inner{flex-direction:row;text-align:left;justify-content:space-between;gap:40px;}
  .hero-copy{flex:1;}
  .hero-lede{margin-left:0;}
  .hero-actions{justify-content:flex-start;}
  .eyebrow.center,.section-title.center{text-align:center;}
  .hero-art{flex:0 0 auto;width:300px;}
  /* Sticky mobile CTA hidden on desktop — header CTA covers it */
  .sticky-cta{display:none;}
  .site-footer{padding-bottom:40px;}
}