/* =========================================================
   LE CAFÉ BAR — Zürich
   Coffee by day. Cocktails after dark.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; }

/* ---------- Design tokens ---------- */
:root{
  /* palette — day (default) */
  --cream:        #F7EEDC;
  --cream-soft:   #FBF6EC;
  --cream-dim:    #EFE1C4;
  --clay:         #C97350;
  --terracotta:   #C6511F;
  --terracotta-2: #E07C3E;
  --terracotta-deep:#9C3B18;
  --green:        #2B5C41;
  --green-deep:   #1B3A28;
  --green-soft:   #4C7A5C;
  --ink:          #241B12;
  --ink-soft:     #4B4136;

  --bg:           var(--cream);
  --bg-raised:    var(--cream-soft);
  --bg-sunken:    var(--cream-dim);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --accent:       var(--terracotta);
  --accent-2:     var(--green);
  --line:         rgba(36,27,18,0.14);
  --shadow:       0 30px 60px -30px rgba(36,27,18,0.35);
  --header-text:  var(--ink);
  --header-bg:    rgba(247,238,220,0.86);
  --grain-opacity: 0.05;

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Manrope', -apple-system, sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;

  --ease: cubic-bezier(.22,.68,.29,.99);
}

html[data-time="night"]{
  --bg:           var(--green-deep);
  --bg-raised:    #234431;
  --bg-sunken:    #142a1e;
  --text:         var(--cream-soft);
  --text-soft:    #CFE0D2;
  --accent:       var(--terracotta-2);
  --accent-2:     var(--cream);
  --line:         rgba(247,238,220,0.16);
  --shadow:       0 40px 80px -30px rgba(0,0,0,0.6);
  --header-text:  var(--cream-soft);
  --header-bg:    rgba(19,38,27,0.82);
  --grain-opacity: 0.08;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .8s var(--ease), color .8s var(--ease);
  overflow-x: hidden;
  position: relative;
}

/* subtle film-grain overlay for the whole document */
body::before{
  content:"";
  position: fixed; inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; }

.eyebrow{
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before{ content:""; width: 28px; height: 1px; background: currentColor; display:inline-block; }

.lede{ font-size: clamp(1.05rem, 1.3vw, 1.35rem); color: var(--text-soft); max-width: 46ch; }

/* accent-é bounce (Le Café brand motif) */
.bounce-e{ display:inline-block; transition: transform .35s var(--ease); }
.wordmark:hover .bounce-e, .brand:hover .bounce-e{ transform: translateY(-.14em) rotate(-6deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-body); font-weight: 700; font-size: .85rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 1em 1.7em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn-solid{ background: var(--accent); border-color: var(--accent); color: var(--cream-soft); }
.btn-solid:hover{ transform: translateY(-2px); background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.btn-outline{ color: var(--text); }
.btn-outline:hover{ background: var(--text); color: var(--bg); transform: translateY(-2px); }
.btn-arrow::after{ content:"→"; transition: transform .3s var(--ease); }
.btn-arrow:hover::after{ transform: translateX(4px); }

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 900;
  padding: 18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  background: transparent;
  color: #F7EEDC;
  transition: color .5s var(--ease), padding .4s var(--ease);
}
/* the blur/tint lives on a ::before, not on .site-header itself — backdrop-filter on
   an ancestor makes it the containing block for fixed descendants, which would trap
   the full-screen mobile nav panel inside the header's own (tiny) box. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; background: transparent;
  transition: background-color .5s var(--ease), backdrop-filter .5s;
}
.site-header.is-scrolled{ color: var(--header-text); padding-block: 12px; box-shadow: 0 1px 0 var(--line); }
.site-header.is-scrolled::before{ background: var(--header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.page-inner .site-header{ color: var(--header-text); box-shadow: 0 1px 0 var(--line); }
body.page-inner .site-header::before{ background: var(--header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

.brand{ font-family: var(--font-display); font-size: clamp(1.15rem,3.6vw,1.5rem); font-weight: 600; display:flex; align-items:center; white-space:nowrap; flex-shrink:0; }
.brand small{ display:block; font-family: var(--font-body); font-size: .55rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; opacity:.75; margin-top: 2px; }

.nav-primary{ display:flex; align-items:center; gap: clamp(18px, 2.4vw, 40px); }
.nav-primary a{
  font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
  position: relative; padding-bottom: 4px;
}
.nav-primary a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: currentColor;
  transition: right .35s var(--ease);
}
.nav-primary a:hover::after, .nav-primary a.active::after{ right:0; }

.header-tools{ display:flex; align-items:center; gap: 14px; flex-shrink:0; }
.nav-reserve-mobile{ display:none; }
.nav-primary .lang-toggle-mobile{ display:none; }

/* shared pill look for the three header toggles (vibe / day-night / language) —
   each keeps its own class purely as a unique JS hook, so selectors never collide. */
.pill-toggle{
  display:flex; align-items:center; gap:.5em; border:1px solid currentColor; border-radius:999px; padding:6px 12px 6px 10px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.pill-toggle .dot{ width:7px; height:7px; border-radius:50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.vibe-toggle .dot{ background:#D9483A; box-shadow: 0 0 0 3px rgba(217,72,58,.25); animation:none; }
.vibe-toggle.is-playing .dot{ background:#3FAE64; box-shadow: 0 0 0 0 rgba(63,174,100,.6); animation: pulse-green 1.6s infinite; }
@keyframes pulse-green{
  0%{ box-shadow:0 0 0 0 rgba(63,174,100,.55); }
  70%{ box-shadow:0 0 0 10px rgba(63,174,100,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,174,100,0); }
}

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-toggle span{ height:2px; background: currentColor; border-radius:1px; }

/* ---------- Hero ---------- */
.hero{
  position: relative; min-height: 100svh; display:flex; flex-direction:column; justify-content:flex-start;
  overflow:hidden; color:#F9F1DF; isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(15,26,19,.35) 0%, rgba(15,26,19,.25) 40%, rgba(12,22,16,.86) 100%),
    linear-gradient(90deg, rgba(12,22,16,.55), rgba(12,22,16,.05) 55%);
  transition: opacity .4s linear;
}
.hero-scrim.night-layer{ background: linear-gradient(180deg, rgba(12,22,16,.15), rgba(12,22,16,.95)); opacity:0; }

.hero-inner{ padding: clamp(120px,17vw,180px) var(--gutter) 0; position:relative; }
.hero-eyebrow{ color:#F2CBA8; margin-bottom: 18px; }
.hero-title{
  font-size: clamp(3.4rem, 11vw, 9rem);
  font-weight: 600; letter-spacing:-0.02em; text-transform:none;
  display:flex; flex-wrap:wrap; gap: 0 .08em;
}
.hero-title span.pull{ font-style: italic; font-weight: 400; }
.hero-sub{ margin-top: 20px; max-width: 40ch; font-size: clamp(1.05rem,1.6vw,1.4rem); color:#F1E7D3; }
.hero-address{ margin-top: 10px; font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; color:#F2CBA8; font-weight:700; }

.hero-hook{
  margin-top: clamp(28px,4vw,46px);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding: 14px 20px; border: 1px solid rgba(247,238,220,.35); border-radius: 999px;
  background: rgba(15,26,19,.35); backdrop-filter: blur(6px);
  width: fit-content; font-size:.92rem;
}
.hero-hook .pulse{ width:9px; height:9px; border-radius:50%; background: var(--terracotta-2); box-shadow: 0 0 0 0 rgba(224,124,62,.7); animation: pulse 2.2s infinite; flex:none; }
.kitchen-status{ font-weight:800; }
.kitchen-status.is-open{ color:#3FAE64; animation: blink-green 1.4s steps(1,end) infinite; }
.kitchen-status.is-closed{ color:#E14B3D; opacity:1; }
@keyframes blink-green{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.32; } }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(224,124,62,.55); }
  70%{ box-shadow:0 0 0 10px rgba(224,124,62,0); }
  100%{ box-shadow:0 0 0 0 rgba(224,124,62,0); }
}
.hero-scrolldown{ position:absolute; right: var(--gutter); bottom: 40px; writing-mode: vertical-rl; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:10px; opacity:.8; }
.hero-scrolldown::after{ content:""; width:1px; height:46px; background:currentColor; display:block; }

/* floating hand-drawn glass motif */
.hand-motif{ position:absolute; pointer-events:none; z-index:5; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.hand-motif img{ width:100%; }
@media (max-width: 700px){
  .table-waiting .hand-motif{ width:80px !important; }
}

/* ---------- Editorial section basics ---------- */
section{ position:relative; }
.section-pad{ padding-block: clamp(70px, 10vw, 150px); }
.statement{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2rem, 4.6vw, 4.4rem); line-height:1.05; letter-spacing:-0.01em;
}
.statement em{ color: var(--accent); font-style:italic; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,80px); align-items:center; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform: scale(.94); }
.reveal-scale.is-visible{ opacity:1; transform:none; }

/* ---------- Intro statement section ---------- */
.intro{ text-align:center; }
.intro .statement{ max-width: 18ch; margin-inline:auto; }
.intro-kicker{ margin-top: 26px; display:flex; justify-content:center; gap: 10px; flex-wrap:wrap; }
.pill{ border:1px solid var(--line); border-radius:999px; padding: 8px 16px; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color: var(--text-soft); }

/* ---------- Day / Night split ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.split-panel{ position:relative; padding: clamp(40px,5vw,90px) clamp(24px,4vw,70px); display:flex; flex-direction:column; justify-content:flex-end; min-height: 460px; overflow:hidden; color:#fff; }
.split-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform 1.4s var(--ease), filter .8s var(--ease); filter: brightness(1); }
.split-panel:hover img{ transform: scale(1.06); }
.split-day:hover img{ filter: brightness(1.3) saturate(1.08); }
.split-night:hover img{ filter: brightness(0.55); }
.split-panel::before{ content:""; position:absolute; inset:0; z-index:1; }
.split-day::before{ background: linear-gradient(180deg, rgba(159,86,45,.15), rgba(60,32,17,.82)); }
.split-night::before{ background: linear-gradient(180deg, rgba(15,30,21,.25), rgba(9,20,14,.9)); }
.split-content{ position:relative; z-index:2; }
.split-tag{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800; opacity:.85; }
.split-title{ font-size: clamp(2.6rem,5vw,4.6rem); margin-top:10px; }
.split-list{ margin-top: 16px; font-size: 1.05rem; opacity:.92; }
.split-list span:not(:last-child)::after{ content:" · "; opacity:.6; }
.split[data-active="day"] .split-day, .split[data-active="night"] .split-night{ flex: 1.15; }

/* ---------- Now at Le Café ---------- */
.now-strip{
  display:flex; flex-wrap:wrap; gap: 14px 28px; align-items:center; justify-content:center;
  padding: 22px var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; font-weight:700; color: var(--text-soft);
}
.now-strip strong{ color: var(--text); }
.now-strip .sep{ opacity:.4; }
.now-strip .dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); display:inline-block; margin-right:8px; animation: pulse 2.2s infinite; }

/* ---------- Drinks showcase (editorial) ---------- */
.showcase-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 30px; flex-wrap:wrap; margin-bottom: clamp(30px,5vw,60px); }
.cocktail-rail{ display:grid; grid-auto-flow:column; grid-auto-columns: min(78vw, 420px); gap: 22px; overflow-x:auto; padding-bottom: 22px; }

/* visible, draggable scroll track for every horizontal rail — lets people fast-track
   through cards with the bar itself, not just by hovering to auto-scroll. */
.cocktail-rail, .ig-rail{ scrollbar-width: thin; scrollbar-color: var(--accent) var(--line); }
.cocktail-rail::-webkit-scrollbar, .ig-rail::-webkit-scrollbar{ height:9px; }
.cocktail-rail::-webkit-scrollbar-track, .ig-rail::-webkit-scrollbar-track{ background: var(--line); border-radius:5px; }
.cocktail-rail::-webkit-scrollbar-thumb, .ig-rail::-webkit-scrollbar-thumb{ background: var(--accent); border-radius:5px; border: 2px solid transparent; background-clip: padding-box; }
.cocktail-rail::-webkit-scrollbar-thumb:hover, .ig-rail::-webkit-scrollbar-thumb:hover{ background: var(--terracotta-deep); background-clip: padding-box; }

.cocktail-card{
  position:relative; scroll-snap-align:start; border-radius: 6px; overflow:hidden;
  aspect-ratio: 3/4.2; color:#fff; background: var(--ink);
  box-shadow: var(--shadow);
}
.cocktail-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease), filter .8s; }
.cocktail-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,16,12,0) 35%, rgba(10,16,12,.92) 100%); transition: opacity .5s; }
.cocktail-card:hover img{ transform: scale(1.07) rotate(-.6deg); }
.cocktail-info{ position:absolute; left:0; right:0; bottom:0; padding: 22px 22px 26px; z-index:2; }
.cocktail-name{ font-family: var(--font-display); font-size: 1.7rem; }
.cocktail-note{ font-size:.9rem; opacity:.85; font-style:italic; margin-top:4px; }
.cocktail-ing{
  margin-top:0; max-height:0; display:flex; flex-wrap:wrap; gap:6px 8px; opacity:0; transform: translateY(6px);
  overflow:hidden; pointer-events:none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), margin-top .4s var(--ease);
}
.cocktail-card:hover .cocktail-ing, .cocktail-card:focus-within .cocktail-ing{
  margin-top:14px; max-height:320px; opacity:1; transform:none; pointer-events:auto;
}
.cocktail-ing span{ font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:4px 10px; white-space:nowrap; }
.cocktail-garnish{ position:absolute; top:20px; right:20px; z-index:2; width:40px; height:40px; opacity:.9; transition: transform .6s var(--ease); }
.cocktail-card:hover .cocktail-garnish{ transform: rotate(25deg); }

/* ---------- What's on ---------- */
.event-feature{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,70px); align-items:center; }
.event-feature img{ border-radius:4px; box-shadow: var(--shadow); }
.event-meta{ display:flex; gap:22px; flex-wrap:wrap; margin: 22px 0; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color: var(--text-soft); }
.lineup{ margin-top: 26px; border-top:1px solid var(--line); }
.lineup-row{ display:flex; justify-content:space-between; gap:20px; padding: 16px 0; border-bottom:1px solid var(--line); }
.lineup-time{ font-weight:700; color: var(--accent); min-width: 120px; }
.lineup-act{ font-family: var(--font-display); font-size:1.25rem; }

.events-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 50px; }
.event-card{ background: var(--bg-raised); border-radius: 6px; overflow:hidden; border:1px solid var(--line); transition: transform .4s var(--ease); cursor: pointer; }
.event-card:hover{ transform: translateY(-6px); }
.event-card figure{ aspect-ratio: 4/3; overflow:hidden; }
.event-card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.event-card:hover img{ transform: scale(1.08); }
.event-card-body{ padding: 20px 22px 26px; }
.event-card-date{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--accent); font-weight:800; }
.event-card h3{ margin-top:8px; font-size:1.3rem; }

/* ---------- Testimonials carousel ---------- */
.testi-wrap{ overflow:hidden; position:relative; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testi-track{ display:flex; gap: 22px; width: max-content; animation: scroll-left 46s linear infinite; }
.testi-wrap:hover .testi-track{ animation-play-state: paused; }
@keyframes scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.testi-card{ width: min(86vw, 380px); flex:none; background: var(--bg-raised); border:1px solid var(--line); border-radius:6px; padding: 26px; display:flex; flex-direction:column; gap:14px; }
.testi-stars{ color: var(--accent); letter-spacing:.15em; }
.testi-quote{ font-size:.98rem; color: var(--text-soft); flex:1; }
.testi-name{ font-family: var(--font-display); font-size:1.1rem; }
.testi-sub{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-soft); opacity:.7; }

/* ---------- Seen at Le Café (IG carousel) ---------- */
.ig-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; }
.ig-rail{ display:grid; grid-auto-flow:column; grid-auto-columns: min(78vw,380px); gap:20px; overflow-x:auto; overflow-y:visible; margin-top: 40px; padding:10px 10px 20px; }
.ig-rail figure{ position:relative; aspect-ratio: 4/5; border-radius:4px; overflow:hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); transform-origin:center; }
.ig-rail img, .ig-rail video{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.ig-rail figure:hover{ transform: scale(1.16); z-index:6; box-shadow: var(--shadow); }
.ig-rail figure:hover img, .ig-rail figure:hover video{ transform: scale(1.06); }
.ig-rail figcaption{ position:absolute; left:12px; bottom:12px; color:#fff; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; opacity:0; transition:opacity .3s; display:flex; align-items:center; gap:6px; }
.ig-rail figcaption .mute-hint{ opacity:.75; font-size:.9em; }
.ig-rail figure::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6)); opacity:0; transition:opacity .3s; pointer-events:none; }
.ig-rail figure:hover::after, .ig-rail figure:hover figcaption{ opacity:1; }

/* ---------- Your table is waiting ---------- */
.table-waiting{ position:relative; min-height: 70vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.table-waiting img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.table-waiting::before{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(10,16,12,.88) 30%, rgba(10,16,12,.25) 100%); }
.tw-title{ font-size: clamp(2.4rem,6vw,5.4rem); }
.tw-details{ margin-top:22px; font-size:1.05rem; line-height:1.9; }
.tw-details a{ text-decoration: underline; text-underline-offset:4px; }
.tw-cta{ margin-top: 30px; }

/* ---------- Footer ---------- */
.site-footer{ padding: clamp(50px,7vw,90px) 0 30px; background: var(--green-deep); color: var(--cream-soft); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 46px; border-bottom:1px solid rgba(247,238,220,.15); }
.footer-brand .brand{ font-size:2rem; }
.footer-tag{ margin-top:14px; color:#CFE0D2; max-width:32ch; }
.footer-social{ margin-top:22px; display:flex; gap:14px; }
.footer-social a{ border:1px solid rgba(247,238,220,.4); border-radius:999px; padding:9px 16px; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700; transition: background .3s, color .3s; }
.footer-social a:hover{ background:#F7EEDC; color: var(--green-deep); }
.footer-col h4{ font-family: var(--font-body); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; opacity:.7; }
.footer-col li, .footer-col p{ margin-bottom:10px; color:#E7EDE4; font-size:.94rem; }
.footer-col a:hover{ text-decoration:underline; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:26px; font-size:.78rem; color:#9FB6A5; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding: clamp(150px,20vw,220px) 0 60px; position:relative; overflow:hidden; }
.page-hero-title{ font-size: clamp(3rem,8vw,6.4rem); }
.page-hero .lede{ margin-top:18px; }
#reserve{ scroll-margin-top: 84px; }
.page-hero-compact{ padding: clamp(96px,12vw,130px) 0 22px; }
.page-hero-compact .page-hero-title{ font-size: clamp(2.1rem,5.6vw,3.4rem); }
.page-hero-compact .lede{ margin-top:8px; font-size:1rem; }
.page-hero-bg{ position:absolute; inset:0; z-index:-1; opacity:.16; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Menu lists (drinks/food pages) ---------- */
.menu-block{ margin-top: 70px; }
.menu-block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom: 2px solid var(--text); padding-bottom: 14px; margin-bottom: 6px; }
.menu-block-head h2{ font-size: clamp(1.8rem,3vw,2.6rem); }
.menu-item{ display:grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items:start; }
.menu-item-name{ font-family: var(--font-display); font-size:1.25rem; display:flex; align-items:baseline; gap:10px; }
.menu-item-tag{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--accent); color: var(--accent); border-radius:999px; padding:2px 8px; font-weight:800; }
.menu-item-desc{ grid-column:1/2; color: var(--text-soft); font-size:.92rem; max-width:56ch; }
.menu-item-price{ font-family: var(--font-display); font-size:1.15rem; color: var(--accent); white-space:nowrap; }

.menu-gallery{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top:50px; }
.menu-gallery img{ aspect-ratio:3/4; object-fit:cover; border-radius:4px; }
.menu-gallery li:nth-child(2){ margin-top: 40px; }
.menu-gallery li:nth-child(4){ margin-top: -20px; }

/* ---------- Visit page / reservation ---------- */
.visit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,90px); align-items:start; }
.info-card{ background: var(--bg-raised); border:1px solid var(--line); border-radius:6px; padding: clamp(20px,3vw,36px); }
.hours-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.hours-table tr{ border-bottom:1px solid var(--line); }
.hours-table td{ padding: 7px 0; font-size:.92rem; }
.hours-table td:first-child{ text-transform:uppercase; font-weight:700; letter-spacing:.04em; color: var(--text-soft); width:40%; }
.hours-table tr.today td{ color: var(--accent); font-weight:800; }
.contact-list li{ display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.contact-list li:last-child{ border-bottom:none; }
.contact-list .k{ min-width:110px; text-transform:uppercase; font-size:.72rem; letter-spacing:.07em; font-weight:800; color: var(--text-soft); padding-top:3px; }

.res-form{ display:grid; gap:12px; }
.res-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color: var(--text-soft); }
.field input, .field select, .field textarea{
  background: var(--bg-raised); border:1px solid var(--line); border-radius:3px; padding: 10px 13px; font-size:.94rem; color: var(--text);
  transition: border-color .3s;
}
.field textarea{ resize:vertical; min-height:44px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--accent); }
.form-note{ font-size:.82rem; color: var(--text-soft); }
.map-embed{ margin-top: 18px; border-radius:6px; overflow:hidden; border:1px solid var(--line); filter: grayscale(.25) contrast(1.05); }
.map-embed iframe{ width:100%; height:220px; border:0; display:block; }

/* ---------- event image lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center;
  background: rgba(10,16,12,.92); padding: clamp(20px,6vw,80px);
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(247,238,220,.4); color:#F7EEDC; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition: background-color .3s;
}
.lightbox-close:hover{ background: rgba(247,238,220,.15); }

/* ---------- scroll glass (playful scroll-progress motif) ---------- */
.scroll-glass{ position: fixed; left: 22px; bottom: 22px; z-index: 850; color: var(--text); opacity:.8; pointer-events:none; transition: opacity .4s; mix-blend-mode: normal; }
.scroll-glass .liquid{ transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .1s linear; }
@media (max-width: 700px){ .scroll-glass{ display:none; } }

/* ---------- form status ---------- */
.form-status{ display:none; padding: 14px 16px; border-radius: 4px; background: var(--bg-sunken); border:1px solid var(--line); font-size:.9rem; }
.form-status.is-visible{ display:block; }

/* ---------- misc ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 20px 0; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:40px; animation: marquee 26s linear infinite; }
.marquee span{ font-family: var(--font-display); font-size: clamp(1.4rem,2.6vw,2.2rem); }
.marquee span.hollow{ -webkit-text-stroke: 1px var(--text); color: transparent; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

.skip-link{ position:absolute; left:-999px; top:auto; }
.skip-link:focus{ left: 16px; top: 16px; background: var(--accent); color:#fff; padding: 10px 16px; z-index: 3000; border-radius:4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .grid-2, .split, .visit-grid, .event-feature{ grid-template-columns: 1fr; }
  .visit-grid #reserve{ order:-1; }
  .events-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
  .nav-primary{
    position:fixed; inset: 0 0 0 24%; background: var(--green-deep); color:#F7EEDC;
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap: 20px;
    padding: 100px var(--gutter) 40px; overflow-y:auto;
    transform: translateX(105%); transition: transform .5s var(--ease); z-index: 950;
  }
  .nav-primary.is-open{ transform: translateX(0); }
  .nav-primary a{ font-size:1.15rem; }
  .nav-toggle{ display:flex; }
  .header-tools .lang-toggle-single{ display:none; }
  .header-tools > .btn-solid{ display:none; }
  .header-tools .pill-toggle .label{ display:none; }
  .header-tools .pill-toggle{ padding: 8px; }
  .nav-reserve-mobile{ display:inline-flex; margin-top:10px; }
  .nav-primary .lang-toggle-mobile{ display:flex; margin-top:4px; color:#F7EEDC; }
  .events-grid{ grid-template-columns: 1fr; }
  .menu-gallery{ grid-template-columns: repeat(2,1fr); }
  .menu-gallery li:nth-child(2), .menu-gallery li:nth-child(4){ margin-top:0; }
  .res-row{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .now-strip{ font-size:.72rem; gap:10px 18px; }
  .footer-bottom{ flex-direction:column; }
}