/* ==========================================================================
   HEYDAY MIAMI — design system
   Display: Fraunces (warm, editorial serif, used large + tight)
   Body:    Inter
   Utility: IBM Plex Mono (eyebrows, hours, prices — ticket/menu feel)
   Palette:
     --ink     #1B1512  near-black espresso (dark sections, text on paper)
     --paper   #F1ECDE  warm parchment (day / content bg)
     --paper-2 #E8DFC9  deeper parchment (cards)
     --amber   #C68A3D  coffee / daytime accent
     --wine    #8C4552  bar / nighttime accent
     --cream   #F6F1E4  text on dark bg
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#1B1512;
  --paper:#F1ECDE;
  --paper-2:#E8DFC9;
  --amber:#C68A3D;
  --wine:#8C4552;
  --cream:#F6F1E4;
  --line: rgba(27,21,18,.14);
  --line-on-dark: rgba(246,241,228,.18);
  --serif: 'Fraunces', serif;
  --sans: 'Inter', sans-serif;
  --mono: 'Inter', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;line-height:1.05;letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--wine);
}
.eyebrow.on-dark{color:var(--amber);}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.solid{
  background:rgba(241,236,222,.92);
  backdrop-filter:blur(8px);
  padding:14px 0;
  border-color:var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo img{height:80px;width:auto;}
.logo{font-family:var(--serif);font-size:22px;letter-spacing:.02em;}
nav.primary ul{display:flex;gap:34px;align-items:center;}
nav.primary a{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid transparent;
}
nav.primary a:hover, nav.primary a.active{border-color:currentColor;}
.header-social{display:flex;gap:14px;align-items:center;margin-top: 10px;}
.header-social a{opacity:.8;}
.header-social a:hover{opacity:1;}
.header-social svg{width:25px;height:25px;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}
.menu-toggle svg{width:24px;height:24px;color: #fff;}

body.dark-nav .site-header:not(.solid) .logo,
body.dark-nav .site-header:not(.solid) nav.primary a,
body.dark-nav .site-header:not(.solid) .header-social{color:var(--cream);}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,rgba(27,21,18,.05),rgba(27,21,18,.25)),var(--hero-img) center/cover no-repeat;
  color:var(--cream);padding:160px 0 72px;
}
.hero-inner{max-width:720px;}
.hero .eyebrow{color:var(--amber);margin-bottom:18px;}
.hero h1{font-size:clamp(40px,6vw,74px);}
.hero p.lede{font-size:18px;max-width:100%;margin-top:20px;color:rgba(246,241,228,.86);}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 26px;border-radius:2px;display:inline-block;border:1px solid currentColor;
  transition:background .2s ease,color .2s ease;
}
.btn-solid{background:var(--amber);border-color:var(--amber);color:var(--ink);}
.btn-solid:hover{background:var(--cream);border-color:var(--cream);}
.btn-ghost{color:var(--cream);}
.btn-ghost:hover{background:var(--cream);color:var(--ink);}
.btn-dark{color:var(--ink);border-color:var(--ink);}
.btn-dark:hover{background:var(--ink);color:var(--cream);}
.hero-meta{margin-top:44px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:rgba(246,241,228,.7);}

/* small page hero (interior pages) */
.hero.small{min-height:56vh;padding:150px 0 56px;}

/* ---------- day arc (signature element) ---------- */
.day-arc{background:var(--ink);color:var(--cream);padding:64px 0;}
.day-arc-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:36px;}
.day-arc-head h2{font-size:clamp(26px,3vw,36px);color:var(--cream);max-width:520px;}
.arc-track{position:relative;height:2px;background:var(--line-on-dark);margin:0 0 40px;}
.arc-track::before{
  content:'';position:absolute;left:0;top:-1px;height:4px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--amber) 0%,var(--amber) 35%,var(--wine) 65%,var(--wine) 100%);
}
.arc-stops{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.arc-stop{border-top:1px solid var(--line-on-dark);padding-top:20px;}
.arc-stop .time{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);}
.arc-stop.pm .time, .arc-stop.night .time{color:var(--wine);}
.arc-stop h3{font-size:22px;margin:10px 0 8px;color:var(--cream);}
.arc-stop p{font-size:14px;color:rgba(246,241,228,.72);margin-bottom:14px;}
.arc-stop a.link{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;}

/* ---------- generic sections ---------- */
.section{padding:96px 0;}
.section.tight{padding:64px 0;}
.section.paper-2{background:var(--paper-2);}
.section.dark{background:var(--ink);color:var(--cream);}
.section.dark .eyebrow{color:var(--amber);}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split .copy h2{font-size:clamp(28px,3.4vw,42px);margin:14px 0 20px;}
.split .copy p{color:rgba(27,21,18,.78);margin-bottom:14px;max-width:46ch;}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}
.section.dark .split .copy p{color:rgba(246,241,228,.78);}
.frame{overflow:hidden;border-radius:2px;}
.frame img{width:100%;height:100%;object-fit:cover;}

.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(28px,3.6vw,44px);margin-top:14px;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

hr.rule{border:none;border-top:1px solid var(--line);margin:0;}
.divider-img{max-width:220px;margin:36px auto;opacity:.55;}

/* ---------- menu lists ---------- */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.menu-list{margin-top:24px;}
.menu-row{
  display:flex;justify-content:space-between;gap:16px;padding:14px 0;
  border-bottom:1px dashed var(--line);font-size:16px;
}
.menu-row .name{font-family:var(--serif);font-size:19px;}
.menu-row .price{font-family:var(--mono);font-size:14px;color:var(--wine);white-space:nowrap;margin-top: 7px;}
.menu-row .desc{display:block;font-family:var(--sans);font-size:13.5px;color:rgba(27,21,18,.62);}
.inlop{display: inline !important; margin-left: 10px;}
.menu-group-title{font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:36px 0 4px;}
.menu-group-title:first-child{margin-top:0;}

/* ---------- tabs (bar page) ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:40px;flex-wrap:wrap;}
.tab-btn{
  font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;
  padding:14px 12px;border:none;background:none;cursor:pointer;color:rgba(27,21,18,.5);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab-btn.active{color:var(--ink);border-color:var(--wine);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.drink-card{background:var(--paper);border:1px solid var(--line);padding:26px 22px;border-radius:2px;}
.drink-card h4{font-size:19px;margin-bottom:8px;}
.drink-card p{font-size:13.5px;color:rgba(27,21,18,.66);}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery.tall .g-item:nth-child(3n+1){grid-row:auto;}
.g-item{overflow:hidden;border-radius:2px;}
.g-item img{width:100%;height:100%;object-fit:cover;}

/* ---------- visit / map ---------- */
.visit-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:0;}
.visit-info{padding:80px 60px;background:var(--ink);color:var(--cream);}
.visit-info h2{color:var(--cream);font-size:clamp(26px,3vw,36px);margin-bottom:26px;}
.hours-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line-on-dark);padding:14px 0;font-size:15px;}
.hours-row span:last-child{font-family:var(--mono);font-size:13px;color:var(--amber);}
.visit-info .contact-line{margin-top:28px;font-size:15px;}
.visit-info .contact-line a{border-bottom:1px solid rgba(246,241,228,.4);}
.map-embed iframe{width:100%;height:100%;min-height:460px;border:0;filter:grayscale(.35) contrast(1.05);}

/* ---------- form ---------- */
.rsvp-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px;}
.rsvp-form .full{grid-column:1 / -1;}
.rsvp-form label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:8px;color:rgba(27,21,18,.6);}
.rsvp-form input,.rsvp-form textarea{
  width:100%;border:1px solid var(--line);background:var(--paper);padding:13px 14px;font-family:var(--sans);font-size:15px;
  border-radius:2px;
}
.rsvp-form input:focus,.rsvp-form textarea:focus{outline:2px solid var(--wine);outline-offset:1px;}
.rsvp-form button{margin-top:6px;}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(246,241,228,.85);padding:80px 0 30px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line-on-dark);}
.footer-brand img{height:44px;margin-bottom:18px;}
.footer-brand p{font-size:14px;color:rgba(246,241,228,.6);max-width:30ch;}
.footer-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:16px;}
.footer-col li{margin-bottom:10px;font-size:14px;}
.footer-col a:hover{color:var(--amber);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;color:rgba(246,241,228,.5);flex-wrap:wrap;gap:14px;}
.footer-social{display:flex;gap:16px;}
.footer-social svg{width:16px;height:16px;}

/* ---------- misc pages ---------- */
.bio-block{max-width:760px;margin:0 auto 56px;text-align:center;}
.bio-block h2{font-size:clamp(26px,3.4vw,38px);margin:14px 0 18px;}
.bio-block p{color:rgba(27,21,18,.75);}
.artist-links{display:flex;gap:18px;justify-content:center;margin-top:18px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;}
.artist-links a{border-bottom:1px solid var(--wine);}

.poster-frame{max-width:640px;margin:0 auto;border:10px solid var(--paper-2);box-shadow:0 30px 60px rgba(27,21,18,.15);}

@media (max-width: 880px){
  nav.primary, .header-social{display:none;}
  .menu-toggle{display:block;}
  .split, .visit-grid{grid-template-columns:1fr;}
  .split.reverse{direction:ltr;}
  .arc-stops{grid-template-columns:1fr 1fr;}
  .menu-grid{grid-template-columns:1fr;gap:36px;}
  .card-grid{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .visit-info{padding:56px 28px;}
  .rsvp-form{grid-template-columns:1fr;}
  .hours-row span {
    width: 50%;
}
}
@media (max-width: 540px){
  .card-grid,.gallery{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
}

/* mobile nav drawer */
.mobile-nav{
  position:fixed;inset:0;background:var(--ink);color:var(--cream);z-index:200;
  display:flex;flex-direction:column;justify-content:center;gap:26px;padding:40px;
  transform:translateY(-100%);transition:transform .35s ease;
}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{font-family:var(--serif);font-size:32px;}
.mobile-nav .close-btn{position:absolute;top:26px;right:26px;background:none;border:none;color:var(--cream);cursor:pointer;}
.mobile-nav .close-btn svg{width:26px;height:26px;}

header.solid a.logo img {
    filter: brightness(0);
}
/* Add-ons variant: lay the same .menu-row markup out as a 3-up horizontal
   row instead of a stacked list. Scoped to .menu-list.addons-row only,
   so the default stacked .menu-list style elsewhere is untouched. */
.menu-list.addons-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 40px;
  margin-top:24px;
}
.menu-list.addons-row .menu-row{
  padding:0 0 10px;
  border-bottom:1px dashed var(--line);
}
@media (max-width: 540px){
  .menu-list.addons-row{grid-template-columns:1fr;}
}
.addons-block{
  grid-column: 1 / -1;
}
.addtext{padding-top:100px;}



/* ---------- cocktail cards (Bar page) ---------- */
.cocktail-subhead{margin-top:56px;}
.cocktail-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:24px;
}
.cocktail-card{
  --card-bg:#203714;
  --card-accent:#f8cab0;
  background:var(--card-bg);
  border-radius:4px;overflow:hidden;
  box-shadow:0 18px 40px rgba(27,21,18,.18);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;flex-direction:column;
}
.cocktail-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 54px rgba(27,21,18,.26);
}
.cocktail-card .photo{height:230px;overflow:hidden;flex-shrink:0;}
.cocktail-card .photo img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;
}
.cocktail-card:hover .photo img{transform:scale(1.06);}
.cocktail-card .info{
  flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:28px 26px 30px;color:var(--cream);
}
.cocktail-card h3{
  font-size:21px;letter-spacing:.05em;text-transform:uppercase;color:var(--cream);
}
.cocktail-card .tags{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--card-accent);margin-top:12px;
}
.cocktail-card .divider{
  width:34px;height:1px;background:var(--card-accent);opacity:.75;margin:18px auto;
}
.cocktail-card ul{margin:0;}
.cocktail-card li{
  font-family:var(--sans);font-size:13.5px;line-height:1.8;color:rgba(246,241,228,.78);
}
.cocktail-card .price{
  font-family:var(--mono);font-size:19px;color:var(--card-accent);
  margin-top:auto;padding-top:20px;letter-spacing:.02em;
}
@media (max-width: 980px){
  .cocktail-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 620px){
  .cocktail-grid{grid-template-columns:1fr;}
}

/* ---------- masonry gallery + lightbox (Space page) ---------- */
.masonry{
  column-count:3;column-gap:18px;
}
.masonry .m-item{
  break-inside:avoid;margin-bottom:18px;border-radius:2px;overflow:hidden;
  cursor:zoom-in;position:relative;
}
.masonry .m-item img{width:100%;display:block;transition:transform .4s ease;}
.masonry .m-item:hover img{transform:scale(1.04);}
.masonry .m-item::after{
  content:'';position:absolute;inset:0;background:rgba(27,21,18,0);transition:background .25s ease;
}
.masonry .m-item:hover::after{background:rgba(27,21,18,.12);}

@media (max-width:900px){ .masonry{column-count:2;} }
@media (max-width:560px){ .masonry{column-count:1;} }

.lightbox{
  position:fixed;inset:0;background:rgba(27,21,18,.92);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:40px;
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox img{max-width:min(90vw,1000px);max-height:86vh;display:block;border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.4);}
.lightbox .lb-close{
  position:absolute;top:26px;right:32px;background:none;border:none;color:var(--cream);cursor:pointer;padding:6px;
}
.lightbox .lb-close svg{width:26px;height:26px;}
.lightbox .lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--cream);cursor:pointer;padding:10px;opacity:.75;
}
.lightbox .lb-nav:hover{opacity:1;}
.lightbox .lb-prev{left:18px;}
.lightbox .lb-next{right:18px;}
.lightbox .lb-nav svg{width:30px;height:30px;}
.lightbox .lb-nav{
  z-index:2;
  padding:14px;
}
/* ---------- contact form status + honeypot ---------- */
.form-status{
  margin-top:16px;font-family:var(--sans);font-size:14px;min-height:20px;
}
.form-status.success{color:#3f6b4a;}
.form-status.error{color:var(--wine);}
.rsvp-form button[disabled]{opacity:.6;cursor:not-allowed;}
.hp-field{position:absolute;left:-9999px;top:-9999px;}
.info ul li {
    text-transform: capitalize !important;
}

/* ---------- mobile image slider (Coffee / Juices photo strip) ---------- */
.gallery-wrap{position:relative;}

.gallery-arrow{
  display:none;
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(27,21,18,.55);color:var(--cream);
  border:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;
}
.gallery-arrow svg{width:20px;height:20px;}
.gallery-arrow:hover{background:rgba(27,21,18,.75);}
.gallery-prev{left:10px;}
.gallery-next{right:10px;}

@media (max-width:700px){
  .gallery-wrap{overflow:hidden;}
  .gallery.gallery-slider{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
  }
  .gallery.gallery-slider::-webkit-scrollbar{display:none;}
  .gallery.gallery-slider .g-item{
    flex:0 0 100%;
    width:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .gallery-arrow{display:flex;}
}

.gallery-dots{
  display:none;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}
.gallery-dot{
  width:7px;height:7px;border-radius:50%;
  border:none;background:var(--line);padding:0;cursor:pointer;
}
.gallery-dot.active{background:var(--wine);}
@media (max-width:700px){
  .gallery-dots{display:flex;}
}
header.site-header.solid button.menu-toggle {
    filter: brightness(0);
}
button.btn.btn-dark {
    background: #f8cab0;
    color: #000;
    cursor: pointer;
}
.form-status.success {
    background: #6f8c37;
    color: #fff;
    padding: 10px 20px;
    border-radius: 2px;
}