/* =========================================================
   SoKo Kitchen & Cocktails — shared styles
   Palette: charcoal + muted oxblood burgundy (brand-accurate),
            alternating light "brushed steel" sections, shiny silver accents
   Type: Cinzel Decorative (display) + Trocchi (body/serif)
   ========================================================= */

:root{
  /* brand burgundy, anchored to the actual brand sunburst asset color */
  --burgundy:        #700C0C;  /* brand oxblood — accents on both light & dark */
  --burgundy-deep:   #3B0808;  /* near-black wine — dark section backgrounds */
  --burgundy-light:  #A13636;  /* muted brick-red — accents/hover on dark surfaces */

  --charcoal:        #17140F;  /* dark page background */
  --charcoal-light:  #241E1A;  /* dark card / panel surface */

  --bg-light:        #E7E8E6;  /* light section background — cool brushed steel, not cream */
  --surface-white:   #FAFAF9;  /* light card surface */
  --ink:             #1C1A17;  /* headings on light backgrounds */
  --ink-muted:       #55524C;  /* body text on light backgrounds */

  --silver:          #8E9296;  /* mid steel — borders/dividers */
  --silver-light:    #ECE9E2;  /* near-white — headings/text on dark bg, logo plate */
  --silver-dark:     #A7ABB0;  /* muted text on dark backgrounds */
  --silver-shine:    linear-gradient(100deg, #7D8083 0%, #E8E9EA 15%, #B4B7BA 35%, #F6F6F5 50%, #9A9DA0 65%, #E2E3E4 85%, #7D8083 100%);

  --plaster:         #ECE9E2;  /* light plate tone — logo mounts, text-on-fill */

  /* brand gold + olive — modern accent colors used for buttons, dividers, hover states,
     and the logo mount (logo artwork itself is now solid white) */
  --gold:            #C9A227;
  --gold-light:      #E4C45B;
  --gold-deep:       #9A7A18;
  --olive:           #5B6B37;
  --olive-deep:      #3A4523;
  --olive-light:     #8A9A5E;
  --logo-plate:      #FFFFFF;  /* white circle plate — original black logo artwork on top */

  /* semantic tokens — flipped inside .section-light */
  --surface:         var(--charcoal-light);
  --surface-border:  rgba(236,233,226,0.14);
  --text-strong:     var(--silver-light);
  --text-muted:      var(--silver-dark);
  --accent:          var(--silver-light);   /* dark surfaces: silver reads far better than burgundy */
  --accent-line:     var(--silver);         /* decorative dashes/lines on dark surfaces */

  --font-display: 'Cinzel Decorative', serif;
  --font-body: 'Trocchi', serif;

  --max-w: 1120px;
  --radius: 14px;
  --radius-sm: 8px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 90px; }

body{
  margin:0;
  background: var(--charcoal);
  color: var(--silver-light);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

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

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* -------------------- light section flip -------------------- */
/* Add class="section-light" to any section/div to switch it to the
   light "brushed steel" palette; components read the semantic
   --surface / --text-strong / --text-muted / --accent vars so they
   automatically adapt without per-component overrides. */
.section-light{
  background: var(--bg-light);
  color: var(--ink);
  --surface: var(--surface-white);
  --surface-border: rgba(28,26,23,0.12);
  --text-strong: var(--ink);
  --text-muted: var(--ink-muted);
  --accent: var(--burgundy);
  --accent-line: var(--burgundy);
}

/* -------------------- olive section flip -------------------- */
/* Add class="section-olive" to any section to give it the same olive-green
   treatment as the hero. Cards and text read the semantic tokens below. */
.section-olive{
  background: linear-gradient(165deg, var(--olive) 0%, var(--olive-deep) 100%);
  color: #F4F3EC;
  --surface: rgba(58,69,35,0.88);
  --surface-border: rgba(255,255,255,0.22);
  --text-strong: #FFFFFF;
  --text-muted: rgba(244,243,236,0.8);
  --accent: var(--gold-light);
  --accent-line: var(--gold);
}
.section-olive .section-head h2{ color: #FFFFFF; }

/* -------------------- translucent tint flips -------------------- */
/* Translucent maroon — Sister Spots page */
.section-maroon{
  background: rgba(59,8,8,0.84);
  color: #F2E9DC;
  --surface: rgba(59,8,8,0.66);
  --surface-border: rgba(201,162,39,0.32);
  --text-strong: #FFFFFF;
  --text-muted: rgba(242,233,220,0.85);
  --accent: var(--gold-light);
  --accent-line: var(--gold);
}
/* Translucent olive — Get In Touch + Locations pages */
.section-olive-tint{
  background: rgba(58,69,35,0.84);
  color: #F4F3EC;
  --surface: rgba(58,69,35,0.66);
  --surface-border: rgba(255,255,255,0.22);
  --text-strong: #FFFFFF;
  --text-muted: rgba(244,243,236,0.82);
  --accent: var(--gold-light);
  --accent-line: var(--gold);
}
/* Whole-page olive background (used on the menu page) */
body.page-olive{
  background: linear-gradient(175deg, var(--olive) 0%, var(--olive-deep) 100%);
  color: #F4F3EC;
}

/* -------------------- solid banner background -------------------- */
/* Charcoal banner used on secondary page headers (replaced the old
   silver sunburst banners). */
.bg-charcoal{ background-color: #262120; }

/* -------------------- corrugated duct texture (shiny) -------------------- */
.duct-band{
  position: relative;
  height: 14px;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.55) 0%, transparent 12%,
      transparent 45%, rgba(255,255,255,.7) 50%,
      transparent 56%, transparent 88%, rgba(255,255,255,.45) 100%),
    repeating-linear-gradient(
      90deg,
      var(--gold-light) 0px, var(--gold-light) 3px,
      var(--gold) 3px, var(--gold) 6px,
      var(--gold-deep) 6px, var(--gold-deep) 7px
    );
  box-shadow: inset 0 2px 3px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.25);
}
.duct-band.thin{ height: 8px; }

/* -------------------- translucent background photography -------------------- */
/* Add class="bg-photo" plus an inline style="--photo-url:url('pictures/gallery-N.png')"
   to any section to lay a faint, full-bleed photo behind its content — breaks up flat
   color fields without competing with the text on top. Use .bg-photo-soft on light
   sections where a lower opacity is needed to keep copy legible. */
.bg-photo{ position:relative; overflow:hidden; }
.bg-photo::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--photo-url);
  background-size: cover;
  background-position: var(--photo-position, center);
  opacity: 0.18;
  filter: grayscale(0.15) contrast(1.05);
  z-index: 0;
  pointer-events: none;
}
.bg-photo.bg-photo-soft::before{ opacity: 0.09; }
.bg-photo > *{ position: relative; z-index: 1; }

/* -------------------- header -------------------- */
header.site-header{
  background: rgba(23,20,15,0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(201,162,39,0.16);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 28px;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: 20px;
}
.brand-mark{
  /* Plate hugs the logo artwork: no fixed square — the outline sits
     just outside the logo, whatever its proportions. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--logo-plate);
  border: 2px solid var(--gold);
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.brand-mark:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.brand-mark img{
  display:block;
  width:auto; height:auto;
  max-height: 52px;
  max-width: min(300px, 52vw);
}

nav.main-nav ul{
  list-style:none;
  display:flex;
  gap: 30px;
  margin:0; padding:0;
}
nav.main-nav a{
  font-family: var(--font-body);
  font-size: 14.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--silver-light);
  position: relative;
  padding-bottom: 4px;
}
nav.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: var(--gold);
  transition: width .25s ease;
}
nav.main-nav a:hover::after,
nav.main-nav a.active::after{ width:100%; }
nav.main-nav a:hover, nav.main-nav a.active{ color: var(--gold-light); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background:none;
  border: 1px solid transparent;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  background: var(--silver-light);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* -------------------- hero -------------------- */
.hero{
  position: relative;
  padding: 84px 28px 66px;
  text-align:center;
  background: linear-gradient(165deg, var(--olive) 0%, var(--olive-deep) 100%);
  color: #F4F3EC;
  overflow:hidden;
  --surface: var(--olive-deep);
  --surface-border: rgba(255,255,255,0.2);
  --text-strong: #FFFFFF;
  --text-muted: rgba(244,243,236,0.75);
  --accent: var(--gold-light);
}

/* Logo + sunburst lockup: the burgundy sunburst radiates from behind the
   circular logo medallion, replacing the old hard-to-read "mauka to makai" ring. */
.hero-logo-lockup{
  position: relative;
  width: min(640px, 94vw);
  aspect-ratio: 1;
  margin: 0 auto 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Outline drawn just outside the sunburst + logo composition */
  border: 2px solid rgba(201,162,39,0.65);
  border-radius: var(--radius);
  padding: 14px;
}
.hero-logo-lockup::before{
  content:"";
  position:absolute;
  inset: 12px;   /* burst sits just inside the outline */
  background: url('pictures/sunburst-burgundy.png') no-repeat center center;
  background-size: contain;
  opacity: 0.85;
  z-index: 0;
}
.hero-mark{
  position: relative;
  z-index: 1;
  /* Plate hugs the logo artwork — no square crop, so the sunburst
     rays stay visible radiating around the large logo. */
  width: 62%;
  border-radius: var(--radius);
  background: var(--logo-plate);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.hero-mark img{ width: 100%; height: auto; display:block; margin: 0 auto; }

.hero .kicker{
  font-family: var(--font-body);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-light);
  font-size: 14px;
  margin-bottom: 6px;
}
.hero-divider{
  width: 90px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 22px auto;
}
.hero .tagline{
  font-family: var(--font-body);
  font-style: italic;
  font-size: 24px;
  color: #FFFFFF;
  max-width: 620px;
  margin: 0 auto 34px;
  line-height: 1.5;
}
.btn-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block;
  font-family: var(--font-body);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  padding: 14px 32px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  background: transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn:hover{ background: var(--accent); color: var(--surface); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.btn.solid{
  background: linear-gradient(120deg, var(--burgundy) 0%, var(--burgundy-light) 100%);
  color: var(--gold-light);
  border-color: var(--gold-deep);
  box-shadow: 0 4px 14px rgba(112,12,12,.3);
}
.btn.solid:hover{ background: linear-gradient(120deg, var(--burgundy-light) 0%, var(--burgundy) 100%); border-color: var(--gold); color: var(--gold-light); box-shadow: 0 10px 22px rgba(112,12,12,.4); }
.btn.silver{ border-color: var(--gold-deep); color: var(--text-strong); }
.btn.silver:hover{ background: var(--gold); border-color: var(--gold); color: var(--charcoal); }

/* -------------------- section shells -------------------- */
section{ padding: 78px 0; }
.section-head{ text-align:center; margin-bottom: 46px; }
.section-head .eyebrow{
  font-family: var(--font-body);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--accent);
}
.section-head h2{
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  color: var(--text-strong);
  margin: 10px 0 0;
}
.rule{
  width: 70px; height: 2px;
  background: var(--surface-border);
  margin: 18px auto 0;
  position: relative;
}
.rule::before, .rule::after{
  content:"";
  position:absolute; top:-3px;
  width:8px; height:8px;
  border-radius:50%;
  background: var(--gold);
}
.rule::before{ left:-14px; }
.rule::after{ right:-14px; }

/* -------------------- story / about -------------------- */
.story{
  background: var(--burgundy-deep);   /* dark burgundy */
  color: var(--gold-light);
}
.story .section-head .eyebrow{ color: var(--gold); }
.story .section-head h2{ color: var(--gold-light); }
.story-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;   /* text left, photo right */
  gap: 28px;
  align-items:center;
}
.story-copy p{ margin: 0 0 18px; color: var(--gold-light); opacity: .95; }
.story-copy p:first-of-type::first-letter{
  font-family: var(--font-display);
  font-size: 46px;
  color: var(--gold);
  float:left;
  line-height: 1;
  padding-right: 10px;
}
.story-photo{
  margin: 0;
  align-self: center;
}
.story-photo img{
  display:block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(192,192,192,0.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.story-photo figcaption{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 12px;
  opacity: .75;
}

/* -------------------- highlights / cards -------------------- */
.highlights-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.highlight-card{
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 34px 28px;
  text-align:center;
  background: var(--surface);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.highlight-card:hover{ border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.highlights .highlight-card{
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.highlight-card .icon-line{
  width: 40px; height: 2px; background: var(--gold);
  margin: 0 auto 18px;
}
.highlight-card h3{
  font-family: var(--font-display);
  font-weight:400;
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--accent);
}
.highlight-card p{ color: var(--text-muted); margin:0; font-size: 15px; }

/* -------------------- visit / info -------------------- */
.visit-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align:center;
}
.visit-item .label{
  font-family: var(--font-body);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 10px;
}
.visit-item .value{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-strong);
  line-height: 1.5;
}
.visit-item .value.small{ font-family: var(--font-body); font-size: 17px; }
.visit-item .placeholder{ color: var(--text-muted); font-style: italic; font-family: var(--font-body); font-size:15px; }

/* Google / Apple Maps links under the address */
.map-links{
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 14px;
}
.map-links a{
  display:inline-flex;
  align-items:center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .2s ease, color .2s ease;
}
.map-links a:hover{ background: var(--accent); color: var(--surface, var(--charcoal)); }
.map-links a svg{ width: 13px; height: 13px; flex-shrink:0; }
footer .map-links{ justify-content:flex-start; margin-top: 6px; }
footer .map-links a{
  color: var(--gold-light);
  border-color: rgba(201,162,39,0.5);
  font-size: 11.5px;
  padding: 6px 13px;
}
footer .map-links a:hover{ background: var(--gold); border-color: var(--gold); color: var(--charcoal); }

/* -------------------- footer -------------------- */
footer{
  background: var(--burgundy-deep);
  color: var(--silver-light);
  padding: 50px 0 26px;
  border-top: 2px solid rgba(201,162,39,0.4);
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap: 40px;
  flex-wrap:wrap;
  margin-bottom: 34px;
}
.footer-brand{ width: 200px; }
.footer-brand .logo-card{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--logo-plate);
  border: 2px solid rgba(201,162,39,0.5);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.footer-brand .logo-card img{
  display:block;
  width:auto; height:auto;
  max-height: 80px;
  max-width: 190px;
}
.footer-col h4{
  font-family: var(--font-body);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--gold-light);
  margin: 0 0 14px;
}
.footer-col p, .footer-col a{
  font-size: 15px;
  color: var(--silver-light);
  margin: 0 0 8px;
  display:block;
  transition: color .2s ease;
}
.footer-col a:hover{ color: var(--gold-light); }
.footer-bottom{
  border-top: 1px solid rgba(236,233,226,0.16);
  padding-top: 20px;
  font-size: 13px;
  color: var(--silver-dark);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 10px;
}

/* -------------------- menu page -------------------- */
.menu-page-header{
  text-align:center;
  padding: 60px 28px 20px;
}
.menu-page-header .logo-inline{ width: 200px; margin: 0 auto 20px; }
.menu-page-header .logo-inline img{ width:100%; height:auto; display:block; margin:0 auto; }

/* -------------------- embedded menu PDF -------------------- */
.menu-embed-wrap{
  max-width: 900px;
  margin: 0 auto 50px;
  padding: 0 28px;
}
.menu-embed-frame{
  border: 10px solid var(--charcoal-light);
  outline: 1px solid rgba(201,162,39,0.35);
  outline-offset: -10px;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  background: #fff;
  width: 100%;
  height: 85vh;
  min-height: 640px;
}
.menu-embed-fallback{
  text-align:center;
  padding: 40px 20px;
  font-family: var(--font-body);
  color: var(--silver-dark);
}
.menu-embed-fallback a{ color: var(--burgundy-light); text-decoration: underline; }

.menu-section{ padding: 50px 0 10px; }
.menu-section h2{
  font-family: var(--font-display);
  font-weight:400;
  font-size: 30px;
  color: var(--accent);
  text-align:center;
  letter-spacing: 2px;
  position:relative;
  margin: 0 0 40px;
}
.menu-section h2::before, .menu-section h2::after{
  content:"";
  display:inline-block;
  width: 40px; height:1px;
  background: var(--surface-border);
  vertical-align: middle;
  margin: 0 16px;
}
.menu-list{ display:flex; flex-direction:column; gap: 26px; }
.menu-item{
  display:grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items:baseline;
  border-bottom: 1px dotted var(--surface-border);
  padding-bottom: 14px;
}
.menu-item .name-line{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.menu-item .name{
  font-family: var(--font-display);
  font-weight:400;
  font-size: 19px;
  color: var(--text-strong);
}
.menu-item .price{
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--gold);
  white-space:nowrap;
}
.menu-item .tag{
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  display:block;
  margin-top: 3px;
}
.menu-item .desc{
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-muted);
  display:block;
  margin-top: 3px;
  grid-column: 1 / -1;
}
.menu-note{
  text-align:center;
  font-style: italic;
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 10px;
}

.wine-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.wine-sub{
  font-family: var(--font-body);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 13px;
  margin: 26px 0 14px;
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: 6px;
}
.wine-sub:first-child{ margin-top:0; }

.download-cta{
  text-align:center;
  padding: 70px 28px;
  margin-top: 40px;
}
.download-cta h3{
  font-family: var(--font-display);
  font-weight:400;
  color: var(--text-strong);
  font-size: 30px;
  margin: 0 0 12px;
}
.download-cta p{
  color: var(--text-muted);
  margin: 0 0 30px;
  font-size: 15px;
}

/* -------------------- locations page -------------------- */
.maps-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-top: 10px;
}
.map-card{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow:hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.map-card:hover{ border-color: var(--gold); box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.map-card .map-card-head{
  padding: 20px 24px;
  border-bottom: 1px solid var(--surface-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.map-card .map-card-head h3{
  font-family: var(--font-display);
  font-weight:400;
  font-size: 21px;
  color: var(--accent);
  margin:0;
}
.map-card iframe{
  width:100%;
  height: 360px;
  border:0;
  display:block;
}
.apple-map-preview{
  height: 360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 18px;
  text-align:center;
  padding: 30px;
  background:
    repeating-linear-gradient(45deg, rgba(28,26,23,0.035) 0 12px, transparent 12px 24px);
}
.apple-map-preview .pin{
  width: 46px; height:46px;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  transform: rotate(-45deg);
  position:relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.apple-map-preview .pin::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:16px; height:16px;
  background: var(--surface);
  border-radius:50%;
  transform: translate(-50%,-50%) rotate(45deg);
}
.apple-map-preview p{ color: var(--text-muted); font-size: 14px; max-width: 280px; margin:0; }
.map-card-foot{
  padding: 16px 24px 22px;
  text-align:center;
}

/* -------------------- contact page -------------------- */
.contact-hero{
  text-align:center;
  padding: 70px 28px 20px;
}
.contact-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.contact-card{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 40px 30px;
  text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.12); border-color: var(--gold); }
.contact-card .label{
  font-family: var(--font-body);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 14px;
}
.contact-card .value{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight:400;
  color: var(--text-strong);
  line-height:1.5;
  margin-bottom: 22px;
}
.contact-card .value.small{ font-family: var(--font-body); font-size:17px; }
.contact-note{
  text-align:center;
  color: var(--text-muted);
  font-size: 15px;
  max-width: 560px;
  margin: 40px auto 0;
}

/* -------------------- posted hours -------------------- */
.hours-list{
  list-style:none;
  margin: 10px 0 0;
  padding: 0;
}
.hours-list li{
  margin: 0 0 10px;
  line-height: 1.5;
}
.hours-list .day{
  display:block;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  opacity: .85;
}

/* -------------------- gallery -------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-grid{ gap: 20px; }
.gallery-grid img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
  border-radius: var(--radius);
  border: 1px solid var(--surface-border);
  transition: transform .35s ease, box-shadow .35s ease;
}
.gallery-grid img:hover{ transform: scale(1.03); box-shadow: 0 16px 30px rgba(0,0,0,.35); }
.gallery-coming-soon{
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius);
  padding: 70px 30px;
  text-align:center;
  background: var(--surface);
}
.gallery-coming-soon .pin-icon{
  width: 44px; height: 2px;
  background: var(--accent);
  margin: 0 auto 22px;
}
.gallery-coming-soon h3{
  font-family: var(--font-display);
  font-weight:400;
  font-size: 26px;
  color: var(--accent);
  margin: 0 0 10px;
}
.gallery-coming-soon p{
  color: var(--text-muted);
  font-size: 15px;
  margin: 0 0 26px;
  max-width: 460px;
  margin-left:auto; margin-right:auto;
}
.btn.instagram{
  border-color: var(--accent);
  color: var(--accent);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn.instagram:hover{ background: var(--accent); color: var(--surface); }
.btn.instagram svg{ width:16px; height:16px; }

/* -------------------- sister restaurants page -------------------- */
.sisters-intro{
  text-align:center;
  max-width: 720px;
  margin: 0 auto 50px;
  color: var(--text-muted);
  font-size: 16.5px;
}
.sisters-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.sister-card{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 0 32px;
  text-align:center;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sister-card:hover{ border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.sister-card .sister-banner{
  height: 8px;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.55) 0%, transparent 12%,
      transparent 45%, rgba(255,255,255,.7) 50%,
      transparent 56%, transparent 88%, rgba(255,255,255,.45) 100%),
    repeating-linear-gradient(
      90deg,
      var(--gold-light) 0px, var(--gold-light) 3px,
      var(--gold) 3px, var(--gold) 6px,
      var(--gold-deep) 6px, var(--gold-deep) 7px
    );
}
.sister-card .sister-body{ padding: 34px 30px 0; }
.sister-card .kicker{
  font-family: var(--font-body);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 10px;
}
.sister-card h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--text-strong);
  margin: 0 0 14px;
}
.sister-card p.desc{
  color: var(--text-muted);
  font-size: 15px;
  margin: 0 0 18px;
  line-height: 1.65;
}
.sister-card .addr{
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}
.sister-card .btn{ margin-top: 4px; }

/* =========================================================
   RESPONSIVE — tablet (iPad) and phone
   Breakpoints: 1024px (iPad landscape ceiling for minor tuning),
   900px (nav collapses to hamburger; iPad portrait and below),
   600px (phone), 380px (small phone)
   ========================================================= */

@media (max-width: 1024px){
  .container{ padding: 0 24px; }
  .header-inner{ padding: 16px 24px; }
  .maps-grid{ gap: 24px; }
}

@media (max-width: 900px){
  .header-inner{ flex-wrap: nowrap; position: relative; }
  header.site-header{ position: relative; }
  .nav-toggle{ display:flex; }
  .brand-mark img{ max-height: 48px; max-width: min(240px, 50vw); }

  nav.main-nav{
    position: absolute;
    top: 100%; left:0; right:0;
    background: var(--charcoal);
    border-bottom: 1px solid rgba(236,233,226,0.14);
    box-shadow: 0 12px 20px rgba(0,0,0,.4);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    z-index: 40;
  }
  nav.main-nav.open{ max-height: 480px; }
  nav.main-nav ul{ flex-direction: column; gap: 0; padding: 6px 24px 18px; }
  nav.main-nav li{ border-bottom: 1px solid rgba(236,233,226,0.12); }
  nav.main-nav li:last-child{ border-bottom: 0; }
  nav.main-nav a{ display:block; padding: 15px 2px; font-size: 14px; }
  nav.main-nav a::after{ display:none; }

  section{ padding: 58px 0; }
  .section-head{ margin-bottom: 34px; }
  .section-head h2{ font-size: 32px; }

  .hero{ padding: 56px 24px 46px; }
  .hero-logo-lockup{ width: min(520px, 88vw); }
  .hero .tagline{ font-size: 20px; }

  .story{ padding: 48px 0; }
  .story .section-head{ margin-bottom: 26px; }
  .story-grid{ grid-template-columns: 1fr; gap: 20px; }
  .story-photo{ max-width: min(480px, 90vw); margin: 8px auto 0; }
  .highlights-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .visit-grid{ grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .wine-columns{ grid-template-columns: 1fr; gap: 10px; }
  .maps-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .sisters-grid{ grid-template-columns: 1fr; }

  .footer-grid{ flex-direction: column; gap: 30px; }

  .menu-embed-frame{ height: 75vh; min-height: 480px; }
}

@media (max-width: 600px){
  body{ font-size: 16px; }
  .container{ padding: 0 20px; }
  .header-inner{ padding: 14px 20px; }
  .brand-mark{ padding: 4px 8px; }
  .brand-mark img{ max-height: 42px; max-width: min(200px, 48vw); }

  .story{ padding: 40px 0; }

  .hero{ padding: 40px 20px 38px; }
  .hero-logo-lockup{ width: min(420px, 94vw); margin-bottom: 18px; padding: 10px; }
  .hero-logo-lockup::before{ inset: 8px; }
  .hero-mark{ width: 66%; padding: 12px 14px; }
  .hero .tagline{ font-size: 18px; }
  .hero .kicker{ font-size: 12px; letter-spacing: 3px; }
  .btn-row{ flex-direction: column; align-items: stretch; gap: 12px; }
  .btn{ text-align:center; padding: 14px 20px; }

  section{ padding: 46px 0; }
  .section-head h2{ font-size: 26px; }
  .section-head .eyebrow{ font-size: 12px; }

  .story-copy p{ font-size: 15.5px; }
  .highlights-grid{ grid-template-columns: 1fr; gap: 18px; }
  .visit-grid{ grid-template-columns: 1fr; gap: 26px; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-grid img{ height: 220px; }
  .gallery-coming-soon{ padding: 46px 20px; }
  .sisters-grid{ grid-template-columns: 1fr; }

  .footer-bottom{ flex-direction: column; text-align:center; gap: 6px; }
  .footer-brand .logo-card img{ max-height: 64px; max-width: 160px; }

  .menu-page-header{ padding: 44px 20px 10px; }
  .menu-page-header h1, .contact-hero h1{ font-size: 32px !important; }
  .menu-embed-frame{ height: 65vh; min-height: 380px; border-width: 6px; }
  .download-cta{ padding: 50px 20px; }
  .download-cta h3{ font-size: 24px; }
  .menu-item{ grid-template-columns: 1fr; }
  .menu-item .price{ margin-top: 2px; }
  .menu-section h2{ font-size: 24px; }

  .map-card iframe, .apple-map-preview{ height: 280px; }
  .map-card .map-card-head h3{ font-size: 18px; }

  .hours-list li{ font-size: 15px; }
  .contact-card{ padding: 30px 22px; }
  .contact-card .value{ font-size: 19px; }
}

@media (max-width: 380px){
  .container{ padding: 0 16px; }
  .header-inner{ padding: 12px 16px; }
  .brand-mark img{ max-height: 38px; max-width: min(170px, 46vw); }
  .hero .tagline{ font-size: 16.5px; }
  .section-head h2{ font-size: 23px; }
  nav.main-nav ul{ padding: 6px 16px 16px; }
}