/* =========================================
   THE OPEN CRATE — Logo-matched theme
   Palette pulled from your mark (gold + wood)
   ========================================= */
:root{
  /* Golds (letters) */
  --gold-100:#FFF4CF;
  --gold-200:#FFE6A3;
  --gold-300:#FFD56A;   /* light highlight */
  --gold-500:#FFB300;   /* primary gold */
  --gold-700:#D68600;   /* deep amber */

  /* Woods (crate & outlines) */
  --wood-200:#C89A6A;
  --wood-300:#B57B43;
  --wood-500:#8B5E34;   /* mid wood */
  --wood-700:#5B3B1A;   /* chocolate outline */
  --wood-800:#4A2F14;

  /* Neutrals */
  --paper:#FFF9ED;      /* warm cream app bg */
  --card:#FFFFFF;
  --ink:#2B2B2B;
  --muted:#6F6A63;

  /* Effects */
  --ring: rgba(214,134,0,.28);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.10);
  --shadow-md: 0 12px 28px rgba(0,0,0,.14);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.18);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--ink);
  line-height:1.6;
  background:
    /* soft vignette */
    radial-gradient(1200px 600px at 20% -10%, rgba(255,179,0,.075), transparent 70%),
    /* faint wood grain lines */
    repeating-linear-gradient(
      90deg,
      rgba(91,59,26,.04) 0 2px,
      rgba(91,59,26,.02) 2px 6px,
      transparent 6px 10px
    ),
    var(--paper);
}

.container{max-width:960px;margin:0 auto;padding:1.25rem}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:
    linear-gradient(180deg, var(--wood-700), var(--wood-500));
  color:#fff;
  box-shadow: var(--shadow-md);
  padding:.65rem 0;
  border-bottom:2px solid rgba(0,0,0,.08);
}
.header-inner{display:flex;align-items:center;gap:.9rem}
.logo{
  width:64px;height:64px;object-fit:contain;
  border-radius:14px;
  background:#fff8; backdrop-filter:saturate(120%);
  padding:6px;
  box-shadow: var(--shadow-sm);
}
.brand{
  font-family:'Luckiest Guy', cursive;
  font-size:clamp(2rem,4.5vw,2.7rem);
  margin:0;
  letter-spacing:.5px;
  text-shadow:1px 1px 0 rgba(0,0,0,.35);
}

/* Hero */
.hero{
  text-align:center;
  padding:3.25rem 1.5rem 2.25rem;
  color: var(--wood-800);
  margin-bottom:2.25rem;
  border-bottom-left-radius:36px;
  border-bottom-right-radius:36px;
  box-shadow: var(--shadow-lg);
  animation: fadeInDown .9s ease-out;

  /* gold bar with slight sheen */
  background:
    linear-gradient(135deg, var(--gold-300), var(--gold-500)),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  background-blend-mode: overlay, normal;
}
.hero-title{
  font-family:'Luckiest Guy', cursive;
  margin:.5rem 0 1rem;
  font-size:clamp(2.6rem,7vw,4.2rem);
  line-height:1.1;
  color: var(--wood-800);
  text-shadow:2px 2px 0 rgba(255,213,106,.45), 3px 3px 6px rgba(0,0,0,.35);
}
.tagline{
  max-width:760px;margin:0 auto .75rem;
  font-size:clamp(1.05rem,2.7vw,1.25rem);
  color:#2d261f;
}
.tagline strong{color:var(--wood-800)}
.hero-slogan{
  font-family:'Luckiest Guy', cursive;
  font-size:clamp(1.6rem,4.4vw,2.3rem);
  margin:.5rem 0 1.75rem;
  color:var(--wood-800);
  text-shadow:2px 2px 0 rgba(255,230,163,.55);
  animation: slideInLeft .8s ease-out .2s backwards;
}

/* Countdown */
.countdown{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.1rem;max-width:640px;margin:1.6rem auto 1.25rem;
}
.countdown div{
  background:var(--card);
  border-radius:22px;
  padding:1.1rem;
  border:2px solid var(--gold-300);
  box-shadow: var(--shadow-md);
  transform:translateY(0) scale(1);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.countdown div:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color:var(--gold-700);
}
.countdown span{
  display:block;font-weight:800;
  font-size:clamp(2.1rem,7.8vw,3.3rem);
  color:var(--wood-800);
  font-family:'Luckiest Guy', cursive;
}
.countdown small{
  display:block;margin-top:.3rem;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;
  font-size:.88rem;font-weight:700;
}
.open-line{
  margin-top:1.25rem;font-size:1.15rem;
  color:var(--wood-800);
}

/* Cards */
.card{
  background:var(--card);
  border-radius:26px;
  padding:1.8rem;
  margin:1.8rem auto;
  border:1px solid rgba(74,47,20,.08);
  box-shadow: var(--shadow-md);
  animation: fadeInUp .7s ease-out .35s backwards;
}
.card h3{
  font-family:'Luckiest Guy', cursive;
  color:var(--wood-800);
  font-size:clamp(1.85rem,4.3vw,2.4rem);
  margin:0 0 1rem;
  text-align:center;
}
.card p{font-size:1.06rem;margin:.25rem 0 1rem}

/* Visit */
.visit address{
  font-style:normal;text-align:center;
  font-size:1.12rem;margin-bottom:1rem;color:#3a2f26;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:.95rem 1.8rem;
  border-radius:999px;
  border:none;cursor:pointer;
  text-decoration:none;
  text-transform:uppercase;letter-spacing:.07em;
  font-weight:800;font-size:1.05rem;color:#1f1409;

  background:
    linear-gradient(135deg, var(--gold-500), var(--gold-700));
  box-shadow: 0 10px 22px var(--ring);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-4px);box-shadow:0 16px 32px var(--ring);filter:saturate(110%)}
.btn:active{transform:translateY(-1px) scale(.98);box-shadow:0 8px 14px var(--ring)}

/* Footer */
.site-footer{
  text-align:center;
  color:#5c544b;
  padding:2.6rem 0 3.2rem;
  background:linear-gradient(180deg, #f8ead1, #efe0c6);
  border-top:1px solid rgba(0,0,0,.05);
  margin-top:2.2rem;
}

/* Keyframes */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media (max-width:768px){
  .hero{padding-top:2.2rem;padding-bottom:1.8rem}
  .countdown{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .header-inner{justify-content:center;gap:.7rem}
  .logo{width:56px;height:56px;padding:5px}
  .brand{font-size:clamp(1.8rem,6vw,2.1rem)}
  .countdown{grid-template-columns:1fr;max-width:280px}
  .card{padding:1.25rem;border-radius:20px}
}