/* ============ Fern & Fog — Garden Tea House : shared styles ============ */
:root{
  --sage:#7c8b6f;
  --sage-deep:#4a5a45;
  --moss:#2f3a2c;
  --cream:#f4f1e8;
  --paper:#fbfaf4;
  --terra:#c06b48;
  --terra-soft:#d99873;
  --clay:#e8ddc9;
  --ink:#2a2e26;
  --taro:#b9a3d6;
  --matcha:#9bbf6f;
  --peach:#eeb38a;
  --brown:#b07a4e;
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Work Sans",system-ui,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.05;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--terra);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.6rem;border-radius:100px;font-weight:500;font-size:.96rem;cursor:pointer;border:0;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.btn-primary{background:var(--terra);color:#fff;box-shadow:0 10px 24px -10px rgba(192,107,72,.7)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(192,107,72,.8)}
.btn-ghost{border:1.5px solid var(--sage-deep);color:var(--sage-deep);background:transparent}
.btn-ghost:hover{transform:translateY(-3px);background:var(--sage-deep);color:var(--cream)}

/* ---------- nav ---------- */
header.site{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.6rem);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
header.site.scrolled{background:rgba(251,250,244,.82);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(47,58,44,.08);padding-block:.75rem}
.brand{display:flex;align-items:center;gap:.55rem;font-family:"Fraunces",serif;font-size:1.3rem;font-weight:600}
.brand .leaf{width:26px;height:26px;color:var(--sage)}
nav.main ul{display:flex;gap:1.7rem;list-style:none;font-size:.9rem;font-weight:400;align-items:center}
nav.main a{position:relative;padding:.2rem 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--terra);transition:width .3s var(--ease)}
nav.main a:hover::after,nav.main a.active::after{width:100%}
nav.main a.active{color:var(--terra)}
.nav-cta{background:var(--moss);color:var(--cream)!important;padding:.6rem 1.2rem;border-radius:100px;font-size:.88rem;transition:transform .25s var(--ease),background .25s var(--ease)}
.nav-cta:hover{transform:translateY(-2px);background:var(--sage-deep)}
.nav-cta::after{display:none}
.menu-btn{display:none;background:none;border:0;cursor:pointer;color:var(--moss)}
.mobile-nav{display:none}

/* ---------- reveal (progressive: only hidden when JS is active) ---------- */
html.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- sections ---------- */
section{padding:clamp(4rem,9vw,8rem) 0}
.section-head{max-width:48ch;margin-bottom:3rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-top:.6rem;color:var(--moss)}
.section-head p{color:#4c5447;margin-top:1rem}

/* ---------- page hero (interior pages) ---------- */
.page-hero{padding:9rem 0 4rem;background:radial-gradient(120% 120% at 80% 0%,#e7ecd9 0,transparent 55%),linear-gradient(180deg,#f4f1e8,#eef0e2)}
.page-hero h1{font-size:clamp(2.6rem,7vw,5rem);color:var(--moss)}
.page-hero h1 em{font-style:italic;color:var(--terra)}
.page-hero p{font-size:1.12rem;max-width:48ch;margin-top:1.2rem;color:#4c5447}

/* ---------- feature cards (about-us style row) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.fcard{background:var(--cream);border-radius:var(--r);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.fcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(47,58,44,.5)}
.fcard .ph{aspect-ratio:4/3;overflow:hidden}
.fcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.fcard:hover .ph img{transform:scale(1.06)}
.fcard .body{padding:1.4rem 1.5rem 1.7rem}
.fcard h3{font-size:1.35rem;color:var(--sage-deep);margin-bottom:.5rem}
.fcard p{color:#5a6253;font-size:.94rem}

/* ---------- menu ---------- */
.menu-tabs{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem}
.menu-tabs button{background:var(--cream);border:1.5px solid transparent;border-radius:100px;padding:.55rem 1.3rem;font-size:.9rem;cursor:pointer;color:var(--sage-deep);transition:all .25s var(--ease)}
.menu-tabs button.active{background:var(--moss);color:var(--cream)}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem}
.item{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:1rem 0;border-bottom:1px dashed rgba(47,58,44,.14)}
.item .name{font-weight:500;font-size:1.05rem}
.item .tag{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);border:1px solid var(--terra-soft);border-radius:100px;padding:.1rem .5rem;margin-left:.5rem}
.item .desc{font-size:.86rem;color:#6a7263;margin-top:.15rem;max-width:38ch}
.item .price{font-family:"Fraunces",serif;color:var(--terra);font-size:1.05rem;white-space:nowrap}

/* ---------- quote / value band ---------- */
.band{background:var(--moss);color:var(--cream);text-align:center}
.band .eyebrow{color:var(--terra-soft)}
.band h2{color:var(--paper);font-size:clamp(2rem,5vw,3.2rem);max-width:18ch;margin:.6rem auto 0}
.band p{color:#cdd3c4;max-width:54ch;margin:1.4rem auto 0}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.gallery img{aspect-ratio:1;object-fit:cover;border-radius:12px;transition:transform .5s var(--ease)}
.gallery img:hover{transform:scale(1.04)}

/* ---------- contact / form ---------- */
.form-card{background:var(--cream);border-radius:22px;padding:clamp(1.6rem,4vw,2.6rem);max-width:640px;margin-inline:auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1rem;text-align:left}
.field label{display:block;font-size:.82rem;color:var(--sage-deep);margin-bottom:.35rem;letter-spacing:.02em}
.field input,.field textarea,.field select{width:100%;padding:.8rem 1rem;border:1.5px solid var(--clay);border-radius:12px;background:var(--paper);font:inherit;color:var(--ink);transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--sage)}
.field textarea{resize:vertical;min-height:120px}

/* ---------- locations ---------- */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.loc{background:var(--cream);border-radius:var(--r);overflow:hidden}
.loc .map{height:170px;background:radial-gradient(circle at 30% 40%,#cdd9c0,transparent 42%),radial-gradient(circle at 70% 70%,#e8ddc9,transparent 46%),linear-gradient(135deg,#dfe7d2,#eef0e2);display:grid;place-items:center}
.loc .pin{width:34px;height:34px;border-radius:50% 50% 50% 0;background:var(--terra);transform:rotate(-45deg);box-shadow:0 8px 16px -5px rgba(192,107,72,.7);position:relative}
.loc .pin::after{content:"";position:absolute;inset:10px;background:var(--paper);border-radius:50%}
.loc .body{padding:1.3rem 1.4rem 1.6rem}
.loc h3{font-size:1.25rem;color:var(--moss)}
.loc .addr{color:#6a7263;font-size:.9rem;margin:.3rem 0 .9rem}
.loc .hrs{font-size:.84rem;color:var(--sage-deep);border-top:1px solid rgba(47,58,44,.12);padding-top:.7rem}

/* ---------- stats ---------- */
.stats{display:flex;gap:2.4rem;flex-wrap:wrap}
.stats b{font-family:"Fraunces",serif;font-size:2rem;color:var(--terra);display:block;line-height:1}
.stats span{font-size:.82rem;color:#6a7263}

/* ---------- footer ---------- */
footer.site{background:var(--cream);padding:3.5rem 0 2.5rem}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.foot-brand{font-family:"Fraunces",serif;font-size:1.5rem;font-weight:600;color:var(--moss);display:flex;align-items:center;gap:.5rem}
.foot-grid>div>p{color:#6a7263;font-size:.9rem;max-width:30ch;margin-top:.6rem}
.socials{display:flex;gap:.8rem;margin-top:1rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--sage);color:var(--sage-deep);display:grid;place-items:center;transition:all .25s var(--ease)}
.socials a:hover{background:var(--sage-deep);color:var(--cream);border-color:var(--sage-deep);transform:translateY(-3px)}
.foot-links{display:flex;gap:3rem;flex-wrap:wrap}
.foot-links h4{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin-bottom:.9rem}
.foot-links a{display:block;color:#4c5447;font-size:.92rem;padding:.25rem 0;transition:color .2s}
.foot-links a:hover{color:var(--terra)}
.copy{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(47,58,44,.12);font-size:.82rem;color:#8a9080;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.copy a{color:var(--sage-deep);text-decoration:underline;text-underline-offset:2px}
.copy a:hover{color:var(--terra)}

/* ---------- legal / prose pages ---------- */
.prose{max-width:760px}
.prose h2{font-size:1.5rem;color:var(--moss);margin:2.2rem 0 .6rem}
.prose h2:first-of-type{margin-top:0}
.prose p,.prose li{color:#4c5447;margin-bottom:.8rem}
.prose ul{padding-left:1.2rem;margin-bottom:.8rem}
.prose a{color:var(--terra);text-decoration:underline;text-underline-offset:2px}
.prose .updated{font-size:.85rem;color:#8a9080;margin-bottom:2rem}
.prose strong{color:var(--sage-deep)}

/* ============ HERO with rotating boba cups ============ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:6rem;overflow:hidden;
  background:radial-gradient(130% 90% at 50% -10%,#eef2e3 0,transparent 55%),linear-gradient(180deg,#f4f1e8 0%,#e9ede0 100%);}
.hero-copy{text-align:center;z-index:5;position:relative;padding-top:2rem}
.hero-copy .eyebrow{color:var(--terra)}
.hero-copy h1{font-size:clamp(2.8rem,8vw,6.2rem);color:var(--moss);margin-top:.6rem}
.hero-copy h1 em{font-style:italic;color:var(--terra)}
.hero-copy p{font-size:1.15rem;max-width:44ch;margin:1.4rem auto 0;color:#4c5447}
.hero-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}

/* the drink stage sits along the bottom */
.stage{position:relative;height:clamp(300px,42vh,460px);margin-top:1.5rem;
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(.5rem,4vw,3rem);
  perspective:1400px;}
.drink{position:relative;width:clamp(120px,15vw,190px);will-change:transform}
.drink .shadow{position:absolute;left:50%;bottom:-14px;width:78%;height:26px;translate:-50% 0;
  background:radial-gradient(ellipse,rgba(47,58,44,.32),transparent 70%);filter:blur(3px);z-index:-1}

/* center pair: lower + static */
.drink.center{margin-bottom:0;z-index:3}
/* side pair: higher, tilted outward, rotating */
.drink.side{margin-bottom:clamp(40px,9vh,90px);z-index:2;transform-style:preserve-3d}
/* turntable spin — ease-in-out so the swing slows at both ends (no snap on the turnaround) */
.drink.side .spin{transform-style:preserve-3d;animation:turntable 7s ease-in-out infinite}
.drink.side.left{rotate:-13deg}
.drink.side.right{rotate:13deg}
.drink.side.right .spin{animation-direction:reverse}

/* turntable illusion: face turns toward viewer & back, staying in the tilted frame */
@keyframes turntable{
  0%,100%{transform:rotateY(-32deg)}
  50%{transform:rotateY(32deg)}
}
/* entrance: sweep in from the screen edges, then settle gently (ease-out, no rebound) */
.drink.side.left{animation:sweepL 1.4s cubic-bezier(.16,.84,.36,1) both}
.drink.side.right{animation:sweepR 1.4s cubic-bezier(.16,.84,.36,1) both}
@keyframes sweepL{from{opacity:0;translate:-60vw 0;rotate:-30deg}60%{opacity:1}to{opacity:1;translate:0 0;rotate:-13deg}}
@keyframes sweepR{from{opacity:0;translate:60vw 0;rotate:30deg}60%{opacity:1}to{opacity:1;translate:0 0;rotate:13deg}}
.drink.center{animation:riseUp 1s var(--ease) both}
.drink.center.c2{animation-delay:.12s}
@keyframes riseUp{from{opacity:0;translate:0 50px}to{opacity:1;translate:0 0}}

@media(prefers-reduced-motion:reduce){
  .drink.side .spin{animation:none;transform:rotateY(0)}
  .drink.side.left,.drink.side.right,.drink.center{animation:none;opacity:1}
}

/* the cup svg */
.cup{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 24px rgba(47,58,44,.22))}

/* ---------- falling leaves (hero backdrop) ---------- */
.leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.leaf-fall{position:absolute;top:-10%;will-change:transform;color:var(--sage);
  animation:leaf-fall linear infinite}
.leaf-fall svg{display:block;width:100%;height:100%}
.leaf-fall.v2{color:var(--terra-soft)}
.leaf-fall.v3{color:var(--sage-deep)}
@keyframes leaf-fall{
  0%{transform:translate3d(0,-12vh,0) rotate(0deg);opacity:0}
  8%{opacity:.5}
  50%{transform:translate3d(40px,55vh,0) rotate(220deg)}
  92%{opacity:.5}
  100%{transform:translate3d(-30px,118vh,0) rotate(460deg);opacity:0}
}
.stage{z-index:4}
.hero-copy{z-index:5}
@media(prefers-reduced-motion:reduce){.leaf-fall{display:none}}

/* ---------- drink cards (main → sub) ---------- */
.drinks-wrap{display:flex;flex-direction:column;gap:1.4rem}
.drink-card{display:grid;grid-template-columns:160px 1fr;gap:1.8rem;align-items:center;
  background:var(--cream);border-radius:var(--r);padding:1.5rem 1.8rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.drink-card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -34px rgba(47,58,44,.5)}
.drink-card .cupwrap{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#fff,rgba(255,255,255,0) 72%)}
.drink-card .cup{width:74%;filter:drop-shadow(0 14px 20px rgba(47,58,44,.22));transition:transform .5s var(--ease)}
.drink-card:hover .cup{transform:translateY(-6px) rotate(-3deg)}
.drink-card .main-name{font-family:"Fraunces",serif;font-size:1.5rem;color:var(--moss);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.drink-card .from{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);border:1px solid var(--terra-soft);border-radius:100px;padding:.12rem .55rem}
.drink-card .main-desc{color:#5a6253;font-size:.92rem;margin:.35rem 0 1rem;max-width:60ch}
.subs{display:flex;flex-wrap:wrap;gap:.55rem}
.sub{display:inline-flex;align-items:center;gap:.5rem;background:var(--paper);border:1px solid var(--clay);
  border-radius:100px;padding:.4rem .85rem;font-size:.85rem;transition:border-color .2s,transform .2s}
.sub:hover{border-color:var(--sage);transform:translateY(-2px)}
.sub .dot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sub .p{color:var(--terra);font-family:"Fraunces",serif;margin-left:.15rem}
@media(max-width:620px){.drink-card{grid-template-columns:1fr;text-align:center;padding:1.4rem}.drink-card .cupwrap{max-width:160px;margin-inline:auto}.subs{justify-content:center}.drink-card .main-name{justify-content:center}}

/* ---------- cup feature panels (home) ---------- */
.cuppanel{aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,var(--clay),#fff)}
.cuppanel .cup{width:40%;filter:drop-shadow(0 16px 22px rgba(47,58,44,.24));transition:transform .6s var(--ease)}
.fcard:hover .cuppanel .cup{transform:translateY(-8px) rotate(-4deg) scale(1.04)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  nav.main ul{display:none}
  .menu-btn{display:block}
  .feature-grid,.loc-grid,.menu-list{grid-template-columns:1fr}
  .menu-list{gap:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .stage{gap:.2rem}
  .drink.side.left{rotate:-10deg}.drink.side.right{rotate:10deg}
  .mobile-nav.open{display:flex;flex-direction:column;position:fixed;inset:0;background:var(--paper);z-index:60;padding:5rem 2rem;gap:1.4rem;font-family:"Fraunces",serif;font-size:1.6rem}
  .mobile-nav.open a{color:var(--moss)}
  .mobile-nav .close{position:absolute;top:1.4rem;right:1.6rem;background:none;border:0;font-size:2rem;cursor:pointer;color:var(--moss)}
}
@media(max-width:560px){
  /* hide side drinks on very small screens to keep the row clean */
  .drink.side{width:clamp(90px,28vw,120px)}
  .drink.center{width:clamp(96px,30vw,130px)}
}