/* ── RESET & BASE ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#F8F7F5;color:#111;font-family:'Libre Baskerville',serif;overflow-x:hidden;-webkit-text-size-adjust:100%;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:0 5vw;height:72px;background:rgba(248,247,245,0.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #111;}
.nav-logo{text-decoration:none;color:#111;display:flex;flex-direction:column;}
.nav-roge{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:0.05em;line-height:1;}
.nav-sub{font-size:0.58rem;letter-spacing:0.3em;text-transform:uppercase;color:#888;}
nav ul{list-style:none;display:flex;gap:2rem;}
nav a{text-decoration:none;color:#111;font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;transition:opacity 0.2s;}
nav a:hover{opacity:0.4;}
.nav-book{background:#111;color:#F8F7F5 !important;padding:0.5rem 1.1rem;font-size:0.62rem !important;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;}

/* ── BUTTONS ── */
.btn{display:inline-block;padding:0.85rem 2rem;font-family:'Libre Baskerville',serif;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;text-decoration:none;transition:all 0.2s;cursor:pointer;border:none;}
.btn-dark{background:#111;color:#F8F7F5;}
.btn-dark:hover{opacity:0.75;}
.btn-light{background:transparent;color:#111;border:1px solid #111;}
.btn-light:hover{background:#111;color:#F8F7F5;}

/* ── HERO ── */
#hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #111;padding-top:72px;}
.hero-left{padding:5vw 4vw 5vw 6vw;display:flex;flex-direction:column;justify-content:center;border-right:1px solid #111;}
.hero-roge{font-family:'Bebas Neue',sans-serif;font-size:clamp(6rem,14vw,12rem);line-height:0.85;display:block;}
.hero-brewbar{font-size:1rem;letter-spacing:0.45em;text-transform:uppercase;color:#888;display:block;margin-top:0.6rem;}
.hero-line{width:100%;height:1px;background:#111;margin:2rem 0;}
.hero-slogan{font-family:'IM Fell English',serif;font-style:italic;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.45;margin-bottom:1.4rem;}
.hero-sub{font-size:0.8rem;color:#888;line-height:1.85;margin-bottom:2.5rem;}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-doodles{display:flex;gap:2.5rem;align-items:flex-end;margin-top:2rem;}
.hero-right{position:relative;overflow:hidden;min-height:600px;background:#F8F7F5;}
.d-img{position:absolute;object-fit:contain;}
.d1{width:62%;bottom:0;right:-6%;animation:bob 3s ease-in-out infinite;}
.d2{width:66%;top:0;right:0;animation:bob 3.5s ease-in-out infinite reverse;}
.d3{width:60%;bottom:0;left:0;animation:bob 4s ease-in-out infinite;}
.d4{width:54%;top:10%;left:2%;animation:bob 4.5s ease-in-out infinite;}
.hero-vert{position:absolute;bottom:10%;left:4%;font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:#bbb;writing-mode:vertical-rl;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* ── SHARED ── */
.eyebrow{font-size:0.65rem;letter-spacing:0.25em;text-transform:uppercase;color:#888;margin-bottom:0.8rem;}
.sec-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,5vw,4rem);letter-spacing:0.05em;line-height:1;}
.dk{mix-blend-mode:multiply;display:block;}

/* ── MENU ── */
#menu{padding:6rem 6vw;border-bottom:1px solid #111;}
.menu-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid #111;}
.menu-note{font-family:'IM Fell English',serif;font-style:italic;font-size:0.85rem;color:#888;max-width:260px;text-align:right;line-height:1.6;}

/* STAFF PICKS */
.featured-drinks{padding:3rem 0 5rem;border-top:1px solid #eee;margin-top:3rem;}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.feat-card{padding:1.8rem 1.6rem;border:1px solid #e0e0e0;border-radius:4px;position:relative;transition:box-shadow .25s,transform .25s;}
.feat-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.08);transform:translateY(-3px);}
.feat-star{border-color:#111;background:#FDFCFA;}
.feat-badge{position:absolute;top:-1px;left:1.4rem;background:#111;color:#F8F7F5;font-size:0.55rem;letter-spacing:0.18em;text-transform:uppercase;padding:0.28rem 0.7rem;}
.feat-icon{margin-bottom:1rem;line-height:1;}
.feat-name{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.04em;margin-bottom:0.25rem;}
.feat-price{font-size:0.72rem;font-weight:700;color:#888;letter-spacing:0.08em;margin-bottom:0.8rem;}
.feat-desc{font-size:0.78rem;line-height:1.75;color:#555;}

/* MENU GRID */
.mgrid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #111;margin-top:0;}
.mbox{padding:2.5rem 2rem;border:1px solid #111;margin:-1px 0 0 -1px;}
.mbox-full{grid-column:1/-1;}
.btitle{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:0.08em;margin-bottom:0.2rem;}
.bsub{font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:#888;margin-bottom:1.8rem;}
.srow{display:grid;grid-template-columns:1fr 80px 80px;padding-bottom:0.5rem;margin-bottom:0.3rem;border-bottom:1px solid #E8E6E2;}
.slbl{font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:#888;text-align:right;}
.mi{display:grid;grid-template-columns:1fr 80px 80px;align-items:center;padding:0.75rem 0;border-bottom:1px solid #E8E6E2;}
.mi:last-child{border-bottom:none;}
.mi-basic{display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;border-bottom:1px solid #E8E6E2;}
.iname{font-size:0.9rem;}
.iprice{font-size:0.85rem;text-align:right;}
.ip{font-size:0.85rem;text-align:right;}
.basic-names{font-size:0.9rem;}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem;}
.mcol{display:flex;flex-direction:column;}
.mcol .mbox{flex:1;}
.menu-fav{position:relative;background:#E8E0D4;border-radius:20px;padding:1.2rem 1.4rem;margin-top:2rem;min-height:88px;display:flex;align-items:center;}
.menu-fav-text{font-family:'IM Fell English',serif;font-style:italic;font-size:1.25rem;line-height:1.55;max-width:58%;margin:0;}
.menu-fav-img{position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:108px;height:auto;object-fit:contain;}
.addon-note{font-size:0.6rem;color:#888;margin:0;padding-top:0.35rem;line-height:1.5;}

/* ── GALLERY ── */
#gallery{border-bottom:1px solid #111;}
.gallery-intro{padding:4rem 6vw 2rem;}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,33vw);}
.pitem{overflow:hidden;position:relative;}
.pitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s;}
.pitem:hover img{transform:scale(1.05);}
.pover{position:absolute;bottom:0;left:0;right:0;padding:1rem;background:linear-gradient(transparent,rgba(0,0,0,0.55));opacity:0;transition:opacity 0.3s;}
.pitem:hover .pover{opacity:1;}
.pcap{font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:#fff;}

/* ── ABOUT ── */
#about{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #111;}
.about-text{padding:6rem 5vw 6rem 6vw;border-right:1px solid #111;}
.about-text p{font-size:0.95rem;line-height:1.9;opacity:0.85;margin-bottom:1.4rem;}
.about-visual{padding:6rem 4vw;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;position:relative;overflow:hidden;}
.snum{font-family:'Bebas Neue',sans-serif;font-size:4rem;line-height:1;display:block;text-align:center;}
.slbl2{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:#888;margin-top:0.3rem;text-align:center;}
.sdiv{width:1px;height:30px;background:#E8E6E2;}

/* ── LOCATION ── */
#location{padding:6rem 6vw;border-bottom:1px solid #111;background:#FDFCFA;}
.loc-header{margin-bottom:3.5rem;}
.loc-subhead{font-size:0.88rem;color:#666;margin-top:1rem;max-width:480px;line-height:1.7;}
.loc-body{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;align-items:start;}
.loc-info{display:flex;flex-direction:column;gap:2rem;}
.loc-card{background:#fff;border:1px solid #111;padding:2rem 2rem 1.6rem;border-radius:4px;}
.loc-status{display:flex;align-items:center;gap:0.6rem;margin-bottom:1rem;}
.loc-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:pulse-dot 2s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(1.4);}}
#loc-status-text{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:#22c55e;}
.loc-name{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:0.04em;margin-bottom:0.3rem;}
.loc-address{font-size:0.9rem;color:#444;margin-bottom:0.4rem;line-height:1.55;}
.loc-hours{font-size:0.78rem;color:#888;margin-bottom:0.2rem;}
.loc-schedule{padding:1.5rem 0;}
.loc-srow{display:flex;gap:1rem;padding:0.65rem 0;border-bottom:1px solid #eee;align-items:flex-start;}
.loc-srow:last-child{border-bottom:none;}
.loc-day{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;min-width:72px;color:#111;flex-shrink:0;padding-top:0.1rem;}
.loc-place{font-size:0.8rem;color:#555;line-height:1.5;}
/* MAP: explicit height so Leaflet renders correctly */
.loc-map{border:1px solid #ddd;border-radius:4px;overflow:hidden;height:480px;background:#e8e6e2;}
#roge-map{width:100%;height:100%;display:block;}

/* ── MARKETS ── */
#markets{padding:6rem 6vw;border-bottom:1px solid #111;}
.mktgrid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #111;margin-top:3rem;}
.mkt{padding:2.5rem 2rem;border-right:1px solid #111;}
.mkt:last-child{border-right:none;}
.mkt-num{font-family:'Bebas Neue',sans-serif;font-size:3.5rem;color:#E8E6E2;line-height:1;margin-bottom:0.8rem;}
.mkt-name{font-family:'IM Fell English',serif;font-size:1.2rem;margin-bottom:0.5rem;}
.mkt-detail{font-size:0.78rem;color:#888;line-height:1.7;}
.mkt-tag{display:inline-block;margin-top:1rem;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;border:1px solid #111;padding:0.3rem 0.7rem;}
.mkt-follow{margin-top:2.5rem;text-align:center;font-family:'IM Fell English',serif;font-style:italic;font-size:1rem;color:#888;}
.mkt-follow strong{color:#111;font-style:normal;}
.events-box{margin-top:2.5rem;border:1px solid #111;padding:3rem;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;}
.events-content h3{font-family:'IM Fell English',serif;font-size:1.5rem;font-weight:400;margin:0.6rem 0 0.8rem;}
.events-content p{font-size:0.88rem;color:#888;line-height:1.8;max-width:500px;margin-bottom:1.5rem;}
.etags{display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:1.5rem;}
.etag{font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;border:1px solid #E8E6E2;padding:0.35rem 0.9rem;color:#888;}
.events-doodle{opacity:0.25;filter:invert(1);flex-shrink:0;}

/* ── CONTACT ── */
#contact{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #111;}
.con-left{padding:6rem 5vw 6rem 6vw;border-right:1px solid #111;}
.con-left>p{font-size:0.9rem;line-height:1.85;color:#888;margin-bottom:2.5rem;}
.slink{display:flex;align-items:center;gap:1.2rem;text-decoration:none;color:#111;font-size:0.85rem;padding:1.1rem 0;border-bottom:1px solid #E8E6E2;transition:opacity 0.2s;}
.slink:first-of-type{border-top:1px solid #E8E6E2;}
.slink:hover{opacity:0.5;}
.con-right{padding:6rem 5vw;position:relative;overflow:hidden;}
.cform{display:flex;flex-direction:column;gap:1.5rem;}
.fg{display:flex;flex-direction:column;gap:0.5rem;}
.fg label{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:#888;}
.fg input,.fg textarea{background:transparent;border:none;border-bottom:1px solid #111;padding:0.7rem 0;font-family:'Libre Baskerville',serif;font-size:0.9rem;color:#111;outline:none;resize:none;-webkit-appearance:none;border-radius:0;}
.fg input::placeholder,.fg textarea::placeholder{color:#bbb;font-style:italic;}
.fg textarea{min-height:100px;}

/* ── FOOTER ── */
footer{padding:2rem 6vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;border-top:1px solid #111;}
.f-logo{display:flex;align-items:baseline;gap:0.6rem;}
.f-roge{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:0.05em;}
.f-sub{font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:#888;}
.f-copy{font-size:0.6rem;color:#888;}

/* ── FADE ── */
.fade{opacity:0;transform:translateY(22px);transition:opacity 0.65s ease,transform 0.65s ease;}
.fade.on{opacity:1;transform:none;}

/* ══════════════════════════════════
   TABLET  ≤ 900px
══════════════════════════════════ */
@media(max-width:900px){
  .feat-grid{grid-template-columns:repeat(2,1fr);}
  .loc-body{grid-template-columns:1fr;}
  .loc-map{height:380px;}
  .events-box{grid-template-columns:1fr;}
  .events-doodle{display:none;}
}

/* ══════════════════════════════════
   MOBILE  ≤ 768px
   (iPhone 15/16/17 Pro, all iPhones)
══════════════════════════════════ */
@media(max-width:768px){
  /* NAV */
  nav{padding:0 5vw;height:60px;}
  nav ul{display:none;}
  .nav-book{display:none;}
  .nav-roge{font-size:1.6rem;}

  /* HERO: single column, hide right panel entirely */
  #hero{grid-template-columns:1fr;min-height:auto;padding-top:60px;}
  .hero-left{padding:6vw 6vw 5vw;border-right:none;border-bottom:1px solid #111;}
  .hero-roge{font-size:clamp(4rem,18vw,6.5rem);}
  .hero-brewbar{font-size:0.8rem;letter-spacing:0.3em;}
  .hero-line{margin:1rem 0;}
  .hero-slogan{font-size:1.1rem;}
  .hero-sub{font-size:0.76rem;margin-bottom:1.4rem;}
  .hero-btns{gap:0.6rem;flex-direction:column;max-width:280px;}
  .hero-btns .btn{text-align:center;padding:0.75rem 1.5rem;}
  .hero-doodles{gap:1rem;margin-top:1.5rem;}
  /* HIDE the absolutely-positioned right panel doodles on mobile */
  .hero-right{display:block;height:52vw;min-height:180px;max-height:280px;border-top:1px solid #111;}
  .d1{width:40%;bottom:0;right:0;animation:none;}
  .d2{width:42%;top:0;right:0;animation:none;}
  .d3{width:36%;bottom:0;left:0;animation:none;}
  .d4{width:30%;top:8%;left:1%;animation:none;}
  .hero-vert{display:none;}

  /* MENU */
  #menu{padding:3rem 5vw;}
  .menu-top{flex-direction:column;align-items:flex-start;gap:0.6rem;margin-bottom:1.5rem;padding-bottom:1.5rem;}
  .menu-note{text-align:left;max-width:100%;}
  .sec-title{font-size:2rem;}
  .featured-drinks{padding:2rem 0 3rem;margin-top:2rem;}
  .feat-grid{grid-template-columns:repeat(2,1fr);gap:0.9rem;}
  .feat-card{padding:1.2rem 1rem;}
  .feat-name{font-size:0.95rem;}
  .feat-desc{font-size:0.72rem;line-height:1.6;}
  .feat-price{font-size:0.68rem;}
  /* Menu grid: stack to single column */
  .mgrid{grid-template-columns:1fr;}
  .mcol .mbox{margin:0;border:none;border-bottom:1px solid #111;padding:2rem 0;}
  .mbox{margin:0;border:none;border-bottom:1px solid #111;padding:2rem 0;}
  .mbox-full{grid-column:auto;}
  .mbox-full .mcols{grid-template-columns:1fr;}
  .mbox .dk{display:none;}
  .menu-fav-img{display:none;}
  .menu-fav-text{max-width:100%;}
  .mbox-full > div > div:first-child{flex-direction:column;}
  .srow{grid-template-columns:1fr 64px 64px;}
  .mi{grid-template-columns:1fr 64px 64px;}

  /* GALLERY — keep 3×3 on mobile */
  .gallery-intro{padding:2.5rem 5vw 1rem;}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,33vw);}
  .pitem{aspect-ratio:auto;}

  /* ABOUT */
  #about{grid-template-columns:1fr;}
  .about-text{padding:3rem 5vw;border-right:none;border-bottom:1px solid #111;}
  .about-visual{padding:2.5rem 5vw;}
  .snum{font-size:3.2rem;}
  .sdiv{width:60%;height:1px;}

  /* LOCATION */
  #location{padding:3rem 5vw;}
  .loc-header{margin-bottom:1.5rem;}
  .loc-body{grid-template-columns:1fr;gap:1.5rem;}
  .loc-map{height:300px;}
  .loc-schedule{padding:1rem 0;}

  /* MARKETS */
  #markets{padding:3rem 5vw;}
  .mktgrid{grid-template-columns:1fr;margin-top:2rem;}
  .mkt{border-right:none;border-bottom:1px solid #111;padding:1.8rem 0;}
  .mkt:last-child{border-bottom:none;}
  .events-box{margin-top:2rem;padding:2rem;grid-template-columns:1fr;gap:1.5rem;}
  .events-doodle{display:none;}
  .events-content h3{font-size:1.6rem;}
  .events-content p{font-size:0.82rem;max-width:100%;}
  .etags{gap:0.4rem;}
  .etag{font-size:0.58rem;padding:0.28rem 0.6rem;}
  .mkt-follow{font-size:0.9rem;}

  /* CONTACT */
  #contact{grid-template-columns:1fr;}
  .con-left{padding:3rem 5vw;border-right:none;border-bottom:1px solid #111;}
  .con-right{padding:3rem 5vw;}
  .con-right .dk{display:none;}
  .cform{gap:1.2rem;}

  /* FOOTER */
  footer{padding:1.5rem 5vw;flex-direction:column;align-items:flex-start;gap:0.8rem;}
  footer ul{flex-wrap:wrap;gap:1rem;}
}

/* ══════════════════════════════════
   SMALL PHONE  ≤ 390px
   (iPhone SE, older Androids)
══════════════════════════════════ */
@media(max-width:390px){
  .hero-roge{font-size:clamp(3.2rem,15vw,4.5rem);}
  .hero-btns{max-width:100%;}
  .feat-grid{grid-template-columns:1fr;}
  /* Keep gallery 3 columns even on tiny screens */
  .pgrid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,33vw);}
  .loc-map{height:240px;}
  .snum{font-size:2.8rem;}
}
/* HAMBURGER NAV */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.nav-hamburger span{display:block;width:22px;height:2px;background:#111;transition:all 0.3s ease;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile-menu{display:none;position:fixed;top:60px;left:0;right:0;z-index:98;background:#F8F7F5;border-bottom:2px solid #111;flex-direction:column;padding:1rem 6vw 1.8rem;}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-menu a{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:#111;text-decoration:none;padding:0.95rem 0;border-bottom:1px solid #eee;transition:opacity 0.2s;}
.nav-mobile-menu a:hover{opacity:0.5;}
.nav-mobile-cta{background:#111;color:#F8F7F5 !important;text-align:center;margin-top:1rem;padding:0.9rem !important;border-bottom:none !important;letter-spacing:0.18em;}
@media(max-width:768px){nav ul{display:none;}.nav-hamburger{display:flex;}}


/* Inner pages: offset fixed nav */
body.inner-page{padding-top:72px;}
@media(max-width:768px){body.inner-page{padding-top:60px;}}