/* ==========================================================================
   Livingstone Brewing - Tap List Stylesheet
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --near-black:#141414;
  --gold:#c9a24b;
  --gold-light:#e6c877;
  --white:#ffffff;
  --off-white:#faf9f7;
  --gray:#6b6b6b;
  --line:#e7e5e1;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Montserrat',sans-serif;
  background:var(--off-white);
  color:var(--black);
  line-height:1.6;
}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(circle at 15% 15%, rgba(201,162,75,0.18), transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(201,162,75,0.10), transparent 45%),
    linear-gradient(160deg, var(--black) 0%, var(--near-black) 55%, #1c1c1c 100%);
  color:var(--white);
  padding:64px 24px 88px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:56px;
  background:var(--off-white);
  clip-path:polygon(0 100%, 100% 100%, 100% 0, 50% 60%, 0 0);
}
.logo-wrap{
  width:190px;height:90px;
  margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.logo{
  width:190px;height:90px;
  background-image:url('https://images.squarespace-cdn.com/content/v1/5b8029df85ede1e7edcaf15d/1535595236317-HKUG06DTJ50V57FXQTS9/White+Logo1.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.logo-fallback{
  display:none;color:var(--gold-light);font-family:'Fraunces', serif;
  font-weight:700;font-size:22px;letter-spacing:2px;position:absolute;
}
.hero-eyebrow{
  font-size:0.76em;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:12px;font-weight:600;
}
.hero h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(2.3em, 6vw, 3.8em);
  letter-spacing:-0.5px;
  margin-bottom:14px;
}
.hero p{
  max-width:540px;margin:0 auto;
  color:#c4c4c4;font-size:0.98em;font-style:italic;
}

/* ---------- CONTAINER ---------- */
.container{max-width:1080px;margin:0 auto;padding:0 24px 60px;}

/* ---------- STATUS BAR ---------- */
.status-bar{
  display:flex;justify-content:center;align-items:center;
  margin-top:-34px;margin-bottom:44px;
  background:var(--white);
  padding:16px 28px;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,0.08);
  border:1px solid var(--line);
  position:relative;z-index:2;
}
.last-updated{color:var(--gray);font-size:0.85em;display:flex;align-items:center;gap:8px;}

/* ---------- LOADING / ERROR ---------- */
.loading{
  text-align:center;font-size:1.05em;color:var(--black);
  margin:60px 0;display:flex;align-items:center;justify-content:center;gap:12px;
}
.loading::before{
  content:'';width:18px;height:18px;border:2px solid var(--line);
  border-top-color:var(--gold);border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.error{
  text-align:center;color:#c0392b;margin:40px 0;padding:22px;
  background:rgba(192,57,43,0.06);border-radius:10px;border:1px solid rgba(192,57,43,0.15);
}

/* ---------- TAP LIST GRID ---------- */
.tap-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
  gap:22px;
}
.beer-card{
  background:var(--white);
  border-radius:14px;
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  opacity:0;
  transform:translateY(14px);
  animation:riseIn .5s ease forwards;
}
@keyframes riseIn{to{opacity:1;transform:translateY(0);}}
.beer-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(0,0,0,0.1);
}
.beer-card-top{
  background:var(--black);
  padding:18px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  position:relative;
}
.beer-card-top::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg, var(--gold), transparent 75%);
}
.beer-main{
  display:flex;align-items:center;gap:12px;min-width:0;
}
.tap-number{
  flex-shrink:0;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--gold);
  color:var(--black);
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:0.9em;
  display:flex;align-items:center;justify-content:center;
}
.beer-glass{
  flex-shrink:0;
  width:30px;height:40px;
}
.beer-text{min-width:0;}
.beer-name{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.18em;
  text-transform:uppercase;
  letter-spacing:0.4px;
  color:var(--white);
  line-height:1.28;
}
.beer-meta{
  margin-top:3px;
  font-size:0.75em;
  letter-spacing:0.3px;
  color:#b0b0b0;
  font-weight:500;
}
.beer-meta .style-name{
  color:var(--gold-light);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;
}
.beer-price{
  font-family:'Fraunces', serif;
  font-size:1.15em;
  font-weight:700;
  color:var(--gold-light);
  white-space:nowrap;
  flex-shrink:0;
}
.beer-body{padding:16px 22px 20px;}
.beer-description{
  font-style:italic;color:#555;font-size:0.92em;line-height:1.6;
}

.empty-state{
  grid-column:1/-1;
  text-align:center;padding:80px 40px;color:#999;
  background:var(--white);border-radius:14px;border:2px dashed var(--line);
}
.empty-state::before{content:'🍺';font-size:3em;display:block;margin-bottom:14px;opacity:.5;}

/* ---------- FOOTER ---------- */
.farm-info{
  margin-top:56px;
  background:var(--black);
  color:var(--white);
  padding:42px 30px;
  border-radius:14px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.farm-info::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(201,162,75,0.15), transparent 50%);
}
.farm-info h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.4em;margin-bottom:12px;color:var(--gold-light);position:relative;
}
.farm-info p{
  color:#cfcfcf;line-height:1.7;max-width:680px;margin:0 auto;position:relative;
  font-size:0.93em;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:768px){
  .hero{padding:46px 20px 74px;}
  .hero h1{font-size:2em;}
  .hero p{font-size:0.88em;}
  .status-bar{margin-top:-24px;}
  .tap-list{grid-template-columns:1fr;}
  .beer-card-top{padding:15px 16px;}
  .tap-number{width:25px;height:25px;font-size:0.82em;}
  .beer-glass{width:26px;height:34px;}
  .beer-name{font-size:1.08em;}
  .beer-meta{font-size:0.7em;}
  .beer-price{font-size:1.05em;}
  .farm-info{padding:30px 20px;}
}