/* ===================================================
   THE WHISPER CLUB — shared stylesheet
   =================================================== */

:root{
  --cream: #cebd93;
  --cream-deep: #c3b184;
  --paper: #d8c9a2;
  --maroon: #3a0e1c;
  --maroon-deep: #2a0913;
  --gold: #a9822f;
  --gold-soft: #cba758;
  --ink: #1b1210;
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--maroon);
  font-family:'Cormorant Garamond', serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

.label{
  font-family:'Jost', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.22em;
  font-weight:500;
  text-transform:uppercase;
}

/* ---------- SITE HEADER (used on inner pages) ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.2rem 1.5rem;
  background:var(--maroon);
  border-bottom:1px solid rgba(203,167,88,0.25);
}
.site-header .wordmark{
  font-family:'Jost', sans-serif;
  font-size:0.95rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold-soft);
  text-decoration:none;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  background:var(--maroon);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
  padding:2rem;
}

.hero-duck{
  position:absolute;
  top:-8%;
  left:50%;
  transform:translateX(-50%);
  width:min(70vw, 620px);
  opacity:0.09;
  pointer-events:none;
}

.hero-eyebrow{
  color:var(--gold-soft);
  margin-bottom:1.1rem;
  opacity:0;
  animation: rise 1s ease forwards 0.15s;
}

.hero h1{
  font-size:clamp(3.2rem, 9vw, 7.2rem);
  font-weight:500;
  letter-spacing:0.045em;
  line-height:0.96;
  text-transform:uppercase;
  color:var(--paper);
  opacity:0;
  animation: rise 1.1s ease forwards 0.35s;
}

.hero-rule{
  width:56px;
  height:1px;
  background:var(--gold);
  margin:1.6rem 0;
  opacity:0;
  animation: rise 1s ease forwards 0.6s;
}

.hero p.tag{
  max-width:480px;
  font-size:1.15rem;
  font-style:italic;
  font-weight:400;
  color:var(--cream);
  line-height:1.6;
  opacity:0;
  animation: rise 1s ease forwards 0.8s;
}

.hero-cta{
  margin-top:2.6rem;
  display:inline-flex;
  align-items:center;
  gap:0.9rem;
  padding:0.9rem 2.1rem;
  border:1px solid var(--gold);
  color:var(--gold-soft);
  text-decoration:none;
  font-family:'Jost', sans-serif;
  font-size:0.75rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  transition:background 0.35s ease, color 0.35s ease;
  opacity:0;
  animation: rise 1s ease forwards 1.02s;
}
.hero-cta:hover{ background:var(--gold); color:var(--maroon-deep); }

@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.scroll-hint{
  position:absolute;
  bottom:2.2rem;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:46px;
  background:linear-gradient(var(--gold), transparent);
  opacity:0.6;
}

/* ---------- INTRO STRIP ---------- */
.intro{
  max-width:640px;
  margin:0 auto;
  padding:6rem 2rem 4rem;
  text-align:center;
}
.intro .label{ color:var(--gold); display:block; margin-bottom:1rem; }
.intro p{
  font-size:clamp(1.4rem, 2.6vw, 1.85rem);
  line-height:1.5;
  font-weight:400;
}

/* ---------- LANDING PAGE EXTRAS ---------- */
.highlights{
  max-width:960px;
  margin:0 auto;
  padding:1rem 2rem 6rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.4rem;
  text-align:center;
}
.highlight-card{
  padding:2.4rem 1.4rem;
  border:1px solid rgba(58,14,28,0.18);
}
.highlight-card .icon{
  width:34px;
  height:34px;
  margin:0 auto 1.2rem;
  opacity:0.85;
}
.highlight-card h3{
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:0.6rem;
  letter-spacing:0.02em;
}
.highlight-card p{
  font-size:1rem;
  font-style:italic;
  opacity:0.75;
  line-height:1.5;
}

.landing-cta{
  background:var(--maroon);
  color:var(--paper);
  text-align:center;
  padding:5rem 2rem;
}
.landing-cta .label{ color:var(--gold-soft); display:block; margin-bottom:1.1rem; }
.landing-cta h2{
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  font-weight:500;
  margin-bottom:2rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
}

@media (max-width:720px){
  .highlights{ grid-template-columns:1fr; }
}

/* ---------- MENU NAV ---------- */
.menu-nav{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--cream);
  border-top:1px solid rgba(58,14,28,0.25);
  border-bottom:1px solid rgba(58,14,28,0.25);
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.menu-nav::-webkit-scrollbar{ display:none; }
.menu-nav-inner{
  display:inline-flex;
  padding:0 1.5rem;
}
.menu-nav a{
  font-family:'Jost', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--maroon);
  text-decoration:none;
  padding:1.15rem 1.15rem;
  opacity:0.55;
  transition:opacity 0.25s ease, color 0.25s ease;
  border-bottom:2px solid transparent;
}
.menu-nav a:hover, .menu-nav a.active{
  opacity:1;
  color:var(--maroon-deep);
  border-bottom-color:var(--gold);
}

/* ---------- MENU HERO (small banner on menu page) ---------- */
.menu-hero{
  background:var(--maroon);
  color:var(--paper);
  text-align:center;
  padding:5rem 2rem 3.5rem;
}
.menu-hero .label{ color:var(--gold-soft); display:block; margin-bottom:1rem; }
.menu-hero h1{
  font-size:clamp(2.4rem, 6vw, 4rem);
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* ---------- MENU SECTIONS ---------- */
.menu{
  max-width:760px;
  margin:0 auto;
  padding:4rem 1.6rem 2rem;
}

.menu-group{
  padding:3.4rem 0;
  border-bottom:1px solid rgba(58,14,28,0.18);
}
.menu-group:last-child{ border-bottom:none; }

.menu-group-title{
  display:flex;
  align-items:baseline;
  gap:0.7rem;
  font-size:clamp(1.9rem, 4vw, 2.6rem);
  font-weight:500;
  margin-bottom:0.3rem;
}
.menu-group-title .note{
  font-family:'Jost', sans-serif;
  font-size:0.85rem;
  letter-spacing:0.02em;
  color:var(--gold);
  font-style:normal;
}
.menu-group-desc{
  font-style:italic;
  color:var(--maroon);
  opacity:0.75;
  margin-bottom:1.8rem;
  font-size:1.05rem;
}

.subhead{
  font-family:'Jost', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.18em;
  color:var(--gold);
  margin:1.6rem 0 0.9rem;
  text-transform:uppercase;
}
.subhead:first-of-type{ margin-top:0; }

.item{
  display:flex;
  align-items:baseline;
  gap:0.7rem;
  padding:0.85rem 0;
  border-bottom:1px solid rgba(58,14,28,0.14);
}
.item:last-child{ border-bottom:none; }

.item-text{ flex:1; min-width:0; }
.item-name{
  font-size:1.2rem;
  font-weight:600;
}
.item-desc{
  font-style:italic;
  font-size:0.98rem;
  line-height:1.4;
  opacity:0.78;
  margin-top:0.15rem;
}
.item-price{
  font-family:'Jost', sans-serif;
  font-weight:500;
  font-size:1rem;
  white-space:nowrap;
}

.vat-note{
  text-align:center;
  font-family:'Jost', sans-serif;
  font-size:0.68rem;
  letter-spacing:0.14em;
  color:var(--maroon);
  opacity:0.55;
  padding:2.5rem 0 5rem;
  text-transform:uppercase;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--maroon);
  color:var(--paper);
  padding:4rem 2rem 2.2rem;
  text-align:center;
}
footer .word{
  font-family:'Jost', sans-serif;
  font-size:1.4rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  margin-bottom:1.6rem;
  color:var(--gold-soft);
}
.socials{
  display:flex;
  justify-content:center;
  gap:1.8rem;
  margin-bottom:2.4rem;
  font-family:'Jost', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.socials a{
  color:var(--paper);
  text-decoration:none;
  opacity:0.75;
  transition:opacity 0.2s ease;
}
.socials a:hover{ opacity:1; color:var(--gold-soft); }
footer .fine{
  font-family:'Jost', sans-serif;
  font-size:0.65rem;
  letter-spacing:0.08em;
  opacity:0.45;
  text-transform:uppercase;
}

@media (max-width:560px){
  .item{ flex-wrap:wrap; }
  .intro{ padding:4.5rem 1.6rem 3rem; }
}

@media (prefers-reduced-motion: reduce){
  .hero-eyebrow,.hero h1,.hero-rule,.hero p.tag,.hero-cta{
    animation:none; opacity:1;
  }
}