/* =========================================================
   TZIRAF — Self Service Coffee Bar
   Palette ref: tziraf.gr  |  Font: Roboto
   ========================================================= */

:root {
  /* Brand palette (από το reference) */
  --c-coffee:    #C77435;   /* THE COFFEE card */
  --c-drinks:    #CFCFCF;   /* THE DRINKS card */
  --c-food:      #56D0B7;   /* THE FOOD card */
  --c-cocktails: #F27039;   /* THE COCKTAILS card */

  /* Neutrals */
  --c-bg:        #F7E0BD;   /* page background — warm gold cream */
  --c-bg-alt:    #F0D4A6;   /* alt blocks */
  --c-surface:   #2A2624;   /* footer dark */
  --c-ink:       #3D3939;   /* primary text */
  --c-ink-soft:  #6B6562;   /* secondary text */
  --c-muted:     #A9A29B;   /* tertiary / dividers */
  --c-accent:    #B87219;   /* hover amber */
  --c-line:      rgba(61, 57, 57, 0.14);

  /* Brand — matches the neon storefront sign */
  --c-brand:     #FF4E1A;   /* vivid neon coral-orange */

  /* Typography */
  --ff-sans:  "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-serif: "EB Garamond", "Times New Roman", Georgia, serif;

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --max-w: 1280px;
  --radius: 2px;

  /* Motion */
  --ease-out:       cubic-bezier(.22,.61,.36,1);
  --ease-in-out:    cubic-bezier(.65,.05,.36,1);
  --ease-cinematic: cubic-bezier(.77,0,.18,1);
  --t-fast: 220ms;
  --t-med:  480ms;
  --t-slow: 900ms;
  --t-panel: 850ms;

  /* Faint giraffe-skin texture (nod to ΤΖΙΡΑΦ = giraffe). Seamless 240px tile. */
  --giraffe: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%20viewBox='0%200%20240%20240'%3E%3Cg%20fill='%236d4a25'%20fill-opacity='0.055'%3E%3Cpolygon%20points='-14,25%20-25,-4%20-20,-27%2011,-34%2031,-11%2031,14%2014,40'/%3E%3Cpolygon%20points='-14,265%20-25,236%20-20,213%2011,206%2031,229%2031,254%2014,280'/%3E%3Cpolygon%20points='226,25%20215,-4%20220,-27%20251,-34%20271,-11%20271,14%20254,40'/%3E%3Cpolygon%20points='226,265%20215,236%20220,213%20251,206%20271,229%20271,254%20254,280'/%3E%3Cpolygon%20points='133,10%20112,36%2081,33%2059,4%2064,-28%20102,-37%20120,-18'/%3E%3Cpolygon%20points='133,250%20112,276%2081,273%2059,244%2064,212%20102,203%20120,222'/%3E%3Cpolygon%20points='162,40%20142,21%20148,-12%20169,-28%20191,-28%20205,-11%20207,20%20186,39'/%3E%3Cpolygon%20points='162,280%20142,261%20148,228%20169,212%20191,212%20205,229%20207,260%20186,279'/%3E%3Cpolygon%20points='-30,20%20-18,-22%2014,-26%2048,-7%2028,32%207,40'/%3E%3Cpolygon%20points='-30,260%20-18,218%2014,214%2048,233%2028,272%207,280'/%3E%3Cpolygon%20points='210,20%20222,-22%20254,-26%20288,-7%20268,32%20247,40'/%3E%3Cpolygon%20points='210,260%20222,218%20254,214%20288,233%20268,272%20247,280'/%3E%3Cpolygon%20points='69,82%2054,103%2018,107%209,76%2026,36%2063,45'/%3E%3Cpolygon%20points='159,47%20155,81%20136,95%20109,93%2094,79%2096,50%20120,40'/%3E%3Cpolygon%20points='-58,72%20-37,58%201,57%2010,100%20-15,114%20-53,117'/%3E%3Cpolygon%20points='182,72%20203,58%20241,57%20250,100%20225,114%20187,117'/%3E%3Cpolygon%20points='24,79%2029,50%2060,42%2085,43%2081,82%2062,98%2030,107'/%3E%3Cpolygon%20points='-3,128%2033,126%2050,167%2023,188%20-20,188%20-27,146'/%3E%3Cpolygon%20points='237,128%20273,126%20290,167%20263,188%20220,188%20213,146'/%3E%3Cpolygon%20points='88,110%20114,125%20126,145%20115,177%2076,175%2051,151%2070,122'/%3E%3Cpolygon%20points='214,157%20183,180%20161,147%20164,114%20194,97%20216,120'/%3E%3Cpolygon%20points='28,112%2054,122%2071,148%2054,166%2022,181%2010,166%20-13,148%2010,119'/%3E%3Cpolygon%20points='268,112%20294,122%20311,148%20294,166%20262,181%20250,166%20227,148%20250,119'/%3E%3Cpolygon%20points='75,-33%2065,-12%2054,10%2018,-4%207,-32%2013,-60%2034,-62%2059,-57'/%3E%3Cpolygon%20points='75,207%2065,228%2054,250%2018,236%207,208%2013,180%2034,178%2059,183'/%3E%3Cpolygon%20points='110,21%2094,3%2099,-36%20122,-49%20152,-49%20157,-27%20166,5%20137,22'/%3E%3Cpolygon%20points='110,261%2094,243%2099,204%20122,191%20152,191%20157,213%20166,245%20137,262'/%3E%3Cpolygon%20points='-11,14%20-48,7%20-66,-22%20-41,-47%20-12,-47%2010,-22'/%3E%3Cpolygon%20points='-11,254%20-48,247%20-66,218%20-41,193%20-12,193%2010,218'/%3E%3Cpolygon%20points='229,14%20192,7%20174,-22%20199,-47%20228,-47%20250,-22'/%3E%3Cpolygon%20points='229,254%20192,247%20174,218%20199,193%20228,193%20250,218'/%3E%3Cpolygon%20points='28,-6%2034,-36%2061,-62%2077,-55%20104,-37%2093,-10%2077,14%2040,9'/%3E%3Cpolygon%20points='28,234%2034,204%2061,178%2077,185%20104,203%2093,230%2077,254%2040,249'/%3E%3Cpolygon%20points='22,10%2038,38%2025,62%20-14,70%20-21,32%20-6,3'/%3E%3Cpolygon%20points='262,10%20278,38%20265,62%20226,70%20219,32%20234,3'/%3E%3Cpolygon%20points='85,76%2055,53%2058,22%2084,10%20120,23%20111,58'/%3E%3Cpolygon%20points='167,71%20147,54%20151,31%20181,11%20209,14%20221,59%20199,72'/%3E%3Cpolygon%20points='45,25%2050,72%2016,92%20-14,71%20-16,34%2011,18'/%3E%3Cpolygon%20points='285,25%20290,72%20256,92%20226,71%20224,34%20251,18'/%3E%3C/g%3E%3C/svg%3E");
}

/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  background-image: var(--giraffe);
  background-size: 240px 240px;
  background-repeat: repeat;
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
  padding-right: var(--sb-w, 0px);
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

ul { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--ff-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.1;
}

p { margin: 0; }

/* Reusable */
.eyebrow {
  font-family: var(--ff-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}

.section-head {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
  padding: 0 var(--sp-5);
}

.section-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

.section-sub {
  margin-top: var(--sp-3);
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* =========================================================
   LOADING INTRO
   ========================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 700ms var(--ease-in-out),
              visibility 0s linear 700ms;
}

.intro:not([data-active]) {
  opacity: 0;
  visibility: hidden;
}

.intro__inner { position: relative; text-align: center; padding: 0 var(--sp-5); }

/* Warm glow bloom behind the logo */
.intro__inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle, rgba(255, 78, 26, 0.18), transparent 62%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: intro-glow 1700ms var(--ease-out) 200ms both;
}

@keyframes intro-glow {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  60%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
}

/* Safari logo image — pop in with a soft overshoot + rise */
.intro__logo {
  display: block;
  width: clamp(260px, 55vw, 520px);
  height: auto;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.82) translateY(16px);
  animation: intro-logo-reveal 1200ms var(--ease-out) 150ms both;
}

@keyframes intro-logo-reveal {
  0%   { opacity: 0; transform: scale(0.82) translateY(16px); }
  55%  { opacity: 1; transform: scale(1.035) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  transition: background var(--t-med) var(--ease-out),
              padding var(--t-med) var(--ease-out);
}

.nav.is-scrolled {
  /* Opaque-enough solid fill instead of backdrop-filter:blur (which re-samples
     the page every scroll frame and was a major source of jank). */
  background: rgba(247, 224, 189, 0.94);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}

.nav__brand {
  font-family: var(--ff-sans);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  color: var(--c-brand);
}

.nav__links {
  display: flex;
  gap: var(--sp-4);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.nav__links a,
.nav__links button {
  color: var(--c-ink-soft);
  position: relative;
  padding: 0.25rem 0;
  font-family: var(--ff-sans);
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color var(--t-fast) var(--ease-out);
}

.nav__links a::after,
.nav__links button::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-fast) var(--ease-out);
}

.nav__links a:hover,
.nav__links button:hover { color: var(--c-accent); }

.nav__links a:hover::after,
.nav__links button:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (min-width: 768px) {
  .nav__links { gap: var(--sp-6); font-size: 0.74rem; letter-spacing: 0.2em; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-bg);
}

.hero__bg {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
  /* Soft brand gradient wash — the hero now has its own photo element. */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 78, 26, 0.12), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(86, 208, 183, 0.10), transparent 55%),
    var(--c-bg);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}

/* Huge "TZIRAF" watermark behind the hero text — fills background
   with brand presence without competing with the foreground type. */
.hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-sans);
  font-weight: 900;
  font-size: clamp(6rem, 22vw, 22rem);
  line-height: 0.85;
  letter-spacing: 0.06em;
  color: var(--c-brand);
  opacity: 0.10;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Soft animated color blobs — ambient warmth */
.hero__blobs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Soft edge comes from the radial-gradient itself — no costly filter:blur(). */
  will-change: transform;
}

.hero__blob--1 {
  width: 64vmax; height: 64vmax;
  background: radial-gradient(circle, var(--c-brand) 0%, transparent 70%);
  top: -22vmax; left: -18vmax;
  opacity: 0.28;
  animation: blob-drift-a 26s ease-in-out infinite;
}

.hero__blob--2 {
  width: 52vmax; height: 52vmax;
  background: radial-gradient(circle, var(--c-food) 0%, transparent 70%);
  bottom: -18vmax; right: -16vmax;
  opacity: 0.34;
  animation: blob-drift-b 32s ease-in-out infinite;
}

.hero__blob--3 {
  width: 38vmax; height: 38vmax;
  background: radial-gradient(circle, var(--c-cocktails) 0%, transparent 70%);
  top: 58%; left: 52%;
  opacity: 0.24;
  animation: blob-drift-c 24s ease-in-out infinite;
}

/* Translate-only keyframes stay on the compositor (no per-frame repaint). */
@keyframes blob-drift-a {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(8vw, 5vw); }
  66%      { transform: translate(-6vw, 10vw); }
}

@keyframes blob-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-10vw, -6vw); }
}

@keyframes blob-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6vw, -8vw); }
}

.hero__overlay { display: none; }

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  padding: 0 var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hero entrance — staggered rise triggered after the intro lifts (JS) */
.hero .reveal {
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(.2, .7, .25, 1);
}
.hero__heading.reveal { transition-duration: 1150ms; }

.hero__text { width: 100%; }

.hero__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-6);
}

/* Hero heading wrapper (semantic h2) */
.hero__heading {
  margin: 0;
  display: block;
  position: relative;
  z-index: 1;
}

/* Safari logo image — replaces typographic title */
.hero__logo {
  display: block;
  width: clamp(280px, 56vw, 540px);
  height: auto;
  margin: 0 auto;
  /* Subtle drop shadow for slight lift */
  filter: drop-shadow(0 6px 20px rgba(199, 60, 0, 0.18));
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--c-ink);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: transparent;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.hero__cta svg { transition: transform var(--t-fast) var(--ease-out); }
.hero__cta:hover { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.hero__cta:hover svg { transform: translateY(3px); }

.hero__scroll {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: var(--c-line);
  overflow: hidden;
}

.hero__scroll span {
  display: block;
  width: 100%;
  height: 30%;
  background: var(--c-accent);
  animation: scroll-tick 1.8s var(--ease-in-out) infinite;
}

@keyframes scroll-tick {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(330%); }
}

/* =========================================================
   CATEGORY CARDS
   - Each card uses --card-color (set inline / by JS)
   - Coffee #C77435 · Drinks #CFCFCF · Food #56D0B7 · Cocktails #F27039
   ========================================================= */
.categories {
  position: relative;
  padding: var(--sp-10) var(--sp-5);
  background: transparent;       /* let the body giraffe texture show through */
  overflow: hidden;
  isolation: isolate;
}

/* Very relaxed animated colour wash behind the cards.
   Uses the 4 category brand colours, heavily blurred + slow drift. */
.categories__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.categories__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Soft wash from the gradient — no filter:blur(), no per-frame re-raster. */
  will-change: transform;
}

.categories__blob--1 {       /* coffee */
  width: 56vmax; height: 56vmax;
  background: radial-gradient(circle, var(--c-coffee) 0%, transparent 70%);
  top: -18vmax; left: -14vmax;
  opacity: 0.26;
  animation: aura-drift-a 46s ease-in-out infinite;
}

.categories__blob--2 {       /* food */
  width: 50vmax; height: 50vmax;
  background: radial-gradient(circle, var(--c-food) 0%, transparent 70%);
  top: 26%; right: -16vmax;
  opacity: 0.24;
  animation: aura-drift-b 54s ease-in-out infinite;
}

.categories__blob--3 {       /* cocktails */
  width: 44vmax; height: 44vmax;
  background: radial-gradient(circle, var(--c-cocktails) 0%, transparent 70%);
  bottom: -16vmax; left: 16%;
  opacity: 0.24;
  animation: aura-drift-c 60s ease-in-out infinite;
}

.categories__blob--4 {       /* drinks (cool accent) */
  width: 40vmax; height: 40vmax;
  background: radial-gradient(circle, var(--c-drinks) 0%, transparent 70%);
  top: 2%; left: 40%;
  opacity: 0.30;
  animation: aura-drift-d 50s ease-in-out infinite;
}

/* Translate-only — compositor-friendly, very slow drift. */
@keyframes aura-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(7vw, 6vh); }
}
@keyframes aura-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-8vw, -5vh); }
}
@keyframes aura-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6vw, -7vh); }
}
@keyframes aura-drift-d {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6vw, 8vh); }
}

.cards {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-4);
  max-width: var(--max-w);
  margin: 0 auto;
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: var(--card-color, var(--c-drinks));
  color: var(--c-ink);
  cursor: pointer;
  text-align: center;
  /* Layered shadow for depth — soft ambient + tight contact shadow */
  box-shadow:
    0 1px 2px  rgba(61, 57, 57, 0.08),
    0 6px 14px rgba(61, 57, 57, 0.10),
    0 18px 40px rgba(61, 57, 57, 0.12);
  transition: transform 500ms var(--ease-out),
              box-shadow 500ms var(--ease-out);
  will-change: transform;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 2px 4px   rgba(61, 57, 57, 0.10),
    0 14px 28px rgba(61, 57, 57, 0.14),
    0 32px 64px rgba(61, 57, 57, 0.18);
}

.card:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}

/* Subtle inner gradient for depth without losing flat-color look */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(0,0,0,0.18), transparent 60%);
  opacity: 0.9;
  transition: opacity var(--t-med) var(--ease-out);
}

.card:hover::before { opacity: 1; }

/* Animated diagonal sheen on hover */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,0.22) 50%,
    transparent 65%);
  transform: translateX(-100%);
  transition: transform 800ms var(--ease-out);
  pointer-events: none;
}

.card:hover::after { transform: translateX(100%); }

.card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-6) var(--sp-5);
}

@media (min-width: 1100px) { .card__inner { padding: var(--sp-6) var(--sp-4); } }

.card__index {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--c-ink);
  opacity: 0.55;
}

.card__icon {
  display: block;
  width: clamp(34px, 4.4vw, 44px);
  height: clamp(34px, 4.4vw, 44px);
  color: var(--c-ink);
  opacity: 0.9;
  transition: transform var(--t-med) var(--ease-out);
}

.card__icon svg { width: 100%; height: 100%; display: block; }

.card:hover .card__icon { transform: translateY(-3px) scale(1.06); }

/* Titles: all on a single line so the four cards stay identical */
.card__title {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  white-space: nowrap;
}

/* 4-up layout = narrow cards → scale the title down so the longest
   ("THE COCKTAILS") still fits on one line. */
@media (min-width: 1100px) {
  .card__title { font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: 0.06em; }
}

.card__cta {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  background: rgba(255,255,255,0.7);
  color: var(--c-ink);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-top: var(--sp-3);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.card:hover .card__cta {
  background: var(--c-ink);
  color: var(--card-color, var(--c-bg));
  transform: translateY(-2px);
}

/* Hide source card label while panel is opening */
.card.is-source .card__inner { opacity: 0; transition: opacity 200ms var(--ease-out); }

/* =========================================================
   PANEL — fullscreen menu overlay
   Background = source card color (set inline by JS via --panel-color)
   ========================================================= */
/* Panel opens with a circle clip-path that expands from the
   click point (--clip-start) to a circle large enough to cover
   the viewport (--clip-end). Closing reverses it. */
.panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  clip-path: var(--clip-start, circle(0px at 50% 50%));
  -webkit-clip-path: var(--clip-start, circle(0px at 50% 50%));
  transition: clip-path var(--t-panel) var(--ease-cinematic),
              -webkit-clip-path var(--t-panel) var(--ease-cinematic),
              visibility 0s linear var(--t-panel);
  isolation: isolate;
}

.panel.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: var(--clip-end, circle(150% at 50% 50%));
  -webkit-clip-path: var(--clip-end, circle(150% at 50% 50%));
  transition: clip-path var(--t-panel) var(--ease-cinematic),
              -webkit-clip-path var(--t-panel) var(--ease-cinematic),
              visibility 0s linear 0s;
}

.panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--panel-color, var(--c-coffee));
  transition: background 200ms var(--ease-out);
}

/* Decorative blobs + branded giraffe watermark texture */
.panel__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* large bright bloom — top right (main light source) */
    radial-gradient(ellipse 75% 65% at 105% -5%, rgba(255,255,255,0.22), transparent 62%),
    /* secondary glow — bottom left */
    radial-gradient(ellipse 60% 50% at -8% 108%, rgba(255,255,255,0.14), transparent 58%),
    /* subtle warm centre diffusion */
    radial-gradient(ellipse 45% 40% at 48% 52%, rgba(255,255,255,0.06), transparent 70%),
    /* giraffe skin watermark — white version of the page texture, very subtle */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%20viewBox='0%200%20240%20240'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.10'%3E%3Cpolygon%20points='-14,25%20-25,-4%20-20,-27%2011,-34%2031,-11%2031,14%2014,40'/%3E%3Cpolygon%20points='-14,265%20-25,236%20-20,213%2011,206%2031,229%2031,254%2014,280'/%3E%3Cpolygon%20points='226,25%20215,-4%20220,-27%20251,-34%20271,-11%20271,14%20254,40'/%3E%3Cpolygon%20points='226,265%20215,236%20220,213%20251,206%20271,229%20271,254%20254,280'/%3E%3Cpolygon%20points='133,10%20112,36%2081,33%2059,4%2064,-28%20102,-37%20120,-18'/%3E%3Cpolygon%20points='133,250%20112,276%2081,273%2059,244%2064,212%20102,203%20120,222'/%3E%3Cpolygon%20points='162,40%20142,21%20148,-12%20169,-28%20191,-28%20205,-11%20207,20%20186,39'/%3E%3Cpolygon%20points='162,280%20142,261%20148,228%20169,212%20191,212%20205,229%20207,260%20186,279'/%3E%3Cpolygon%20points='-30,20%20-18,-22%2014,-26%2048,-7%2028,32%207,40'/%3E%3Cpolygon%20points='-30,260%20-18,218%2014,214%2048,233%2028,272%207,280'/%3E%3Cpolygon%20points='210,20%20222,-22%20254,-26%20288,-7%20268,32%20247,40'/%3E%3Cpolygon%20points='210,260%20222,218%20254,214%20288,233%20268,272%20247,280'/%3E%3Cpolygon%20points='69,82%2054,103%2018,107%209,76%2026,36%2063,45'/%3E%3Cpolygon%20points='159,47%20155,81%20136,95%20109,93%2094,79%2096,50%20120,40'/%3E%3Cpolygon%20points='-58,72%20-37,58%201,57%2010,100%20-15,114%20-53,117'/%3E%3Cpolygon%20points='182,72%20203,58%20241,57%20250,100%20225,114%20187,117'/%3E%3Cpolygon%20points='24,79%2029,50%2060,42%2085,43%2081,82%2062,98%2030,107'/%3E%3Cpolygon%20points='-3,128%2033,126%2050,167%2023,188%20-20,188%20-27,146'/%3E%3Cpolygon%20points='237,128%20273,126%20290,167%20263,188%20220,188%20213,146'/%3E%3Cpolygon%20points='88,110%20114,125%20126,145%20115,177%2076,175%2051,151%2070,122'/%3E%3Cpolygon%20points='214,157%20183,180%20161,147%20164,114%20194,97%20216,120'/%3E%3Cpolygon%20points='28,112%2054,122%2071,148%2054,166%2022,181%2010,166%20-13,148%2010,119'/%3E%3Cpolygon%20points='268,112%20294,122%20311,148%20294,166%20262,181%20250,166%20227,148%20250,119'/%3E%3Cpolygon%20points='75,-33%2065,-12%2054,10%2018,-4%207,-32%2013,-60%2034,-62%2059,-57'/%3E%3Cpolygon%20points='75,207%2065,228%2054,250%2018,236%207,208%2013,180%2034,178%2059,183'/%3E%3Cpolygon%20points='110,21%2094,3%2099,-36%20122,-49%20152,-49%20157,-27%20166,5%20137,22'/%3E%3Cpolygon%20points='110,261%2094,243%2099,204%20122,191%20152,191%20157,213%20166,245%20137,262'/%3E%3Cpolygon%20points='-11,14%20-48,7%20-66,-22%20-41,-47%20-12,-47%2010,-22'/%3E%3Cpolygon%20points='-11,254%20-48,247%20-66,218%20-41,193%20-12,193%2010,218'/%3E%3Cpolygon%20points='229,14%20192,7%20174,-22%20199,-47%20228,-47%20250,-22'/%3E%3Cpolygon%20points='229,254%20192,247%20174,218%20199,193%20228,193%20250,218'/%3E%3Cpolygon%20points='28,-6%2034,-36%2061,-62%2077,-55%20104,-37%2093,-10%2077,14%2040,9'/%3E%3Cpolygon%20points='28,234%2034,204%2061,178%2077,185%20104,203%2093,230%2077,254%2040,249'/%3E%3Cpolygon%20points='22,10%2038,38%2025,62%20-14,70%20-21,32%20-6,3'/%3E%3Cpolygon%20points='262,10%20278,38%20265,62%20226,70%20219,32%20234,3'/%3E%3Cpolygon%20points='85,76%2055,53%2058,22%2084,10%20120,23%20111,58'/%3E%3Cpolygon%20points='167,71%20147,54%20151,31%20181,11%20209,14%20221,59%20199,72'/%3E%3Cpolygon%20points='45,25%2050,72%2016,92%20-14,71%20-16,34%2011,18'/%3E%3Cpolygon%20points='285,25%20290,72%20256,92%20226,71%20224,34%20251,18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, auto, 220px 220px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* Vignette overlay — keep text readable */
.panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.10), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0,0,0,0.20), transparent 55%);
  pointer-events: none;
}

.panel__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(61,57,57,0.1);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
  transition: opacity 400ms 500ms var(--ease-out),
              transform 600ms 500ms var(--ease-out),
              background 200ms var(--ease-out);
}

.panel.is-open .panel__close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.panel__close:hover {
  background: var(--c-ink);
  color: var(--c-bg);
}

.panel__close:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

/* Language toggle — mirrors the close button, top-left of the panel */
.panel__lang {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  z-index: 10;
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(61,57,57,0.1);
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  transition: opacity 400ms 500ms var(--ease-out),
              transform 600ms 500ms var(--ease-out);
}

.panel.is-open .panel__lang {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.panel__lang button {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-width: 40px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.panel__lang button:hover {
  background: rgba(61,57,57,0.08);
}

.panel__lang button.is-active {
  background: var(--c-ink);
  color: var(--c-bg);
}

.panel__lang button:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

.panel__scroll {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.panel__content {
  max-width: 920px;
  margin: 0 auto;
  padding: calc(var(--sp-10) + 20px) var(--sp-5) var(--sp-9);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms 450ms var(--ease-out),
              transform 700ms 450ms var(--ease-out);
}

.panel.is-open .panel__content {
  opacity: 1;
  transform: translateY(0);
}

.panel__head {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.panel__head .eyebrow { color: var(--c-ink); opacity: 0.7; }

.panel__title {
  font-family: var(--ff-sans);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.12em;
}

.panel__rule {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--c-ink);
  margin: var(--sp-5) auto 0;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 600ms 700ms var(--ease-out);
}

.panel.is-open .panel__rule { transform: scaleX(1); }

/* Panel sections — elegant restaurant-menu styling on colored bg */
.panel__section {
  margin-bottom: var(--sp-9);
}

.panel__section:last-child { margin-bottom: 0; }

.panel__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(61,57,57,0.4);
}

.panel__section-title {
  font-family: var(--ff-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.panel__section-note {
  font-family: var(--ff-sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  opacity: 0.8;
  font-style: italic;
}

.panel__section-cols {
  display: flex;
  gap: var(--sp-5);
  font-family: var(--ff-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.6;
  margin-bottom: var(--sp-3);
  justify-content: flex-end;
  padding-right: 0.25rem;
}

.panel__section-cols span { min-width: 4.5rem; text-align: right; }

.panel__list { display: grid; gap: 0; }

.panel__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5) 0;
  border-bottom: 1px dashed rgba(61,57,57,0.22);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-out),
              transform 500ms var(--ease-out);
  transition-delay: calc(700ms + var(--d, 0ms));
}

.panel.is-open .panel__item {
  opacity: 1;
  transform: translateY(0);
}

.panel__item:last-child { border-bottom: none; }

.panel__name-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.panel__name {
  font-family: var(--ff-sans);
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.28;
  letter-spacing: 0.005em;
}

.panel__desc {
  font-family: var(--ff-sans);
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  font-style: italic;
  opacity: 1;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.panel__prices {
  display: flex;
  gap: var(--sp-5);
  align-items: baseline;
  justify-content: flex-end;
  position: relative;
}

.panel__price {
  font-family: var(--ff-sans);
  font-size: clamp(1.3rem, 2.3vw, 1.6rem);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  min-width: 5rem;
  text-align: right;
}

.panel__price--alt { font-weight: 600; opacity: 0.82; }

/* Bump the section header so groupings are easier to scan */
.panel__section-title {
  font-size: 1.1rem;
}

.panel__item {
  padding: var(--sp-5) 0 calc(var(--sp-5) + 0.25rem);
}

/* Dotted leader connecting name → first price on desktop */
@media (min-width: 640px) {
  .panel__prices::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-5) * -1);
    bottom: 0.45em;
    width: var(--sp-4);
    border-top: 1px dotted rgba(61,57,57,0.5);
  }
}

/* =========================================================
   SAFARI BAND — editorial duotone image (brand-tinted)
   ========================================================= */
.safari {
  position: relative;
  isolation: isolate;          /* keep the duotone blends off the page */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 68vh;
  padding: var(--sp-10) var(--sp-5);
  overflow: hidden;
}

.safari__media {
  position: absolute;
  inset: -14% 0;               /* overscan = headroom for the parallax drift */
  z-index: 0;
  isolation: isolate;          /* contain the two blend layers below */
  will-change: transform;
}

.safari__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
  filter: grayscale(1) contrast(1.08) brightness(1.12);
}

/* True duotone: shadows -> espresso brown, highlights -> warm gold */
.safari__media::before,
.safari__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.safari__media::before {       /* lift the blacks to espresso */
  background: #3a1e0b;
  mix-blend-mode: lighten;
}
.safari__media::after {        /* pull the whites to gold */
  background: #e7b277;
  mix-blend-mode: darken;
}

/* Legibility scrim over the duotone */
.safari__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(34, 22, 10, 0.52) 0%,
    rgba(34, 22, 10, 0.18) 38%,
    rgba(34, 22, 10, 0.38) 100%);
}

.safari__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  color: #fff;
}
.safari__content .eyebrow {
  color: #f5d99a;
  opacity: 1;
  letter-spacing: 0.38em;
}
.safari__title {
  margin: var(--sp-2) 0 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 4.4rem);
  line-height: 1.1;
  color: #fef0d8;
  text-shadow:
    0 2px 6px rgba(40, 18, 4, 0.65),
    0 10px 40px rgba(40, 18, 4, 0.50),
    0 24px 70px rgba(40, 18, 4, 0.28);
}

/* =========================================================
   PANEL — SUB-MENU PICKER (food: Φαγητό / Brunch)
   ========================================================= */
.panel__submenu-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: var(--sp-6) 0 var(--sp-2);
}

.panel__submenu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-4);
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  cursor: pointer;
  color: inherit;
  text-align: center;
  transition: background 0.18s, transform 0.16s;
}
.panel__submenu-btn:hover,
.panel__submenu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.20);
  transform: translateY(-3px);
  outline: none;
}

.panel__submenu-icon { opacity: 0.80; }

.panel__submenu-title {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-top: var(--sp-1);
}

.panel__submenu-note {
  font-family: var(--ff-sans);
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.58;
}

/* Back button inside a sub-menu */
.panel__back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.60;
  font-family: var(--ff-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 0 var(--sp-5);
  transition: opacity 0.18s;
}
.panel__back-btn:hover { opacity: 1; }

/* =========================================================
   PANEL — CROSS-NAVIGATION (jump to other 3 categories)
   ========================================================= */
.panel__crossnav {
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.panel__crossnav-label {
  display: block;
  font-family: var(--ff-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: var(--sp-4);
}

.panel__crossnav-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.panel__crossnav-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-6);
  background: rgba(255, 255, 255, 0.13);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  cursor: pointer;
  color: inherit;
  font-family: var(--ff-sans);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 0.16s, transform 0.14s, border-color 0.16s;
}
.panel__crossnav-btn:hover,
.panel__crossnav-btn:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.50);
  transform: translateY(-2px);
  outline: none;
}

/* =========================================================
   PANEL — PER-CATEGORY MENU STYLES (live A/B/C/D preview)
   coffee    → printed cream menu card
   drinks    → ornamental dividers
   food      → chalkboard / brasserie
   cocktails → clean (gradients only, no texture)
   ========================================================= */

/* ---- DRINKS & COCKTAILS: drop the giraffe texture (cleaner) ---- */
.panel[data-cat="drinks"] .panel__bg::before,
.panel[data-cat="cocktails"] .panel__bg::before {
  background-image:
    radial-gradient(ellipse 75% 65% at 105% -5%, rgba(255,255,255,0.22), transparent 62%),
    radial-gradient(ellipse 60% 50% at -8% 108%, rgba(255,255,255,0.14), transparent 58%),
    radial-gradient(ellipse 45% 40% at 48% 52%, rgba(255,255,255,0.06), transparent 70%);
}

/* ---------------------------------------------------------
   COFFEE — printed menu card on the coloured "table"
   --------------------------------------------------------- */
.panel[data-cat="coffee"] .panel__content {
  max-width: 760px;
  margin: var(--sp-9) auto;
  padding: var(--sp-8) clamp(var(--sp-5), 5vw, var(--sp-8));
  background: #FBF5E9;
  border-radius: 12px;
  box-shadow:
    0 2px 10px rgba(40, 24, 8, 0.16),
    0 30px 70px rgba(40, 24, 8, 0.28);
}
.panel[data-cat="coffee"] .panel__crossnav {
  border-top-color: rgba(61, 57, 57, 0.16);
}
.panel[data-cat="coffee"] .panel__crossnav-btn {
  background: rgba(61, 57, 57, 0.07);
  border-color: rgba(61, 57, 57, 0.22);
}
.panel[data-cat="coffee"] .panel__crossnav-btn:hover,
.panel[data-cat="coffee"] .panel__crossnav-btn:focus-visible {
  background: rgba(61, 57, 57, 0.16);
  border-color: rgba(61, 57, 57, 0.40);
}

/* ---------------------------------------------------------
   DRINKS — ornamental dividers (centred headings + ❖)
   --------------------------------------------------------- */
.panel[data-cat="drinks"] .panel__section-head {
  justify-content: center;
  border-bottom: none;
  margin-bottom: var(--sp-5);
}
.panel[data-cat="drinks"] .panel__section-title {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--sp-3), 3vw, var(--sp-6));
  letter-spacing: 0.42em;
}
.panel[data-cat="drinks"] .panel__section-title::before,
.panel[data-cat="drinks"] .panel__section-title::after {
  content: "";
  width: clamp(30px, 9vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61, 57, 57, 0.55), transparent);
}
.panel[data-cat="drinks"] .panel__section-note {
  flex-basis: 100%;
  text-align: center;
}
/* diamond ornament between consecutive sections */
.panel[data-cat="drinks"] .panel__section + .panel__section::before {
  content: "❖";
  display: block;
  text-align: center;
  color: rgba(61, 57, 57, 0.42);
  font-size: 0.95rem;
  margin: 0 0 var(--sp-7);
}

/* ---------------------------------------------------------
   FOOD — chalkboard / brasserie
   --------------------------------------------------------- */
.panel[data-cat="food"] .panel__bg {
  background-color: #1f2c27;
}
.panel[data-cat="food"] .panel__bg::before {
  background-image:
    radial-gradient(ellipse 85% 60% at 50% -8%, rgba(255,255,255,0.07), transparent 60%),
    radial-gradient(ellipse 55% 45% at 12% 105%, rgba(255,255,255,0.05), transparent 58%);
}
.panel[data-cat="food"] .panel__bg::after {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.40), transparent 60%);
}
.panel[data-cat="food"] .panel__title,
.panel[data-cat="food"] .panel__head .eyebrow,
.panel[data-cat="food"] .panel__section-title,
.panel[data-cat="food"] .panel__section-note,
.panel[data-cat="food"] .panel__section-cols,
.panel[data-cat="food"] .panel__name,
.panel[data-cat="food"] .panel__desc,
.panel[data-cat="food"] .panel__price,
.panel[data-cat="food"] .panel__submenu-btn,
.panel[data-cat="food"] .panel__back-btn,
.panel[data-cat="food"] .panel__crossnav-label,
.panel[data-cat="food"] .panel__crossnav-btn {
  color: #f1ece1;
}
.panel[data-cat="food"] .panel__title,
.panel[data-cat="food"] .panel__name,
.panel[data-cat="food"] .panel__price {
  text-shadow: 0 0 1px rgba(255,255,255,0.25);
}
.panel[data-cat="food"] .panel__rule {
  background: #f1ece1;
}
.panel[data-cat="food"] .panel__section-head {
  border-bottom-color: rgba(255,255,255,0.32);
}
.panel[data-cat="food"] .panel__item {
  border-bottom-color: rgba(255,255,255,0.16);
}
.panel[data-cat="food"] .panel__prices::before {
  border-top-color: rgba(255,255,255,0.40);
}
.panel[data-cat="food"] .panel__submenu-btn {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
}
.panel[data-cat="food"] .panel__crossnav {
  border-top-color: rgba(255,255,255,0.18);
}
.panel[data-cat="food"] .panel__crossnav-btn {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.30);
}

/* =========================================================
   FOOTER / CONTACT
   ========================================================= */
.footer {
  background: var(--c-surface);
  color: #d9d4cd;
  padding: var(--sp-9) var(--sp-5) var(--sp-5);
}

.footer .eyebrow { color: var(--c-coffee); }

.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) { .footer__inner { grid-template-columns: repeat(3, 1fr); } }

.footer__title {
  font-family: var(--ff-sans);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  color: #fff;
  margin-bottom: var(--sp-3);
}

.footer__link {
  display: inline-block;
  color: #d9d4cd;
  font-size: 0.95rem;
  padding: var(--sp-1) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.footer__link:hover { color: #fff; border-bottom-color: var(--c-coffee); }

.footer__link--lg {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: var(--sp-4);
  letter-spacing: 0.04em;
}

.footer__hours { display: grid; gap: var(--sp-2); font-size: 0.92rem; }

.footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-1) 0;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
}

.footer__hours li:last-child { border-bottom: none; }
.footer__hours .day  { color: #d9d4cd; }
.footer__hours .time { color: #fff; }

.footer__follow {
  margin-top: var(--sp-4);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a847d;
}

.footer__social {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #d9d4cd;
  transition: color var(--t-fast) var(--ease-out);
}

.footer__social-icon { flex-shrink: 0; }

.footer__social a:hover { color: var(--c-coffee); }

.footer__bottom {
  max-width: var(--max-w);
  margin: var(--sp-9) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a847d;
}

@media (min-width: 640px) { .footer__bottom { flex-direction: row; } }

.footer__bottom-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a847d;
  transition: color 200ms var(--ease-out);
}
.footer__bottom-ig:hover { color: var(--c-coffee); }

.footer__credit {
  max-width: var(--max-w);
  margin: var(--sp-4) auto 0;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f6a64;
}
.footer__credit a {
  color: #8a847d;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.footer__credit a:hover {
  color: var(--c-coffee);
  border-bottom-color: currentColor;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal[style*="--d"] { transition-delay: var(--d); }

/* =========================================================
   MOBILE REFINEMENTS  (≤ 640px)
   Tighten oversized desktop spacing so menus feel native on
   a phone; keep tap targets comfortable.
   ========================================================= */
@media (max-width: 640px) {
  /* Categories: 8rem top/bottom padding is huge on a phone */
  .categories { padding: var(--sp-8) var(--sp-4); }
  .section-head { margin-bottom: var(--sp-6); }

  /* Cards: single column, full-width squares with rounded corners */
  .cards { grid-template-columns: 1fr; gap: var(--sp-3); }
  .card { aspect-ratio: 1 / 1; border-radius: 18px; }

  /* Panel: pull the menu up — the desktop top padding wasted a
     whole screen of empty space above the title on mobile */
  .panel__content { padding: calc(var(--sp-8) + 28px) var(--sp-4) var(--sp-8); }
  .panel__head { margin-bottom: var(--sp-6); }

  /* Coffee "printed card": trim outer margin + inner padding */
  .panel[data-cat="coffee"] .panel__content {
    margin: calc(var(--sp-7) + 20px) auto var(--sp-6);
    padding: var(--sp-6) var(--sp-5);
  }

  /* Section spacing between groups a touch tighter */
  .panel__section { margin-bottom: var(--sp-8); }

  /* Smaller close button hug to the corner */
  .panel__close { top: var(--sp-4); right: var(--sp-4); }
  .panel__lang { top: var(--sp-4); left: var(--sp-4); }
  .panel__lang button { min-width: 36px; height: 32px; padding: 0 10px; font-size: 0.78rem; }

  /* Menu item names: cap so long names don't dominate */
  .panel__name { font-size: 1.5rem; }
  .panel__price { font-size: 1.4rem; min-width: 0; }
  .panel__prices { gap: var(--sp-4); }

  /* Cross-nav pills: full-width friendly wrap */
  .panel__crossnav-btn { flex: 1 1 auto; justify-content: center; }

  /* Food sub-menu picker: keep the two choices side-by-side as
     squares with rounded corners (matching the desktop look). */
  .panel__submenu-picker { gap: var(--sp-3); }
  .panel__submenu-btn {
    aspect-ratio: 1 / 1;
    justify-content: center;
    padding: var(--sp-4) var(--sp-3);
  }
  .panel__submenu-title { font-size: 1rem; }
  .panel__submenu-note { font-size: 0.62rem; }
}

/* Extra-narrow phones (≤ 380px): drop the SINGLE/DOUBLE second
   price column pressure by allowing tighter gaps. */
@media (max-width: 380px) {
  .panel__section-cols { gap: var(--sp-3); }
  .panel__section-cols span { min-width: 3.6rem; }
  .panel__prices { gap: var(--sp-3); }
  .panel__price { min-width: 0; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
  .intro  { display: none !important; }
  .panel  { clip-path: inset(0); -webkit-clip-path: inset(0); }
}