/* ============================================================
   Azalea Caffeine Collective
   Palette drawn from the brand cards:
   cream, dusty rose, sage, burgundy-brown, azalea pink
   ============================================================ */

:root{
  --cream:      #fbf5ee;
  --cream-deep: #f4e9dd;
  --blush:      #efd8d1;
  --rose:       #c88a86;
  --rose-deep:  #b3746f;
  --rose-text:  #9a5b56;   /* AA-safe rose for small text on cream (>=4.5:1) */
  --azalea:     #e7a6ac;
  --sage:       #7f8c60;
  --sage-deep:  #647052;
  --cocoa:      #5c3b34;
  --cocoa-soft: #6e4a42;
  --ink:        #4a332e;
  --contact-fg: #f6e7e3;   /* text on the dark contact panel */

  --serif: "Cormorant Garamond", Georgia, serif;
  --wordmark: "Cinzel", "Cormorant Garamond", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Pinyon Script", cursive;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(231,166,172,.28), transparent 60%),
    radial-gradient(1000px 620px at 8% 4%, rgba(127,140,96,.16), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream) 55%, var(--cream-deep) 100%);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

section{ position:relative; }

/* visible keyboard focus everywhere */
:focus-visible{ outline:2px solid var(--cocoa); outline-offset:3px; border-radius:3px; }

.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.72rem;
  font-weight:400;
  color:var(--rose-text);
  margin:0 0 1.1rem;
}
.eyebrow--light{ color:var(--contact-fg); }

h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem, 4.6vw, 3.3rem);
  line-height:1.12;
  letter-spacing:.005em;
  color:var(--cocoa);
  margin:0 0 1.3rem;
}
h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.5rem;
  color:var(--cocoa);
  margin:0 0 .55rem;
  letter-spacing:.01em;
}
p{ margin:0 0 1.1rem; }
em{ font-style:italic; color:var(--rose-text); }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  color:var(--cocoa);
  padding:.95em 2.1em;
  border:1px solid var(--rose);
  border-radius:40px;
  background:transparent;
  cursor:pointer;
  transition:all .5s var(--ease);
}
.btn:hover{ background:var(--cocoa); color:#fff; border-color:var(--cocoa); letter-spacing:.32em; }
.btn--solid{
  background:var(--rose-deep); color:#fff; border-color:var(--rose-deep);
}
.btn--solid:hover{ background:var(--cocoa); border-color:var(--cocoa); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  padding:1.15rem clamp(1.2rem, 4vw, 3rem);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.nav.scrolled{
  background:rgba(251,245,238,.9);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(92,59,52,.08);
  padding-top:.8rem; padding-bottom:.8rem;
}
.nav__brand{
  font-family:var(--wordmark);
  text-decoration:none;
  color:var(--cocoa);
  font-size:1.15rem;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
}
.nav__brand span{
  display:block;
  font-family:var(--sans);
  font-size:.54rem;
  letter-spacing:.42em;
  color:var(--rose-text);
  margin-top:.28rem;
}
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); }
.nav__links a{
  text-decoration:none;
  color:var(--cocoa-soft);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:color .3s;
}
.nav__links a:hover{ color:var(--rose-text); }
.nav__cta{
  border:1px solid var(--rose);
  border-radius:30px;
  padding:.55em 1.3em;
  color:var(--rose-text)!important;
}
.nav__cta:hover{ background:var(--cocoa); color:#fff!important; border-color:var(--cocoa); }

/* hamburger toggle (mobile only) */
.nav__toggle{
  display:none;
  width:44px; height:44px; padding:10px;
  background:transparent; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px;
}
.nav__toggle span{
  display:block; height:2px; width:100%; background:var(--cocoa);
  border-radius:2px; transition:transform .35s var(--ease), opacity .25s;
}
.nav.open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:7rem 1.2rem 4rem;
  overflow:hidden;
}
.hero__shimmer{
  position:absolute; inset:-20% -10% auto -10%; height:130%;
  background:
    conic-gradient(from 210deg at 60% 40%,
      rgba(231,166,172,.0),
      rgba(231,166,172,.16),
      rgba(200,138,134,.10),
      rgba(127,140,96,.08),
      rgba(231,166,172,.0));
  filter:blur(30px);
  animation:drift 26s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{
  0%{ transform:translate3d(-3%, -2%, 0) rotate(0deg); }
  100%{ transform:translate3d(4%, 3%, 0) rotate(8deg); }
}

.hero__inner{ position:relative; z-index:2; }
.hero__emblem{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.55em;
  font-size:.72rem;
  color:var(--sage-deep);
  margin:0 0 1.2rem;
}
.hero__emblem span{ color:var(--rose); }
.hero__word{
  font-family:var(--wordmark);
  font-weight:500;
  font-size:clamp(3.8rem, 15vw, 10rem);
  letter-spacing:.06em;
  line-height:.9;
  margin:0;
  color:var(--cocoa);
  text-shadow:0 2px 30px rgba(200,138,134,.25);
}
.hero__sub{
  font-family:var(--wordmark);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:clamp(.95rem, 2.8vw, 1.5rem);
  color:var(--rose-text);
  margin:.9rem 0 0;
}
.hero__desc{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--sage-deep);
  margin:.5rem 0 0;
}
.hero__tag{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;
  color:var(--cocoa-soft);
  margin:1.8rem 0 2.4rem;
}
.hero__tag i{ color:var(--rose-deep); font-style:normal; margin:0 .3em; }

.hero__hint{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-size:.62rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--rose-text); opacity:.75;
  animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.4} 50%{opacity:.9} }

/* swaying sprigs — only the blossom is the trigger (JS anchors petals there) */
.sprig{
  position:absolute; z-index:1; pointer-events:auto;
  height:auto;               /* derive height from width, never from the height attr */
  transform-origin:center bottom;
  will-change:transform;
  cursor:default;
}
.sprig--tl{
  top:-2.5rem; left:-3rem; width:clamp(180px, 26vw, 360px);
  transform:rotate(-8deg) scaleX(-1);
  animation:sway1 7s ease-in-out infinite alternate;
}
.sprig--br{
  bottom:-3rem; right:-3rem; width:clamp(190px, 28vw, 400px);
  transform:rotate(6deg);
  animation:sway2 8.5s ease-in-out infinite alternate;
}
@keyframes sway1{
  0%{ transform:rotate(-9deg) scaleX(-1); }
  100%{ transform:rotate(-4deg) scaleX(-1) translateY(-6px); }
}
@keyframes sway2{
  0%{ transform:rotate(7deg); }
  100%{ transform:rotate(2deg) translateY(-8px); }
}
/* menu sprig has its own (un-mirrored) keyframes so it never flips on load */
@keyframes sway3{
  0%{ transform:rotate(-11deg); }
  100%{ transform:rotate(-7deg) translateY(-6px); }
}

/* ============================================================
   STORY
   ============================================================ */
.story{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(5rem,10vw,9rem) clamp(1.4rem,5vw,3rem);
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.story__art{ display:flex; justify-content:center; }
.story__art img{
  width:min(360px, 80%); height:auto;
  animation:sway2 9s ease-in-out infinite alternate;
  transform-origin:center bottom;
  filter:drop-shadow(0 16px 26px rgba(92,59,52,.16));
}
.story__copy p{ font-size:1.12rem; color:var(--ink); }

/* ============================================================
   GATHERINGS
   ============================================================ */
.gather{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3rem,7vw,6rem) clamp(1.4rem,5vw,3rem) clamp(5rem,10vw,8rem);
  text-align:center;
}
.gather__head{ max-width:680px; margin:0 auto 3.4rem; }
.gather__lede{ font-size:1.12rem; color:var(--ink); }
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  text-align:left;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(244,233,221,.5));
  border:1px solid rgba(200,138,134,.28);
  border-radius:18px;
  padding:2.4rem 2rem 2.2rem;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 48px -22px rgba(92,59,52,.35);
  border-color:var(--rose);
}
.card__mark{
  display:block; color:var(--rose-deep); font-size:1.3rem; margin-bottom:1rem;
}
.card p{ margin:0; color:var(--ink); }

/* ============================================================
   THE BAR / MENU
   ============================================================ */
.menu{
  background:
    radial-gradient(700px 400px at 90% 10%, rgba(231,166,172,.16), transparent 60%),
    linear-gradient(180deg, rgba(244,233,221,.5), rgba(239,216,209,.35));
  padding:clamp(5rem,10vw,8rem) clamp(1.4rem,5vw,3rem);
  overflow:hidden;
}
.menu__head{ max-width:var(--maxw); margin:0 auto 3rem; text-align:center; }
.menu__list{
  max-width:720px; margin:0 auto; padding:0; list-style:none;
}
.menu__list li{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.05rem 0;
  border-bottom:1px dashed rgba(154,91,86,.4);
}
.menu__list li span:first-child{
  font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--cocoa);
  white-space:nowrap;
}
.menu__list li i{
  flex:1; border-bottom:1px dotted rgba(110,74,66,.4); transform:translateY(-4px);
}
.menu__list li span:last-child{
  font-family:var(--serif); font-style:italic; color:var(--sage-deep); font-size:1.08rem;
  text-align:right; white-space:nowrap;
}
.menu__note{
  max-width:560px; margin:2.6rem auto 0; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:1.18rem; color:var(--cocoa);
}
.sprig--menu{
  top:-1rem; left:-4rem; width:clamp(160px,20vw,280px); height:auto;
  transform:rotate(-10deg);
  animation:sway3 8s ease-in-out infinite alternate;
  opacity:.9;
}

/* ============================================================
   TO-GO
   ============================================================ */
.togo{
  width:min(1060px, calc(100% - 2.5rem));
  margin:clamp(2.5rem,6vw,5rem) auto;
  padding:clamp(2.2rem,4.5vw,3.6rem);
  display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:clamp(2rem,4vw,3.6rem);
  align-items:center;
  background:
    radial-gradient(500px 340px at 12% 15%, rgba(231,166,172,.16), transparent 60%),
    linear-gradient(155deg, rgba(255,255,255,.6), rgba(239,216,209,.45));
  border:1px solid rgba(200,138,134,.22);
  border-radius:28px;
  box-shadow:0 34px 64px -44px rgba(92,59,52,.45);
}
.togo__art{ display:flex; justify-content:center; }
.togo__art img{
  width:min(340px,100%); height:auto; border-radius:16px;
  box-shadow:0 22px 44px -22px rgba(92,59,52,.55);
  border:1px solid rgba(200,138,134,.3);
}
.togo__copy p{ font-size:1.1rem; color:var(--ink); }
.togo__flavors{
  list-style:none; padding:0; margin:1.5rem 0 1.2rem;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.togo__flavors li{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cocoa); background:rgba(255,255,255,.7);
  border:1px solid rgba(200,138,134,.4); border-radius:30px;
  padding:.5em 1.1em;
}
.togo__tagline{
  font-family:var(--serif); font-style:italic; color:var(--sage-deep); font-size:1.15rem; margin:0 0 1.4rem;
}
.togo__foot{
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
}
.togo__price{
  font-family:var(--serif); font-style:italic; color:var(--rose-text); font-size:1.15rem; margin:0;
}
.togo__price span{
  font-style:normal; font-weight:600; font-size:1.9rem; color:var(--cocoa); margin-right:.15em;
}
.togo__cta{ margin:0; background:var(--cocoa); border-color:var(--cocoa); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background:
    radial-gradient(800px 500px at 15% 110%, rgba(100,112,82,.22), transparent 60%),
    linear-gradient(160deg, #7a4a43, #46292a 92%);
  background-color:#46292a;
  color:var(--contact-fg);
  padding:clamp(5rem,10vw,8rem) clamp(1.4rem,5vw,3rem);
}
.contact__inner{ max-width:760px; margin:0 auto; text-align:center; }
.contact .script{
  font-family:var(--script);
  font-size:clamp(2.8rem,7vw,4.6rem);
  color:#fff; font-weight:400; line-height:1;
  margin:0 0 1.2rem;
}
.contact__lede{ color:var(--contact-fg); font-size:1.1rem; margin-bottom:2.6rem; }

.contact__form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem;
  text-align:left; margin-bottom:3rem;
}
.field{ display:flex; flex-direction:column; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.28em;
  color:var(--contact-fg); margin-bottom:.5rem;
}
.field input, .field textarea{
  font-family:var(--sans); font-size:1rem; color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(246,231,227,.4);
  border-radius:12px;
  padding:.85em 1em;
  transition:border-color .3s, background .3s;
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--azalea); background:rgba(255,255,255,.16);
}
.field input:focus-visible, .field textarea:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:#ffb4bb; background:rgba(255,120,130,.14);
}
.contact__form .btn--solid{ grid-column:1 / -1; justify-self:center; background:var(--cream); color:var(--cocoa); border-color:var(--cream); }
.contact__form .btn--solid:hover{ background:#fff; border-color:#fff; color:var(--cocoa); letter-spacing:.32em; }
.contact__status{ grid-column:1/-1; text-align:center; min-height:1.2em; margin:0; font-size:.95rem; color:#ffe9ea; }

.contact__direct{ border-top:1px solid rgba(246,231,227,.3); padding-top:2.4rem; }
.contact__direct > p{ text-transform:uppercase; letter-spacing:.3em; font-size:.7rem; color:var(--contact-fg); }
.contact__lines{ display:flex; flex-direction:column; gap:.35rem; margin:.6rem 0 1.2rem; }
.contact__lines a{
  font-family:var(--serif); font-size:1.4rem; color:#fff; text-decoration:none;
  transition:color .3s;
}
.contact__lines a:hover{ color:var(--azalea); }
.contact__owner{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--contact-fg); margin:0; }
.contact__owner span{ color:var(--contact-fg); opacity:.8; font-style:normal; letter-spacing:.15em; font-size:.9rem; text-transform:uppercase; }
.social{ display:flex; justify-content:center; gap:1.6rem; margin-top:1.6rem; }
.social a{
  color:var(--contact-fg); text-decoration:none; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.2em; padding-bottom:2px;
  border-bottom:1px solid transparent; transition:all .3s;
}
.social a:hover{ color:#fff; border-color:var(--azalea); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  text-align:center; padding:4rem 1.4rem 3rem; position:relative; overflow:hidden;
}
.foot__sprig{ width:120px; height:auto; margin:0 auto 1.2rem; opacity:.85; }
.foot__word{ font-family:var(--wordmark); text-transform:uppercase; letter-spacing:.2em; font-size:1.1rem; color:var(--cocoa); margin:0; }
.foot__tag{ font-family:var(--serif); font-style:italic; color:var(--rose-text); margin:.4rem 0 1rem; }
.foot__fine{ font-size:.72rem; letter-spacing:.1em; color:var(--cocoa-soft); opacity:.85; margin:0; }

/* ============================================================
   petal field (falling petals live here)
   ============================================================ */
.petal-field{
  position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden;
}
.petal{
  position:absolute; top:-40px;
  width:22px; height:24px;
  will-change:transform, opacity;
  animation:fall linear forwards;
}
@keyframes fall{
  0%{ opacity:0; transform:translateY(-10px) translateX(0) rotate(0deg) scale(.9); }
  8%{ opacity:1; }
  100%{ opacity:0; transform:translateY(102vh) translateX(var(--drift,40px)) rotate(var(--spin,320deg)) scale(1); }
}

/* ============================================================
   reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .nav__toggle{ display:flex; }
  .nav__links{
    flex-basis:100%;
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
  }
  .nav.open .nav__links{ max-height:60vh; opacity:1; margin-top:.9rem; }
  .nav__links a{ padding:.7rem; font-size:.9rem; }
  .nav__cta{ margin-top:.4rem; }

  .story{ grid-template-columns:1fr; text-align:center; }
  .story__art{ order:-1; }
  .togo{ grid-template-columns:1fr; text-align:center; }
  .togo__art{ order:-1; }
  .togo__flavors{ justify-content:center; }
  .togo__foot{ justify-content:center; }
  .cards{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .contact__form{ grid-template-columns:1fr; }
  .menu__list li span:first-child{ font-size:1.3rem; }
  .menu__list li span:last-child{ font-size:.98rem; }
  .sprig--menu{ left:-6rem; opacity:.6; }
}
@media (max-width:640px) and (max-height:640px){
  .hero{ align-items:flex-start; padding-top:6rem; }
}
@media (max-width:520px){
  .menu__list li{ flex-wrap:wrap; gap:.15rem .5rem; padding:.9rem 0; }
  .menu__list li i{ flex:1 1 40px; min-width:24px; }
  .menu__list li span:last-child{ text-align:left; width:100%; margin-top:.15rem; opacity:.9; }
  .sprig--tl{ width:150px; top:-1rem; left:-2.5rem; }
  .sprig--br{ width:160px; }
  .sprig--menu{ display:none; }
  .field label{ letter-spacing:.18em; }
  .social a{ display:inline-block; padding:.5rem .3rem; }
  .contact__lines a{ display:inline-block; padding:.2rem 0; }
}
@media (max-width:380px){
  .hero__word{ font-size:clamp(3rem, 15vw, 10rem); letter-spacing:.03em; }
  .foot__word{ letter-spacing:.12em; }
}

/* ============================================================
   reduced motion — calm everything, keep it elegant
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .hero__shimmer, .sprig, .story__art img, .hero__hint{ animation:none!important; }
  .reveal{ opacity:1; transform:none; }
  .petal-field{ display:none; }
}