/* =========================================================
   THE COFFEE LAYER — design tokens
   ========================================================= */
:root{
  --cream:      #F1ECE1;
  --card:       #FAF7F0;
  --ink:        #17130E;
  --ink-soft:   #4A4438;
  --line:       #D9D2C1;
  --latte:      #C9A374;
  --latte-dark: #9C7A4E;
  --chocolate:  #5B3620;
  --chocolate-dark:#3B2213;
  --ribena:     #551A34;
  --ribena-dark:#3A0F22;
  --paper:      #EFE9DC;

  --display: "Anton", "Archivo Black", sans-serif;
  --label:   "Space Grotesk", sans-serif;
  --body:    "Inter", sans-serif;

  --ease: cubic-bezier(.16,.84,.32,1);
  --nav-w: 92px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

::selection{ background:var(--ink); color:var(--cream); }

/* subtle grain overlay for warmth */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:999;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------- scroll reveal -------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal, .reveal-scale{ opacity:1; transform:none; }
}

/* -------------------- top brand strip -------------------- */
.brandstrip{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:9px 0;
  background:var(--ink); color:var(--cream);
  font-family:var(--label); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  overflow:hidden;
}
.brandstrip .track{
  display:flex; gap:48px; white-space:nowrap;
  animation:marquee 22s linear infinite;
}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.brandstrip .dot{ opacity:.5; }

/* -------------------- side navigation -------------------- */
.sidenav{
  position:fixed; top:38px; left:0; bottom:0; width:var(--nav-w); z-index:50;
  background:var(--card);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  padding:22px 0 18px;
  gap:26px;
}
.sidenav .logo{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--label); font-size:7.5px; letter-spacing:.05em; text-align:center; line-height:1.3;
  text-transform:uppercase;
  transition:transform .5s var(--ease), background .3s var(--ease);
}
.sidenav .logo:hover{ transform:rotate(-8deg) scale(1.08); background:var(--ink); color:var(--cream); }
.sidenav nav{ display:flex; flex-direction:column; gap:22px; align-items:center; flex:1; justify-content:center; }
.navlink{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--label); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; width:70px;
  position:relative; padding:6px 0;
  transition:color .3s var(--ease);
}
.navlink .ic{ width:22px; height:22px; transition:transform .4s var(--ease); }
.navlink:hover{ color:var(--ink); }
.navlink:hover .ic{ transform:translateY(-3px) scale(1.08); }
.navlink.active{ color:var(--ink); }
.navlink.active::before{
  content:""; position:absolute; left:50%; top:-10px; width:4px; height:4px; border-radius:50%;
  background:var(--ink); transform:translateX(-50%);
}
.sidenav .caret{ font-size:14px; color:var(--ink-soft); animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);} }

.mobilebar{ display:none; }

@media (max-width: 880px){
  :root{ --nav-w:0px; }
  .sidenav{ display:none; }
  .mobilebar{
    display:flex; position:fixed; top:38px; left:0; right:0; z-index:55;
    background:var(--card); border-bottom:1px solid var(--line);
    align-items:center; justify-content:space-between; padding:12px 18px;
  }
  .mobilebar .logo{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--label); font-size:6px; text-align:center; line-height:1.2; text-transform:uppercase;
  }
  .mobilebar button{ background:none; border:none; width:30px; height:22px; position:relative; cursor:pointer; }
  .mobilebar button span{ position:absolute; left:0; right:0; height:2px; background:var(--ink); transition:all .35s var(--ease); }
  .mobilebar button span:nth-child(1){ top:0; }
  .mobilebar button span:nth-child(2){ top:10px; }
  .mobilebar button span:nth-child(3){ top:20px; }
  .mobilebar.open button span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
  .mobilebar.open button span:nth-child(2){ opacity:0; }
  .mobilebar.open button span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }
  .mobilemenu{
    position:fixed; inset:0; z-index:54; background:var(--cream);
    padding-top:110px; display:flex; flex-direction:column; align-items:center; gap:30px;
    transform:translateY(-100%); transition:transform .5s var(--ease);
  }
  .mobilemenu.open{ transform:translateY(0); }
  .mobilemenu a{ font-family:var(--label); font-size:22px; letter-spacing:.06em; text-transform:uppercase; }
}

/* -------------------- page shell -------------------- */
.page{ margin-left:var(--nav-w); padding-top:38px; min-height:100vh; }
@media (max-width:880px){ .page{ margin-left:0; padding-top:76px; } }

.eyebrow{
  font-family:var(--label); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--ink-soft); }

/* -------------------- buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:14px 26px; border-radius:40px; border:1px solid var(--ink);
  background:var(--ink); color:var(--cream);
  cursor:pointer; position:relative; overflow:hidden;
  transition:color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--cream);
  transform:translateX(-102%); transition:transform .45s var(--ease); z-index:0;
}
.btn span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; }
.btn:hover{ color:var(--ink); }
.btn:hover::before{ transform:translateX(0); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost::before{ background:var(--ink); }
.btn.ghost:hover{ color:var(--cream); }

.plus{
  width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--cream);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex:none;
  transition:transform .4s var(--ease);
}

/* -------------------- footer -------------------- */
.sitefoot{
  background:var(--ink); color:var(--cream); padding:70px 8vw 26px;
  margin-left:var(--nav-w);
}
@media (max-width:880px){ .sitefoot{ margin-left:0; } }
.sitefoot .row{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-end; padding-bottom:40px; border-bottom:1px solid rgba(241,236,225,.18); }
.sitefoot h3{ font-family:var(--display); font-size:clamp(2rem,5vw,3.4rem); margin:0; letter-spacing:.01em; }
.sitefoot .links{ display:flex; gap:34px; flex-wrap:wrap; font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.sitefoot .links a{ opacity:.75; transition:opacity .3s var(--ease); }
.sitefoot .links a:hover{ opacity:1; }
.sitefoot .bottom{ display:flex; justify-content:space-between; padding-top:22px; font-family:var(--label); font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.55; flex-wrap:wrap; gap:10px; }

/* -------------------- floating bean particles -------------------- */
.beans{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.bean{
  position:absolute; width:14px; height:9px; background:var(--chocolate-dark); border-radius:50%;
  opacity:.18; animation:float 9s ease-in-out infinite;
}
.bean::after{ content:""; position:absolute; left:50%; top:8%; bottom:8%; width:1px; background:var(--cream); opacity:.5; transform:translateX(-50%); }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-18px) rotate(25deg);} }

/* -------------------- scroll progress -------------------- */
.progress{ position:fixed; top:0; left:0; height:3px; background:var(--ink); z-index:70; width:0%; }

.section{ padding:100px 8vw; position:relative; }
@media (max-width:640px){ .section{ padding:70px 6vw; } }

h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }

/* -------------------- minicard image containers -------------------- */
.minicard .bottle-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.minicard .bottle-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.18);
  transition:background .32s var(--ease);
}
.minicard:hover .bottle-img::after{ background:rgba(0,0,0,0.44); }

@media (max-width:880px){
  .minicard{
    width:160px;
    min-height:200px;
    border-radius:12px;
  }
  .minicard .bottle-img{ height:auto; }
  .minicard .bottle-img::after{ background:rgba(0,0,0,0.44); }
  .minicard .name{ font-size:1rem; bottom:28px; }
  .minicard .price{ font-size:11px; bottom:8px; }
  .minicard .num{ font-size:10px; padding:4px 8px; top:10px; left:10px; }
}