/* Styles */
:root{
  --bg:#111417;
  --cream:#f3eadf;
  --tan:#e7d5bd;
  --ink:#3c3027;
  --gold:#b98c36;
  --accent:#ddc08a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; color:var(--ink); background:var(--cream); line-height:1.6;}
.container{width:min(1100px,92%); margin:0 auto}

.site-header{position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(243,234,223,.98), rgba(243,234,223,.92)); border-bottom:1px solid rgba(0,0,0,.05); backdrop-filter:saturate(1.2) blur(6px);}
.header-inner{display:flex; align-items:center; gap:1rem; padding:.5rem 0}
.logo{height:54px; width:auto; border-radius:8px; box-shadow:0 0 0 2px var(--accent) inset}
.nav{margin-left:auto; display:flex; gap:1rem; flex-wrap:wrap}
.nav a{color:var(--ink); text-decoration:none; padding:.4rem .7rem; border-radius:.5rem}
.nav a:hover{background:rgba(0,0,0,.06)}

.hero{
  position:relative;
  min-height: 58vh;
  padding: clamp(2.6rem, 6vw, 4.8rem) 0;
  /* Top layer shows the ENTIRE image (no crop) */
  background-image: url('img/hero_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* keep whole photo visible */
  overflow:hidden;
}
/* Blurred edge fill so it doesn't look letterboxed */
.hero::before{
  content:"";
  position:absolute; inset:-10px;
  background: url('img/hero_bg.png') center/cover no-repeat;
  filter: blur(16px) brightness(.92);
  transform: scale(1.08);
  z-index:0;
}
.hero-inner{
  position:relative; z-index:1;
  display:inline-block;
  background: rgba(243,234,223,.86);
  backdrop-filter: blur(2px);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  max-width: min(680px, 92vw);
}
.hero h1, .hero p{ color:#2d261e; text-shadow:none }
.hero .btn.outline{ color:#2d261e; border-color: var(--gold); }
.hero-inner{
  display:inline-block;
  background: rgba(243,234,223,.88); /* cream panel for contrast */
  backdrop-filter: blur(2px);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.hero h1, .hero p{ color:#2d261e; text-shadow:none }
.hero .btn.outline{ color:#2d261e; border-color: var(--gold); }
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 420px at 50% -10%, rgba(255,255,255,.7), transparent 60%);
  pointer-events:none;
}
.hero h1, .hero p{ color:#2d261e; text-shadow:none }
.hero-inner{text-align:center}
.hero h1{ font-size:clamp(2rem, 4vw, 3rem); margin:.2rem 0 .5rem }
.hero p{ font-size:1.1rem; opacity:.9 }
.cta-row{display:flex; gap:1rem; justify-content:center; margin-top:1.2rem}
.btn{ background: var(--gold); color:white; text-decoration:none; padding:.8rem 1rem; border-radius:.6rem; font-weight:600; box-shadow:0 6px 18px rgba(185,140,54,.3)}
.btn:hover{ filter:brightness(1.05) }
.btn.outline{ background:transparent; color:var(--ink); border:2px solid var(--gold) }

.section{ padding: clamp(2.2rem, 5vw, 3.2rem) 0 }
.section.alt{ background:white }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0 0 1rem }
h3{ margin:.2rem 0 .6rem }
h4{ margin:.8rem 0 .4rem; font-size:1rem; text-transform:uppercase; letter-spacing:.04em; opacity:.8 }
.grid{ display:grid; gap:1.1rem }
.grid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid.three{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 800px){ .grid.two, .grid.three{ grid-template-columns: 1fr } }

.card{ background: linear-gradient(180deg, #fff, #fff8ef); border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1.1rem; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.center{text-align:center}
.narrow{max-width:780px}
.list{margin:.2rem 0 .8rem 1.1rem}
.list li{margin:.2rem 0}
.list.small li{margin:.1rem 0}
.note{font-size:.95rem; opacity:.85}

.masonry{ column-count:3; column-gap:1rem }
.masonry img{ width:100%; display:block; margin:0 0 1rem; border-radius:.8rem; box-shadow:0 8px 18px rgba(0,0,0,.08) }
.masonry figure{ break-inside: avoid; margin:0 0 1rem }
.masonry figcaption{ font-size:.9rem; opacity:.8; padding:.3rem .1rem }
@media (max-width: 900px){ .masonry{ column-count:2 } }
@media (max-width: 600px){ .masonry{ column-count:1 } }

/* About/Bio */
.bio-section .bio-content{ display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; justify-content:center }
.bio-photo{ width:min(300px, 90%); border-radius:1rem; box-shadow:0 8px 25px rgba(0,0,0,.15) }
.bio-text{ flex:1; min-width:280px }
.bio-text h3{ margin:.2rem 0 0; font-size:1.4rem }
.bio-text p{ margin:.4rem 0 }
.bio-text .note{ font-style:italic; margin-top:.6rem }

/* Order form */
.order-form label{display:block; font-weight:600; margin:.5rem 0 .3rem}
.order-form input, .order-form textarea{ width:100%; padding:.7rem .8rem; border-radius:.6rem; border:1px solid rgba(0,0,0,.15); font:inherit; background:#fff }
.order-form input:focus, .order-form textarea:focus{ outline:2px solid var(--accent) }
.policy-block{margin:.8rem 0 1rem; padding:.8rem; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:.6rem}
.checkbox{display:flex; align-items:flex-start; gap:.55rem; margin:.4rem 0}
.checkbox input{margin-top:.2rem}
.policy-block .note{margin:.4rem 0 0}
.hidden{ display:none }

/* Follow QR */
.qr{ width:min(320px, 70vw); height:auto; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.12) }

.site-footer{ background: var(--bg); color:#e9e4dc; padding:1.2rem 0; margin-top:1rem }
.footer-inner{ display:flex; align-items:center; justify-content:center; font-size:.95rem }

.hero h1, .hero p { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.btn.outline{ background:transparent; color:#fff; border:2px solid var(--gold) }

/* Offerings thumbnails */
.offer-thumb{width:100%; height:160px; object-fit:cover; border-radius:.7rem; margin-bottom:.6rem; box-shadow:0 8px 18px rgba(0,0,0,.08)}


/* Toasted beige background for offerings */
.offerings-toasted{
  background: linear-gradient(180deg, #e7d5bd, #f3eadf);
}
.offer-card{
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}


/* Flavor tags */
.flavor-tags{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:.3rem 0 .5rem }
.flavor-tag{
  border:0; cursor:pointer; font:inherit;
  background:#b98c36; color:#f3eadf; padding:.32rem .55rem;
  border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.flavor-tag:hover{ filter:brightness(1.05); box-shadow:0 4px 12px rgba(0,0,0,.18) }
.flavor-tag.sparkle{
  position:relative;
  box-shadow:0 0 0 0 rgba(185,140,54,.0);
}
.flavor-tag.sparkle::after{
  content:""; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px;
  border-radius:999px; pointer-events:none;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.6), transparent 40%),
              radial-gradient(circle at 80% 30%, rgba(255,255,255,.4), transparent 45%);
  animation: shimmer .9s ease forwards;
}
@keyframes shimmer{
  0%{ opacity:0; transform:scale(.98) }
  50%{ opacity:.9; transform:scale(1.02) }
  100%{ opacity:0; transform:scale(1) }
}

/* Overlay + Modals */
.overlay{
  position:fixed; inset:0; background:rgba(17,20,23,.25);
  opacity:0; transition:opacity .2s ease; z-index:1000;
}
.overlay.visible{ opacity:1 }
.overlay.hidden{ display:none }

.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1001;
}
.modal.visible{ opacity:1; pointer-events:auto }
.modal.hidden{ display:none }

.modal-inner{
  position:relative; width:min(700px, 92vw); border-radius:1rem; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.modal-inner.large{ width:min(980px, 94vw) }

.modal-bg{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(243,234,223,.92), rgba(243,234,223,.92)), url('../img/brand_tile.png');
  background-size: cover; background-position:center;
  filter: blur(6px);
}

.modal-content{
  position:relative; padding:1.2rem 1.2rem 1.4rem; color:#2d261e;
}
.modal-close{
  position:absolute; right:.6rem; top:.3rem;
  border:0; background:rgba(0,0,0,.08); color:#2d261e; width:36px; height:36px; border-radius:999px;
  font-size:22px; cursor:pointer;
}
.modal-close:hover{ filter:brightness(1.05) }

/* All flavors grid */
.flavors-grid{ display:grid; grid-template-columns:1fr; gap:.6rem; max-height:60vh; overflow:auto; padding-top:.4rem }
.flavor-group h4{ margin:.3rem 0 .2rem }
.flavor-list{ list-style:none; margin:0; padding:0 }
.flavor-list li{ margin:.2rem 0 }

/* Watermark behind title */
.modal-title-wrap{
  position:relative; display:flex; align-items:center; justify-content:center; padding:1.2rem .6rem .6rem;
}
.title-watermark{
  position:absolute; inset:auto; top:-10px; width:240px; height:240px; opacity:.25;
  background: url('../img/logo.jpg') center/contain no-repeat;
  filter: hue-rotate(0deg) saturate(120%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.modal-title-wrap h3{ position:relative; z-index:1; text-align:center; margin:0 }

@media (max-width:700px){
  .modal-inner{ width:94vw }
  .flavors-grid{ max-height:64vh }
}


/* Lemon Zest Sparkle — one-time gentle twinkle */
.flavor-tag.lemon-spark.zest{
  position:relative;
}
.flavor-tag.lemon-spark.zest::after{
  content:""; position:absolute; inset:-3px; border-radius:999px; pointer-events:none;
  background: radial-gradient(circle at 15% 25%, rgba(255,255,200,.7), transparent 40%),
              radial-gradient(circle at 80% 60%, rgba(255,255,170,.5), transparent 45%);
  animation: lemonTwinkle 1.3s ease forwards;
}
@keyframes lemonTwinkle{
  0%{ opacity:0; transform:scale(.98) }
  30%{ opacity:.9; transform:scale(1.02) }
  100%{ opacity:0; transform:scale(1) }
}

.main{ display:block }