/* ==========================================================================
   SIP SLOW — Lisson Grove, London
   Palette drawn from the shop itself: cream cups, roast-brown logo ink,
   the pink-dipped cup base, marigold walls, red crate counters.
   ========================================================================== */

:root{
  --sand:       #F4EDE2;   /* background — the cup, the menu board       */
  --sand-deep:  #EAE0CD;   /* panels, table rows                          */
  --roast:      #382418;   /* ink — the logo brown                        */
  --roast-soft: #6B4E38;   /* secondary text                              */
  --dip:        #E0A99C;   /* dusty pink — the dipped base of the cup     */
  --dip-soft:   #F1D4CB;
  --marigold:   #EFA53C;   /* the shop's yellow walls                     */
  --crate:      #742A15;   /* the logo's dark red ink — sampled from the cups */
  --matcha:     #9FAF7E;

  --display: "Fraunces", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1160px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow: 0 18px 40px -18px rgba(56,36,24,.28);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--sand);
  color:var(--roast);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; line-height:1.08; }
p{ margin:0 0 .9em; }
address{ font-style:normal; }
button{ font-family:inherit; }

:focus-visible{
  outline:3px solid var(--marigold);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--roast); color:var(--sand);
  padding:.6rem 1rem; z-index:200; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

/* ---------- Utilities ---------- */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2rem);
}
.section{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }
.eyebrow{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--crate);
  margin-bottom:.9rem;
}
.section-title{
  font-size:clamp(2rem, 4.6vw, 3.2rem);
  letter-spacing:-.01em;
  margin-bottom:1rem;
}
.section-sub{
  color:var(--roast-soft);
  max-width:46ch;
  margin-bottom:2rem;
}

.btn{
  display:inline-block;
  padding:.85rem 1.7rem;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border:2px solid var(--roast);
  transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--marigold);
  border-color:var(--marigold);
  color:var(--roast);
  box-shadow:0 10px 24px -12px rgba(239,165,60,.8);
}
.btn-primary:hover{ background:var(--roast); border-color:var(--roast); color:var(--sand); }
.btn-ghost{ background:transparent; color:var(--roast); }
.btn-ghost:hover{ background:var(--roast); color:var(--sand); }

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  background:var(--sand);
  transition:box-shadow .3s;
}
.nav.scrolled{
  box-shadow:0 1px 0 rgba(56,36,24,.12), 0 8px 24px -18px rgba(56,36,24,.4);
}
.nav-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:.9rem clamp(1.1rem, 4vw, 2rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-logo{
  display:flex; align-items:center; gap:.45rem;
  text-decoration:none;
  font-family:var(--display);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.06em;
}
.logo-glass{ width:17px; height:23px; color:var(--crate); }
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a{
  text-decoration:none;
  font-size:.95rem;
  font-weight:500;
  position:relative;
}
.nav-links a:not(.nav-cta)::after{
  content:"";
  position:absolute; left:0; bottom:-5px;
  width:100%; height:2px;
  background:var(--crate);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-cta{
  background:var(--roast);
  color:var(--sand);
  padding:.55rem 1.2rem;
  border-radius:999px;
  transition:background .25s;
}
.nav-cta:hover{ background:var(--crate); }
.nav-ig{
  display:inline-flex; align-items:center;
  color:var(--roast);
  transition:color .25s, transform .25s var(--ease);
}
.nav-ig svg{ width:21px; height:21px; }
.nav-ig:hover{ color:var(--crate); transform:translateY(-1px); }
.nav-ig::after{ display:none; }

.nav-burger{
  display:none;
  background:none; border:0; cursor:pointer;
  width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:7px;
}
.nav-burger span{
  width:26px; height:2.5px;
  background:var(--roast);
  border-radius:2px;
  transition:transform .3s var(--ease);
}
.nav-burger[aria-expanded="true"] span:first-child{ transform:translateY(4.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.75px) rotate(-45deg); }

/* ---------- Hero (full-bleed video) ---------- */
.hero-full{
  position:relative;
  margin-top:64px;                 /* clears the fixed nav bar */
  height:min(88vh, 820px);
  min-height:520px;
  overflow:hidden;
  background:var(--roast);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(30,17,10,.66) 0%, rgba(30,17,10,.2) 42%, rgba(30,17,10,0) 68%),
    linear-gradient(to right, rgba(30,17,10,.22), rgba(30,17,10,0) 55%);
  pointer-events:none;
}
.hero-content{
  position:absolute;
  inset:auto 0 clamp(2.2rem, 7vh, 4.5rem) 0;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2rem);
  color:#fff;
}
.hero-kicker{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(244,237,226,.92);
  margin-bottom:.8rem;
}
.hero-headline{
  font-size:clamp(2.7rem, 6.5vw, 4.8rem);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:.7rem;
  text-shadow:0 2px 22px rgba(0,0,0,.35);
}
.hero-line{
  font-size:clamp(1rem, 1.5vw, 1.15rem);
  color:rgba(255,255,255,.92);
  max-width:56ch;
  margin-bottom:1.6rem;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.hero-ctas{ display:flex; gap:.9rem; flex-wrap:wrap; }
.btn-light{
  background:#fff;
  border-color:#fff;
  color:var(--roast);
}
.btn-light:hover{ background:transparent; color:#fff; }

/* ---------- Hourglass (hours section) ---------- */
.hourglass{ display:block; height:auto; }
.hours-glass{ width:54px; color:var(--crate); margin-bottom:1rem; }

/* The signature: sand drains, then the glass flips over. */
@keyframes hg-flip{
  0%, 88%{ transform:rotate(0deg); }
  100%{ transform:rotate(180deg); }
}
@keyframes hg-drain{
  0%{ transform:scaleY(1); }
  82%, 100%{ transform:scaleY(.1); }
}
@keyframes hg-pile{
  0%{ transform:scaleY(.15); }
  82%, 100%{ transform:scaleY(1); }
}
@keyframes hg-trickle{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:-64; }
}
.hourglass{ animation:hg-flip 7s var(--ease) infinite; }
.hg-sand-top{ transform-origin:45px 26px; animation:hg-drain 7s linear infinite; }
.hg-sand-bottom{ transform-origin:45px 104px; animation:hg-pile 7s linear infinite; }
.hg-stream{ animation:hg-trickle 1.4s linear infinite; }

/* ---------- Marquee ---------- */
.marquee{
  background:var(--roast);
  color:var(--sand);
  overflow:hidden;
  padding:.85rem 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 26s linear infinite;
}
.marquee-track span{
  font-family:var(--display);
  font-style:italic;
  font-size:1.05rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  padding-right:.5rem;
}
@keyframes marquee{
  to{ transform:translateX(-50%); }
}

/* ---------- Ritual ---------- */
.ritual-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 3vw, 2rem);
  margin-top:2.2rem;
}
.ritual-card h3{
  font-size:1.35rem;
  margin:1.1rem 0 .5rem;
}
.ritual-card p{ color:var(--roast-soft); font-size:.97rem; }
.ritual-media{
  border-radius:var(--r-md);
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow);
}
.ritual-media video{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.ritual-card:hover .ritual-media video{ transform:scale(1.045); }
.ritual-media::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:26%;
  background:linear-gradient(to top, rgba(224,169,156,.45), rgba(224,169,156,0));
  pointer-events:none;
}

/* ---------- Menu ---------- */
.menu{ background:var(--sand-deep); }
.menu-tabs{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin:2rem 0 1.8rem;
}
.menu-tab{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.25rem;
  border-radius:999px;
  border:1.5px solid rgba(56,36,24,.3);
  background:transparent;
  color:var(--roast);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.05em;
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.menu-tab .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--tab-dot, var(--roast));
}
.menu-tab:hover{ transform:translateY(-2px); border-color:var(--roast); }
.menu-tab[aria-selected="true"]{
  background:var(--roast);
  border-color:var(--roast);
  color:var(--sand);
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(1.6rem, 3.5vw, 2.8rem) clamp(1rem, 2.4vw, 1.6rem);
}
/* flat cutout presentation — cup on the page, name + price beneath */
.menu-item{
  text-align:center;
  opacity:0;
  animation:card-pop .55s var(--ease) forwards;
  animation-delay:calc(var(--i) * 70ms);
}
@keyframes card-pop{
  from{ opacity:0; transform:translateY(26px) scale(.96); }
  to{ opacity:1; transform:none; }
}
.menu-item-img{
  height:clamp(160px, 20vw, 240px);
  width:auto;
  max-width:100%;
  margin-inline:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 16px rgba(56,36,24,.22));
}
.menu-item-name{
  font-family:var(--body);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:1.1rem;
}
.menu-item-price{
  font-weight:600;
  font-size:.95rem;
  color:var(--crate);
  margin:.25rem 0 0;
}
.menu-item-note{
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--roast-soft);
  margin:.3rem 0 0;
}

/* shots panel — simple add-on list, no photos */
.shots-intro{ color:var(--roast-soft); margin-bottom:2rem; max-width:52ch; }
.shots-row{
  display:flex; flex-wrap:wrap;
  gap:2rem clamp(2.5rem, 6vw, 5rem);
}
.shot-item{
  opacity:0;
  animation:card-pop .55s var(--ease) forwards;
  animation-delay:calc(var(--i) * 90ms);
}
.shot-item .menu-item-name{ margin-top:0; }

.menu-note{
  display:flex; align-items:center; gap:.9rem;
  margin-top:2.4rem;
  color:var(--roast-soft);
  font-size:.95rem;
}
.menu-note p{ margin:0; }
.note-glass{ width:16px; height:22px; color:var(--crate); flex:none; }

/* ---------- Our space ---------- */
.space-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:start;
  gap:clamp(1.2rem, 2.6vw, 1.8rem);
  margin-top:2.2rem;
}
.space-item{ margin:0; }
.space-item.wide{ grid-column:span 2; }
.space-item img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease);
}
.space-item:hover img{ transform:scale(1.02); }
.space-item figcaption{
  margin-top:.6rem;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--roast-soft);
}

/* ---------- Social / let's connect ---------- */
.social-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem 2.5rem;
  flex-wrap:wrap;
  margin-bottom:2.2rem;
}
.social .section-title{ margin-bottom:.5rem; }
.social-line{ color:var(--roast-soft); margin:0; max-width:52ch; }
.social-line a{ color:var(--crate); text-decoration-color:var(--crate); }
.social-btn{ flex:none; }

.social-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
}
.social-tile{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--r-sm);
  background:var(--sand-deep);
}
.social-tile img,
.social-tile video{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.social-tile:hover img,
.social-tile:hover video{ transform:scale(1.06); }
.social-tile::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(56,36,24,0);
  transition:background .3s;
}
.social-tile:hover::after{ background:rgba(56,36,24,.18); }
.tile-icon{
  position:absolute; top:10px; right:10px;
  width:20px; height:20px;
  color:#fff;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));
  z-index:2;
}

/* ---------- Hours ---------- */
.hours-inner{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.hours-copy p{ color:var(--roast-soft); }
.open-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700;
  font-size:.95rem;
  padding:.6rem 1.2rem;
  border-radius:999px;
  background:var(--sand-deep);
  margin-top:.6rem;
}
.open-badge::before{
  content:"";
  width:10px; height:10px; border-radius:50%;
  background:var(--badge-dot, var(--matcha));
}
.open-badge.closed{ --badge-dot: var(--crate); }

.hours-table{
  background:var(--sand-deep);
  border-radius:var(--r-lg);
  padding:1.3rem 1.6rem;
  box-shadow:var(--shadow);
}
.hours-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:.72rem .6rem;
  border-radius:var(--r-sm);
  font-size:1rem;
}
.hours-row + .hours-row{ border-top:1px solid rgba(56,36,24,.1); }
.hours-row .day{ font-weight:500; }
.hours-row .time{ font-variant-numeric:tabular-nums; color:var(--roast-soft); }
.hours-row.today{
  background:var(--sand);
  box-shadow:inset 4px 0 0 var(--marigold);
  font-weight:700;
}
.hours-row.today .time{ color:var(--roast); font-weight:700; }

/* ---------- Find us ---------- */
.find{ background:var(--sand-deep); }
.find-inner{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:stretch;
}
.find-card{
  background:var(--sand);
  border-radius:var(--r-lg);
  padding:clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:flex-start;
}
.find-card address{
  font-family:var(--display);
  font-size:1.35rem;
  line-height:1.35;
  margin-bottom:1rem;
}
.find-hint{ color:var(--roast-soft); font-size:.95rem; margin-bottom:1.6rem; }
.find-map{
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height:400px;
}
.find-map iframe{
  width:100%; height:100%; min-height:400px;
  border:0; display:block;
}

/* ---------- Reviews ---------- */
.reviews-sub{ color:var(--roast-soft); margin-bottom:2.2rem; }
.reviews-score{
  font-family:var(--display);
  font-weight:700;
  font-size:1.5rem;
  color:var(--roast);
  margin-right:.35rem;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1rem, 2.4vw, 1.5rem);
  align-items:start;
}
.review-card{
  background:var(--sand-deep);
  border-radius:var(--r-md);
  padding:1.5rem 1.6rem;
}
.review-head{
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:.9rem;
}
.review-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--dip-soft);
  color:var(--crate);
  font-family:var(--display);
  font-weight:700;
  font-size:1.15rem;
  display:inline-flex; align-items:center; justify-content:center;
  flex:none;
}
.review-name{ font-weight:700; margin:0; }
.review-date{ font-size:.8rem; color:var(--roast-soft); margin:0; }
.review-stars{ display:flex; gap:3px; color:var(--marigold); margin-bottom:.7rem; }
.review-stars svg{ width:16px; height:16px; }
.review-text{ margin:0; color:var(--roast-soft); font-size:.96rem; }

/* ---------- Footer ---------- */
.footer{
  background:var(--roast);
  color:var(--sand);
  padding-top:clamp(3rem, 6vw, 4.5rem);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2rem;
  padding-bottom:2.5rem;
}
.footer-logo{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--display);
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:.06em;
  margin-bottom:.4rem;
}
.footer-logo svg{ width:16px; height:22px; color:var(--sand); }
.footer-tag{ color:rgba(244,237,226,.65); font-size:.92rem; }
.footer-col h4{
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dip);
  margin-bottom:.7rem;
}
.footer-col p{ color:rgba(244,237,226,.85); font-size:.95rem; }
.footer-col a{ color:inherit; }
.footer-base{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:1.4rem;
  border-top:1px solid rgba(244,237,226,.15);
  font-size:.85rem;
  color:rgba(244,237,226,.6);
}
.footer-base p{ margin:0; }
.to-top{
  background:var(--marigold);
  color:var(--roast);
  border:0;
  width:42px; height:42px;
  border-radius:50%;
  font-size:1.1rem;
  cursor:pointer;
  transition:transform .3s var(--ease);
}
.to-top:hover{ transform:translateY(-4px); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .ritual-grid{ grid-template-columns:1fr 1fr; }
  .menu-grid{ grid-template-columns:repeat(3, 1fr); }
  .social-grid{ grid-template-columns:repeat(3, 1fr); }
  .reviews-grid{ grid-template-columns:1fr 1fr; }
  .hours-inner, .find-inner{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .nav-links{
    position:fixed;
    inset:0;
    background:var(--sand);
    flex-direction:column;
    justify-content:center;
    gap:2rem;
    font-size:1.3rem;
    transform:translateY(-100%);
    transition:transform .45s var(--ease);
    z-index:-1;
  }
  .nav-links.open{ transform:none; }
  .nav-burger{ display:flex; }
  .ritual-grid{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:repeat(2, 1fr); }
  .space-grid{ grid-template-columns:1fr; }
  .space-item.wide{ grid-column:auto; }
  .br-desk{ display:none; }
}

@media (max-width: 480px){
  .menu-grid{ grid-template-columns:1fr 1fr; gap:1.6rem .8rem; }
  .menu-item-name{ font-size:.82rem; }
  .social-grid{ grid-template-columns:1fr 1fr; gap:7px; }
  .reviews-grid{ grid-template-columns:1fr; }
  .hero-full{ min-height:460px; height:78vh; }
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track,
  .hourglass,
  .hg-sand-top, .hg-sand-bottom, .hg-stream{ animation:none; }
  .menu-item, .shot-item{ opacity:1; animation:none; }
  *{ transition-duration:.01ms !important; }
}