/* ============================================================
   Harbor Bar & Grill — Orcas Island
   ============================================================ */

:root{
  --ocean: #B97520;
  --ocean-deep: #8A5614;
  --ocean-soft: #D49544;
  --sand: #FFF8ED;
  --sand-2: #F5EDE0;
  --sand-3: #EAD9C4;
  --cream: #FFFDF8;
  --coral: #0EA5E9;
  --coral-soft: #38BDF8;
  --gold: #D97706;
  --gold-soft: #F59E0B;
  --aqua: #F97316;
  --aqua-deep: #EA580C;
  --ink: #2C1810;
  --muted: #8B7355;
  --rule: rgba(138,86,20,.18);
  --rule-soft: rgba(138,86,20,.10);
  --shadow-sm: 0 2px 8px rgba(138,86,20,.08);
  --shadow-md: 0 12px 30px -10px rgba(138,86,20,.22);
  --shadow-lg: 0 30px 60px -20px rgba(138,86,20,.35);
  --max: 1240px;
  --pad: clamp(1.25rem, 4vw, 3.25rem);
  --t-fast: 220ms cubic-bezier(.2,.7,.2,1);
  --t-med: 480ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 900ms cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}

/* ----- Type ----- */
.display{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  font-size:clamp(2.1rem, 5.4vw, 4.2rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--ocean);
}
.display--light{color:var(--cream)}
.eyebrow{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#DC2626;
  margin-bottom:1rem;
}
.eyebrow--light{color:#DC2626}
.eyebrow--small{font-size:.66rem;letter-spacing:.18em;color:var(--muted);margin-bottom:.25rem}
.lede{
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  color:var(--muted);
  max-width:60ch;
  line-height:1.6;
}
.lede--light{color:rgba(255,250,240,.78)}

/* ----- Header ----- */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  background:rgba(138,86,20,.82);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,250,240,.08);
  animation:slideDown var(--t-slow) both;
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:.85rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.brand{display:flex; align-items:center; gap:.7rem; color:var(--cream)}
.brand-logo{
  width:40px; height:40px;
  object-fit:cover;
  border-radius:50%;
  background:rgba(255,253,248,.92);
  padding:0;
  border:1.5px solid rgba(255,253,248,.35);
  flex:0 0 auto;
}
.brand-logo--footer{
  width:42px; height:42px;
  object-fit:cover;
  border-radius:50%;
  background:rgba(255,253,248,.85);
  padding:0;
  border:1.5px solid rgba(255,253,248,.25);
}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:700;color:var(--cream)}
.brand-sub{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,250,240,.62)}
.primary-nav{
  display:flex; gap:1.7rem;
  margin-left:auto; margin-right:auto;
  font-size:.92rem;
}
.primary-nav a{
  color:rgba(255,250,240,.82);
  position:relative; padding:.3rem 0;
  transition:color var(--t-fast);
}
.primary-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1.5px; background:var(--gold-soft);
  transition:right var(--t-med);
}
.primary-nav a:hover{color:var(--cream)}
.primary-nav a:hover::after{right:0}
.nav-dropdown{position:relative; display:inline-flex; align-items:center}
.nav-dropdown-trigger{
  display:inline-flex; align-items:center; gap:.35rem;
  color:rgba(255,250,240,.82);
  position:relative; padding:.3rem 0;
  transition:color var(--t-fast);
}
.nav-dropdown-trigger::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1.5px; background:var(--gold-soft);
  transition:right var(--t-med);
}
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger{color:var(--cream)}
.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown:focus-within .nav-dropdown-trigger::after{right:0}
.nav-dropdown-caret{font-size:.6em}
.nav-dropdown-menu{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%,6px);
  min-width:210px;
  margin-top:.7rem;
  padding:.4rem;
  background:var(--ocean-deep);
  border:1px solid rgba(231,194,129,.25);
  border-radius:10px;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden;
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index:60;
}
.nav-dropdown-menu::before{
  content:""; position:absolute; left:0; right:0; top:-.7rem; height:.7rem;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.nav-dropdown-menu a{
  display:block;
  padding:.6rem .8rem;
  border-radius:6px;
  font-size:.88rem;
  white-space:nowrap;
  color:rgba(255,250,240,.85);
  transition:background var(--t-fast), color var(--t-fast);
}
.nav-dropdown-menu a:hover{background:rgba(255,250,240,.08); color:var(--gold-soft)}
.mobile-nav-label{
  padding:.85rem .5rem 0;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,250,240,.45);
}
.header-cta{
  font-family:'Cormorant Garamond',serif;
  font-weight:600; font-size:.95rem;
  color:var(--cream);
  padding:.55rem 1.1rem;
  border:1px solid rgba(231,194,129,.55);
  border-radius:999px;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.header-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ocean-deep)}

.nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:8px;
  background:none;border:none;cursor:pointer;
}
.nav-toggle span{
  display:block;height:1.5px;background:var(--cream);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-nav{
  display:none;
  position:fixed;top:64px;left:0;right:0;z-index:99;
  background:var(--ocean-deep);
  border-top:1px solid rgba(231,194,129,.15);
  padding:1.2rem 1.5rem;
  flex-direction:column;gap:0;
}
.mobile-nav a{
  display:block;padding:.85rem .5rem;
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;
  color:rgba(255,250,240,.88);
  border-bottom:1px solid rgba(255,250,240,.08);
  transition:color var(--t-fast);
}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav a:hover{color:var(--gold-soft)}
.mobile-nav-phone{
  margin-top:.5rem;
  color:var(--gold-soft) !important;
  font-size:1rem !important;
}
.nav-open .mobile-nav{display:flex}

@media (max-width: 880px){
  .primary-nav{display:none}
  .header-inner{padding:.75rem 1.1rem; gap:.9rem}
  .header-cta{display:none}
  .brand-sub{display:none}
  .nav-toggle{display:flex;margin-left:auto}
}

/* ----- Hero ----- */
.hero{
  position:relative;
  min-height: clamp(620px, 92vh, 880px);
  padding: 9rem var(--pad) 4rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--cream);
  overflow:hidden;
  isolation:isolate;
}
.hero-media{position:absolute; inset:0; z-index:-1}
.hero-image{
  position:absolute; inset:0;
  background-image:url("https://media.freewave.dev/g0k2g4/images/IMG_5669.webp");
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
  background-color:#2C1810;
  filter:saturate(105%) contrast(102%);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(249,115,22,.18), transparent 55%),
    linear-gradient(180deg, rgba(138,86,20,.72) 0%, rgba(138,86,20,.58) 35%, rgba(138,86,20,.9) 100%);
}
.hero-content{
  position:relative;
  max-width:var(--max); margin:0 auto; width:100%;
  animation: rise var(--t-slow) .15s both;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600;
  padding:.45rem .9rem;
  background:rgba(255,250,240,.12);
  border:1px solid rgba(255,250,240,.25);
  border-radius:999px;
  backdrop-filter:blur(6px);
  margin-bottom:1.6rem;
  color:var(--cream);
}
.hero-eyebrow .dot{
  width:8px; height:8px; border-radius:50%;
  background:#DC2626;
  box-shadow:0 0 0 4px rgba(220,38,38,.25);
  animation: pulse 2.4s ease-in-out infinite;
}
.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:clamp(2.8rem, 8vw, 6.2rem);
  line-height:.98;
  letter-spacing:-0.025em;
  margin-bottom:1.4rem;
}
.hero-title .line-1{display:block; color:var(--cream)}
.hero-title .line-2{display:block; color:var(--gold-soft)}
.hero-title em{
  font-style:italic; font-weight:500;
  color:inherit;
  font-family:'Cormorant Garamond',serif;
}
.hero-lede{
  max-width:42rem;
  font-size:clamp(1.05rem, 1.5vw, 1.25rem);
  color:rgba(255,250,240,.86);
  margin-bottom:2.8rem;
}
.hero-meta{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:1.4rem;
  padding-top:2rem;
  border-top:1px solid rgba(255,250,240,.18);
  max-width:780px;
}
.meta-item{display:flex; flex-direction:column; min-width:0}
a.meta-item{text-decoration:none; color:inherit; transition:opacity var(--t-fast)}
a.meta-item:hover{opacity:.78}
.meta-label{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(255,250,240,.72);
}
.meta-value{
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem; font-weight:500;
  color:var(--cream);
}
.meta-divider{
  width:1px; height:34px;
  background:rgba(255,250,240,.18);
}
.hero-scroll{
  position:absolute;
  right:var(--pad); bottom:1.8rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,250,240,.6);
}
.hero-scroll span{
  width:1px; height:38px;
  background:linear-gradient(to bottom, transparent, var(--gold-soft));
  animation: scrollLine 2s ease-in-out infinite;
}
.hero-scroll small{
  font-size:.65rem; letter-spacing:.3em; text-transform:uppercase;
}

@keyframes heroPan{
  0%{transform:scale(1.04) translate(0,0)}
  100%{transform:scale(1.08) translate(-1.5%,-1%)}
}
@keyframes rise{
  from{opacity:0; transform:translateY(28px)}
  to{opacity:1; transform:none}
}
@keyframes slideDown{
  from{opacity:0; transform:translateY(-100%)}
  to{opacity:1; transform:none}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(220,38,38,.25)}
  50%{box-shadow:0 0 0 8px rgba(220,38,38,.05)}
}
@keyframes scrollLine{
  0%{transform-origin:top; transform:scaleY(0)}
  50%{transform-origin:top; transform:scaleY(1)}
  50.01%{transform-origin:bottom; transform:scaleY(1)}
  100%{transform-origin:bottom; transform:scaleY(0)}
}

@media (max-width:680px){
  .hero{padding-top:7.5rem}
  .meta-divider{display:none}
  .hero-meta{gap:1rem}
  .hero-scroll{display:none}
}

/* ----- Ribbon ----- */
.ribbon{
  background:#B5D9E8;
  color:#DC2626;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.2rem;
  padding:1.1rem 0;
  overflow:hidden;
  border-top:1px solid rgba(138,86,20,.18);
  border-bottom:1px solid rgba(138,86,20,.18);
}
.ribbon-track{
  display:flex; gap:3rem;
  white-space:nowrap;
  animation: marquee 38s linear infinite;
}
.ribbon-track span{flex:0 0 auto}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ----- Story ----- */
.story{
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  background:
    radial-gradient(ellipse at 90% 0%, rgba(56,189,248,.10), transparent 50%),
    var(--sand);
}
.story-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns: 1.15fr 1fr;
  align-items:center;
}
.story-copy p{margin-top:1.1rem; color:var(--ink); font-size:1.05rem; max-width:54ch}
.virtues{
  list-style:none; margin-top:2rem;
  display:grid; gap:.85rem;
}
.virtues li{
  padding:.85rem 0;
  border-top:1px solid var(--rule-soft);
  font-size:.98rem; color:var(--muted);
}
.virtues li:last-child{border-bottom:1px solid var(--rule-soft)}
.virtues strong{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.1rem;
  color:var(--ocean); margin-right:.5rem;
}
.story-art{
  position:relative;
  min-height:520px;
}
.art-card{
  position:absolute;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  transition:transform var(--t-med);
}
.art-card:hover{transform:translateY(-4px)}
.art-img{
  background-size:cover; background-position:center;
  width:100%; height:100%;
  transition:transform var(--t-slow);
}
.art-card:hover .art-img{transform:scale(1.04)}
.art-card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem 1.2rem;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  color:var(--cream); font-size:.95rem;
  background:linear-gradient(to top, rgba(138,86,20,.78), transparent);
}
.art-card--main{
  width:78%; height:62%;
  top:0; right:0;
}
.art-card--accent{
  width:46%; height:38%;
  left:0; bottom:0;
  border:6px solid var(--sand);
}
.art-img--marina{
  background-image:url("https://media.freewave.dev/g0k2g4/images/IMG_5656.webp");
}
.art-img--cocktail{
  background-image:url("https://media.freewave.dev/g0k2g4/images/55271227924_a113484452_c.webp");
  background-position:center 75%;
  filter:saturate(150%) contrast(108%);
}
.art-stamp{
  position:absolute;
  width:140px; height:140px;
  right:-18px; top:-28px;
  color:#2C1810;
  filter: drop-shadow(0 8px 18px rgba(138,86,20,.35));
}

@media (max-width:880px){
  .story-grid{grid-template-columns:1fr}
  .story-art{min-height:420px; order:2}
  .art-card--main{width:80%; height:58%}
  .art-card--accent{width:50%; height:38%}
  .art-stamp{width:100px; height:100px; right:-4px; top:-30px}
}

/* ----- Menu ----- */
.menu{
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  background:
    radial-gradient(ellipse at 20% 100%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(255,255,255,.25), transparent 50%),
    #B5D9E8;
  color:var(--ink);
  position:relative;
  overflow:hidden;
}
.menu-header{
  max-width:var(--max); margin:0 auto 2.2rem;
  text-align:center;
  position:relative;
}
.menu-header .display{color:var(--cream)}
.menu-header .lede{margin:1.1rem auto 0; color:var(--ink)}
.menu-header .eyebrow{color:#DC2626}
.menu-sample-note{
  margin:.9rem auto 0;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:.95rem;
  letter-spacing:.04em;
  color:var(--ocean-deep);
  opacity:.85;
}

.menu-grid{
  max-width:var(--max);
  margin:0 auto;
  column-count:3;
  column-gap:1.4rem;
}
.menu-list{display:block}
.menu-card{
  break-inside:avoid;
  page-break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:inline-block;
  width:100%;
  margin:0 0 1.4rem;
  background:rgba(255,253,248,.78);
  border:1px solid rgba(138,86,20,.16);
  border-radius:12px;
  padding:1.3rem 1.5rem 1rem;
  box-shadow:0 6px 18px -10px rgba(138,86,20,.18);
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.menu-card:hover{
  transform:translateY(-2px);
  background:rgba(255,253,248,.95);
  box-shadow:0 14px 28px -12px rgba(138,86,20,.28);
}
.menu-section-title{
  margin:0 0 1rem;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size:1.5rem;
  color:var(--ocean-deep);
  letter-spacing:.01em;
  position:relative;
  padding-bottom:.55rem;
  border-bottom:1.5px solid rgba(138,86,20,.22);
  display:block;
}
.menu-section-title::before,
.menu-section-title::after{display:none}
.menu-section-title span{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:0;
}
.menu-section-title span::before{
  content:"★";
  font-size:.7em;
  font-style:normal;
  color:#DC2626;
}
.menu .menu-section-title span::before{
  display:none;
}
.dish{
  padding:.55rem 0;
  border-bottom:1px dashed rgba(138,86,20,.14);
  transition:padding var(--t-fast);
}
.menu-card .dish:last-child{border-bottom:none}
.dish:hover{padding-left:.3rem}
.dish-head{
  display:flex; align-items:baseline; gap:.55rem;
  margin-bottom:.15rem;
}
.dish-head h3{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:600;
  font-size:.82rem;
  color:var(--ocean-deep);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.3;
}
.dish .spice{font-size:.85rem; margin-left:.15rem}
.dish .raw{
  color:#DC2626; font-style:italic;
  margin-left:.1rem; font-size:1.1em; line-height:.5;
}
.dot-leader{
  flex:1; height:1px;
  background-image: radial-gradient(circle, rgba(138,86,20,.35) 1px, transparent 1.4px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  align-self:end;
  margin-bottom:.35rem;
}
.dish .price{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size:1.05rem;
  color:#DC2626;
  white-space:nowrap;
}
.dish p{
  color:var(--ink);
  font-size:.82rem;
  line-height:1.45;
  max-width:none;
}
.dish p em{font-style:italic; color:var(--ocean-deep)}
.dish-note{
  margin-top:.2rem;
  font-size:.74rem;
  color:var(--ocean-deep);
  letter-spacing:.01em;
}
.dish-note em{font-style:italic}
.menu-foot{
  max-width:var(--max); margin:2rem auto 0;
  text-align:center;
  color:var(--ink);
  padding-top:1.4rem;
  border-top:1px solid rgba(138,86,20,.18);
}
.menu-foot .raw{color:var(--ocean-deep); font-style:italic}
.menu-info{
  list-style:none;
  display:flex; flex-direction:column; gap:.5rem;
  font-size:.92rem;
  letter-spacing:.01em;
  margin-bottom:1.6rem;
}
.menu-info li{color:var(--ink)}
.menu-legend{
  font-size:.82rem;
  color:var(--muted);
  letter-spacing:.04em;
  padding-top:1.2rem;
  border-top:1px solid rgba(138,86,20,.10);
  max-width:60ch;
  margin:0 auto;
}

@media (max-width:980px){
  .menu-grid{column-count:2}
}
@media (max-width:640px){
  .menu-grid{column-count:1}
  .dish:hover{padding-left:0}
  .menu-section-title{font-size:1.35rem}
}

.dish-sub{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:500;
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:none;
  margin-left:.35rem;
}

/* ----- Beverages ----- */
.beverages{
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  background:
    radial-gradient(ellipse at 80% 100%, rgba(255,255,255,.32), transparent 55%),
    radial-gradient(ellipse at 10% 0%, rgba(255,255,255,.22), transparent 50%),
    #F0A868;
  color:var(--ink);
  position:relative;
  overflow:hidden;
}
.beverages .menu-header .display{color:#DC2626}
.beverages .menu-header .eyebrow{color:var(--ocean-deep)}
.beverages .menu-header .lede{color:var(--ink)}
.beverages .menu-card{
  background:rgba(255,253,248,.88);
  border-color:rgba(138,86,20,.20);
}
.beverages .menu-card:hover{
  background:rgba(255,253,248,.98);
}
.beverages .menu-section-title{
  color:var(--ocean-deep);
  border-bottom-color:rgba(138,86,20,.28);
}
.beverages .menu-section-title span::before{
  color:#B45309;
  font-size:.9em;
}
.beverages .menu-grid > .menu-card:nth-of-type(1) .menu-section-title span::before{content:"\01F34D"}
.beverages .menu-grid > .menu-card:nth-of-type(2) .menu-section-title span::before{content:"\01F420"}
.beverages .menu-grid > .menu-card:nth-of-type(3) .menu-section-title span::before{content:"\01F9A9"}
.beverages .menu-grid > .menu-card:nth-of-type(4) .menu-section-title span::before{content:"\01F99C"}
.beverages .menu-grid > .menu-card:nth-of-type(5) .menu-section-title span::before{content:"\01F9A9"}
.beverages .menu-grid > .menu-card:nth-of-type(6) .menu-section-title span::before{content:"\01F34D"}
.beverages .menu-grid > .menu-card:nth-of-type(7) .menu-section-title span::before{content:"\01F420"}
.beverages .menu-grid > .menu-card:nth-of-type(8) .menu-section-title span::before{content:"\01F99C"}
.beverages .dish .raw{color:#B45309}
.beverages .menu-foot{border-top-color:rgba(138,86,20,.24)}

/* ----- Gallery ----- */
.gallery{
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  background:var(--sand);
}
.gallery-header{
  max-width:var(--max); margin:0 auto 3rem;
}
.gallery-grid{
  max-width:var(--max); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem, 2vw, 1.4rem);
}
.g-card{
  position:relative;
  aspect-ratio: 4/5;
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform var(--t-med), box-shadow var(--t-med);
  cursor:pointer;
}
.g-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.g-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.g-card:hover .g-img{transform:scale(1.07)}
.g-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(138,86,20,.85) 0%, rgba(138,86,20,.05) 50%, transparent 100%);
}
.g-card figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.4rem 1.4rem 1.3rem;
  color:var(--cream);
  display:flex; flex-direction:column; gap:.05rem;
}
.g-card figcaption span{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:.85rem; color:var(--gold-soft);
  letter-spacing:.06em;
  margin-bottom:.3rem;
}
.g-card figcaption strong{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:1.3rem;
  letter-spacing:-0.005em;
  line-height:1.15;
}
.g-card figcaption em{
  font-style:italic; font-size:.78rem;
  color:rgba(255,250,240,.7);
  letter-spacing:.05em; margin-top:.2rem;
}

.g-img--shrimp{background-image:url("https://media.freewave.dev/g0k2g4/images/fishNchips.webp")}
.g-img--ribeye{background-image:url("https://media.freewave.dev/g0k2g4/images/steak.webp")}
.g-img--rockefeller{background-image:url("https://media.freewave.dev/g0k2g4/images/oysters.webp")}
.g-img--ceviche{background-image:url("https://media.freewave.dev/g0k2g4/images/clams.webp")}
.g-img--judd{background-image:url("https://media.freewave.dev/g0k2g4/images/Screenshot_2026-05-19_at_10.06.06_AM.webp")}
.g-img--sliders{background-image:url("https://media.freewave.dev/g0k2g4/images/burger.webp")}
.g-img--hurricane{background-image:url("https://media.freewave.dev/g0k2g4/images/IMG_5671.webp")}
.g-img--howdy{background-image:url("https://media.freewave.dev/g0k2g4/images/drink2.webp")}
.g-img--pirate{background-image:url("https://media.freewave.dev/g0k2g4/images/IMG_5672.webp")}

@media (max-width:880px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr}
}

/* ----- Hours ----- */
.hours{
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  background:var(--sand-2);
  position:relative;
}
.hours-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns: 1fr 1.1fr;
  align-items:center;
}
.hours-art{
  position:relative;
  aspect-ratio: 4/5;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hours-photo{
  position:absolute; inset:0;
  background-image:url("https://media.freewave.dev/g0k2g4/images/55271389830_5ed3808cda_k.webp");
  background-size:cover; background-position:center;
  transition:transform var(--t-slow);
}
.hours-art:hover .hours-photo{transform:scale(1.04)}
.hours-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, transparent 50%, rgba(138,86,20,.45));
}
.hours-badge{
  position:absolute; top:1.4rem; left:1.4rem;
  background:var(--sand);
  color:var(--ocean-deep);
  padding:.85rem 1.1rem;
  border-radius:8px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1.05rem; line-height:1.15;
  text-align:center;
  box-shadow:var(--shadow-md);
  z-index:2;
}
.hours-list{
  list-style:none; margin-top:2rem;
  border-top:1px solid var(--rule);
}
.hours-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 0;
  border-bottom:1px solid var(--rule);
  font-size:1rem;
}
.hours-copy .display + .lede{margin-top:1.5rem}
.hours-list li span{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:1.15rem;
  color:#DC2626;
}
.hours-list li b{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  letter-spacing:.02em;
  color:#DC2626;
}
.hours-list li.closed b{color:#DC2626; font-style:italic; font-family:'Fraunces',Georgia,serif}
.hours-list li.closed span{color:#DC2626}
.hours-note{
  margin-top:1.6rem;
  font-size:.95rem;
  color:var(--cream);
  padding:1.05rem 1.3rem;
  background:linear-gradient(135deg, var(--ocean-deep) 0%, #6f4310 60%, #4a2c0a 100%);
  border-left:4px solid #DC2626;
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:.85rem;
  flex-wrap:wrap;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.hours-note::after{
  content:"";
  position:absolute;
  right:-40px; top:-40px;
  width:140px; height:140px;
  background:radial-gradient(circle, rgba(245,158,11,.22), transparent 70%);
  pointer-events:none;
}
.hours-note-star{
  color:#DC2626;
  font-size:1.35rem;
  line-height:1;
  text-shadow:0 0 14px rgba(220,38,38,.45);
  flex:0 0 auto;
}
.hours-note strong{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.015em;
  color:var(--gold-soft);
}
.hours-note-tag{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.25rem;
  color:var(--cream);
  position:relative;
  z-index:1;
}

@media (max-width:880px){
  .hours-grid{grid-template-columns:1fr}
  .hours-art{order:-1; aspect-ratio:16/10}
}

/* ----- Visit ----- */
.visit{
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  background:var(--sand);
}
.visit-header{
  max-width:760px; margin:0 auto 2.4rem;
  text-align:center;
}
.visit-header .lede{margin:1rem auto 0}
.visit-address{
  max-width:var(--max); margin:0 auto 1.6rem;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:1.4rem 1.6rem;
  background:rgba(255,253,248,.78);
  border:1px solid rgba(138,86,20,.16);
  border-radius:12px;
  box-shadow:0 6px 18px -10px rgba(138,86,20,.18);
  text-align:center;
  transition:background var(--t-fast), box-shadow var(--t-fast);
}
.visit-address:hover{
  background:rgba(255,253,248,.95);
  box-shadow:0 10px 22px -12px rgba(138,86,20,.22);
}
.visit-address .eyebrow{margin-bottom:0}
.visit-address .addr{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.15rem, 2vw, 1.45rem);
  font-weight:500;
  font-style:italic;
  color:var(--ocean);
  letter-spacing:.01em;
}
.visit-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:1.4rem;
  grid-template-columns: repeat(2, 1fr);
}
.travel{
  background:rgba(255,253,248,.78);
  border:1px solid rgba(138,86,20,.16);
  border-radius:12px;
  padding:1.6rem 1.8rem 1.4rem;
  box-shadow:0 6px 18px -10px rgba(138,86,20,.18);
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.travel:hover{
  transform:translateY(-2px);
  background:rgba(255,253,248,.95);
  box-shadow:0 14px 28px -12px rgba(138,86,20,.28);
}
.travel-heading{
  margin:0 0 1rem;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size:1.5rem;
  color:var(--ocean-deep);
  letter-spacing:.01em;
  padding-bottom:.55rem;
  border-bottom:1.5px solid rgba(138,86,20,.22);
}
.travel-heading span{
  display:inline-flex; align-items:center; gap:.55rem;
}
.travel-heading span::before{
  content:"\2605";
  font-size:.7em;
  font-style:normal;
  color:#DC2626;
}
.travel p{color:var(--ink); margin-bottom:.6rem; font-size:.95rem; line-height:1.55}
.travel p:last-child{margin-bottom:0}
.travel p em{font-style:italic; color:var(--ocean-deep)}
.travel a{color:var(--coral); font-weight:600; border-bottom:1px solid currentColor}
.travel .fine{
  font-size:.82rem;
  color:var(--muted);
  font-style:italic;
  border-top:1px dashed rgba(138,86,20,.18);
  padding-top:.8rem;
  margin-top:.9rem;
}
.taxi-list{list-style:none; margin-top:.9rem; display:grid; gap:.4rem}
.taxi-list li{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.92rem;
  padding:.4rem 0;
  border-bottom:1px dashed rgba(138,86,20,.14);
}
.taxi-list li:last-child{border-bottom:0}
.taxi-list span{color:var(--ink); font-weight:500}
.taxi-list b{color:var(--ocean-deep); font-weight:600; font-feature-settings:'tnum'}

@media (max-width:780px){
  .visit-grid{grid-template-columns:1fr}
}

/* ----- Sister Restaurants ----- */
.sisters{
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad);
  background:var(--sand-2);
  border-top:1px solid var(--rule-soft);
}
.sisters-header{
  max-width:760px; margin:0 auto 2.6rem;
  text-align:center;
}
.sisters-header .lede{margin:1rem auto 0}
.sisters-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:1.6rem;
  grid-template-columns: repeat(3, 1fr);
}
.sister{
  background:var(--cream);
  border:1px solid rgba(138,86,20,.16);
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 6px 18px -10px rgba(138,86,20,.18);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.sister:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px -14px rgba(138,86,20,.32);
}
.sister-img{
  position:relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:var(--sand-3);
}
.sister-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--t-med);
}
.sister:hover .sister-img img{transform:scale(1.04)}
.sister-body{
  padding:1.4rem 1.5rem 1.6rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.sister-body .eyebrow{margin-bottom:.15rem}
.sister-name{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size:1.6rem;
  line-height:1.15;
  color:var(--ocean-deep);
  letter-spacing:.01em;
}
.sister-body p{
  color:var(--ink);
  font-size:.95rem;
  line-height:1.55;
  margin-top:.2rem;
}

@media (max-width:980px){
  .sisters-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .sisters-grid{grid-template-columns:1fr}
}

/* ----- Contact ----- */
.contact{
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  background:
    radial-gradient(ellipse at 20% 100%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(255,255,255,.25), transparent 50%),
    #B5D9E8;
  color:var(--ink);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.contact::before{
  content:""; position:absolute;
  top:-220px; left:50%; transform:translateX(-50%);
  width:1200px; height:1200px;
  border:1px solid rgba(138,86,20,.10);
  border-radius:50%;
  pointer-events:none;
}
.contact::after{
  content:""; position:absolute;
  top:-100px; left:50%; transform:translateX(-50%);
  width:900px; height:900px;
  border:1px solid rgba(138,86,20,.07);
  border-radius:50%;
  pointer-events:none;
}
.contact-inner{
  position:relative;
  max-width:920px; margin:0 auto;
}
.contact .display--light{color:var(--ocean-deep)}
.contact .lede--light{color:var(--ink)}
.contact .eyebrow--light{color:#DC2626}
.contact .lede{margin:1.1rem auto 0}
.contact-cards{
  display:grid; gap:1rem;
  grid-template-columns:repeat(2,1fr);
  max-width:640px;
  margin:1.6rem auto 2rem;
}
.contact-reservation{
  max-width:640px;
  margin:0 auto 2.2rem;
  text-align:left;
  font-family:'Cormorant Garamond',serif;
  font-size:1.08rem;
  line-height:1.55;
  color:var(--ocean-deep);
}
.contact-reservation p{
  margin:0 0 1rem;
}
.contact-reservation p:last-child{
  margin-bottom:0;
}
.c-card{
  display:flex; flex-direction:column; gap:.4rem;
  padding:1.6rem 1.4rem;
  background:rgba(255,253,248,.5);
  border:1px solid rgba(138,86,20,.18);
  border-radius:12px;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
a.c-card:hover{
  background:rgba(255,253,248,.8);
  border-color:var(--ocean);
  transform:translateY(-3px);
}
.c-label{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ocean);
}
.c-value{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:1.08rem;
  color:var(--ocean-deep);
  overflow-wrap:anywhere;
  line-height:1.35;
}
.contact-foot{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1rem;
  color:var(--ocean-deep);
  letter-spacing:.04em;
  padding-top:1.8rem;
  border-top:1px solid rgba(138,86,20,.18);
}
.contact-foot span{margin:0 .4rem; color:var(--ocean)}

@media (max-width:680px){
  .contact-cards{grid-template-columns:1fr}
}

/* ----- Social / Sliding Gallery ----- */
.social{
  padding: clamp(2rem, 5vw, 4rem) 0;
  background:var(--sand-2);
  overflow:hidden;
  position:relative;
}
.social-header{
  max-width:var(--max);
  margin:0 auto 2.4rem;
  padding:0 var(--pad);
  text-align:center;
}
.social-header .lede{margin:1rem auto 0}

.slider{
  width:100%;
  overflow:hidden;
  padding:.6rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.slider-track{
  display:flex;
  gap:1.1rem;
  width:max-content;
  padding:0 .55rem;
  animation: slideTrack 48s linear infinite;
}
.slider:hover .slider-track{animation-play-state:paused}
.slide{
  flex:0 0 auto;
  width:clamp(210px, 26vw, 300px);
  aspect-ratio:4/5;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:var(--sand-3);
  transition:transform var(--t-med), box-shadow var(--t-med);
}
.slide:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--t-slow);
}
.slide:hover img{transform:scale(1.05)}

@keyframes slideTrack{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.social-foot{
  max-width:var(--max);
  margin:2.6rem auto 0;
  padding:0 var(--pad);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:1.2rem;
}
.instagram{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.85rem 1.5rem;
  background:linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
  color:#fff;
  border-radius:999px;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:.02em;
  box-shadow:var(--shadow-md);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.instagram svg{flex:0 0 auto}
.instagram:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.hashtag{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  padding:.7rem 1.4rem;
  background:rgba(255,253,248,.9);
  border:1.5px dashed var(--ocean);
  border-radius:12px;
  line-height:1.1;
  box-shadow:var(--shadow-sm);
}
.hashtag-label{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.35rem;
}
.hashtag-value{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size:1.3rem;
  color:var(--ocean-deep);
  user-select:all;
}

@media (max-width:560px){
  .slide{width:200px}
  .social-foot{flex-direction:column; gap:1rem}
  .instagram{font-size:1rem; padding:.75rem 1.25rem}
}

/* ----- Footer ----- */
.site-footer{
  background:var(--ocean-deep);
  color:rgba(255,250,240,.7);
  padding:2.4rem var(--pad);
  border-top:1px solid rgba(255,250,240,.06);
}
.footer-inner{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:1.5rem;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}
.footer-brand{display:flex; align-items:center; gap:.8rem}
.footer-brand .brand-logo{width:42px; height:42px}
.footer-name{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.05rem;color:var(--cream)}
.footer-loc{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,250,240,.5)}
.footer-nav{
  display:flex; gap:1.5rem; justify-content:center;
  font-size:.9rem;
}
.footer-nav a{transition:color var(--t-fast)}
.footer-nav a:hover{color:var(--gold-soft)}
.footer-meta{font-size:.85rem; text-align:right}
.footer-fine{font-size:.78rem; color:rgba(255,250,240,.45); margin-top:.3rem}
.footer-fine a{color:var(--gold-soft)}

@media (max-width:780px){
  .footer-inner{grid-template-columns:1fr; text-align:center; gap:1.6rem}
  .footer-brand{justify-content:center}
  .footer-meta{text-align:center}
  .footer-nav{flex-wrap:wrap}
}

/* ----- Event page (July 4th) ----- */
.page-top{ padding-top: clamp(7rem, 13vw, 9rem); }
.event-banner{
  padding-left: var(--pad);
  padding-right: var(--pad);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background:var(--sand);
}
.event-banner-frame{
  max-width: var(--max);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(138,86,20,.16);
  box-shadow: var(--shadow-md);
  background:#2C1810;
}
.event-banner-image{
  width: 100%;
  aspect-ratio: 21 / 9;
  background-image: url("https://media.freewave.dev/g0k2g4/images/July-4th.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.visit--event{ padding-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width:780px){
  .event-banner-image{ aspect-ratio: 4 / 5; }
}
.travel--event .travel-heading{
  font-size:clamp(1.25rem, 2.4vw, 1.5rem);
  line-height:1.2;
}
.travel--event .travel-heading span::before{ display:none; }
.travel--event p + .travel-heading{ margin-top:1.4rem; }
.event-list{
  list-style:none;
  margin:.4rem 0 0;
  padding:0;
}
.event-list li{
  position:relative;
  padding:.4rem 0 .4rem 1.1rem;
  font-size:.95rem;
  color:var(--ink);
  line-height:1.5;
  border-bottom:1px dashed rgba(138,86,20,.14);
}
.event-list li:last-child{border-bottom:0}
.event-list li::before{
  content:"•";
  position:absolute;
  left:.2rem;
  color:#DC2626;
  font-weight:700;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}