/* ==========================================================================
   CAFÉ ENIGMA — page styles  (builds on tokens.css from the design system)
   Three deliberate background worlds:
     · café  — warm espresso-black + gold        (default)
     · carta — parchment "printed menu"          (.world-parchment)
     · bar   — deep teal + crimson velvet         (.world-bar)
   ========================================================================== */

/* Wordmark accent face — vintage condensed Tuscan, echoing the cup lockup.
   Swap to var(--font-display) anywhere if a different wordmark face arrives. */
@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');

:root {
  /* café-warm surfaces (warmer than the bar's teal defaults) */
  --cafe-bg:        #0F0A07;   /* warm espresso black — page */
  --cafe-bg-2:      #170F0A;   /* coffee panel */
  --cafe-surface:   #20150E;   /* raised card */
  --cafe-surface-2: #2A1B11;   /* hover / inset */
  --cafe-line:      rgba(196,161,90,.20);
  --cafe-line-soft: rgba(196,161,90,.12);

  --wordmark: 'Rye', 'Cinzel Decorative', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 60% 40% at 10% 6%, rgba(124,72,34,.11), transparent 60%),
    radial-gradient(ellipse 55% 45% at 92% 18%, rgba(58,32,14,.12), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 104%, rgba(124,72,34,.08), transparent 60%),
    var(--cafe-bg);
  background-attachment: fixed;
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.container-wide { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* ---------- film-grain & vignette atmosphere ---------- */
.grain::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Wordmark lockup — recreates the cup badge:  ENIGMA  /  ⎯ CAFÉ ⎯
   ========================================================================== */
.lockup { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; gap: .34em; text-decoration: none; }
.lockup .lk-name {
  font-family: var(--wordmark);
  color: var(--enigma-gold-500);
  letter-spacing: .04em;
  line-height: .9;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.lockup .lk-tab {
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--enigma-gold-400);
  letter-spacing: .42em;
}
.lockup .lk-tab::before,
.lockup .lk-tab::after {
  content: ""; height: 1px; width: var(--tab-rule, 26px);
  background: linear-gradient(90deg, transparent, var(--enigma-gold-500));
}
.lockup .lk-tab::after { transform: scaleX(-1); }
.lockup .lk-tab .lk-diamond { width: 4px; height: 4px; background: var(--enigma-gold-500); transform: rotate(45deg); flex: none; }

/* sizes */
.lockup--sm .lk-name { font-size: 22px; }
.lockup--sm .lk-tab  { font-size: 9px; letter-spacing: .36em; --tab-rule: 16px; }
.lockup--lg .lk-name { font-size: clamp(54px, 9vw, 104px); }
.lockup--lg .lk-tab  { font-size: clamp(12px, 1.4vw, 16px); --tab-rule: clamp(28px, 5vw, 60px); }

/* ==========================================================================
   Type helpers
   ========================================================================== */
.eyebrow {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--enigma-gold-500);
}
.display {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 6vw, 84px); line-height: 1.02;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fg-1);
  margin: 0;
}
.h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 52px); line-height: 1.05;
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-1);
  margin: 0;
}
.script {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: .01em; color: var(--enigma-gold-400);
}
.lede { font-size: 20px; line-height: 1.6; color: var(--fg-2); font-weight: 400; }
.body { font-size: 18px; line-height: 1.62; color: var(--fg-2); }
.muted { color: var(--fg-3); }

.rule-ornate {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--enigma-gold-600) 25%, var(--enigma-gold-400) 50%, var(--enigma-gold-600) 75%, transparent);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  padding: 15px 28px; border-radius: var(--radius-xs);
  cursor: pointer; text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out-soft);
  border: 1px solid var(--enigma-gold-500);
}
.btn-primary { background: var(--enigma-gold-600); color: var(--enigma-ink-900); border-color: var(--enigma-gold-500); }
.btn-primary:hover { background: var(--enigma-gold-500); box-shadow: var(--shadow-glow-gold); }
.btn-ghost { background: transparent; color: var(--enigma-gold-400); }
.btn-ghost:hover { border-color: var(--enigma-gold-400); color: var(--fg-1); box-shadow: var(--shadow-glow-gold); }
.btn:active { transform: scale(.985); }

.link-gold {
  color: var(--enigma-gold-400); text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid var(--enigma-gold-600); padding-bottom: 3px;
  transition: all var(--dur-fast);
}
.link-gold:hover { color: var(--enigma-gold-300); border-bottom-width: 2px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: 78px; z-index: 90;
  display: flex; align-items: center;
  background: rgba(15,10,7,.55);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--cafe-line-soft);
  transition: background var(--dur-med), border-color var(--dur-med);
}
.site-header.scrolled { background: rgba(11,7,5,.86); border-bottom-color: var(--cafe-line); }
.site-header .container-wide { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav { display: flex; gap: 30px; align-items: center; }
.nav a {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--enigma-gold-400); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nav a { white-space: nowrap; }
.nav a:hover { color: var(--fg-1); border-bottom-color: var(--enigma-gold-500); }
.nav a.secret { color: var(--enigma-gold-300); }
.nav a.secret::before { content: "\25C6"; font-size: 7px; vertical-align: middle; margin-right: 6px; color: var(--enigma-gold-500); }
.nav a.secret:hover { color: var(--fg-1); border-bottom-color: var(--enigma-gold-500); }

/* header logo */
.hd-logo { height: 40px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.header-cta { display: flex; align-items: center; gap: 18px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-3);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--enigma-gold-500); box-shadow: 0 0 8px var(--enigma-gold-500); }
.status-dot.closed { background: var(--enigma-crimson-500); box-shadow: 0 0 8px var(--enigma-crimson-600); }
.nav-toggle { display: none; }

/* ==========================================================================
   Sections / generic
   ========================================================================== */
section { position: relative; z-index: 2; }
.section { padding: clamp(72px, 11vw, 140px) 0; }
.section-tight { padding: clamp(56px, 8vw, 96px) 0; }
.center { text-align: center; }
.max-680 { max-width: 680px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- HERO (full-bleed) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.7) sepia(.2); }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(20,13,8,.30), rgba(10,7,5,.88) 78%),
    linear-gradient(180deg, rgba(15,10,7,.65), transparent 26%, rgba(10,7,5,.78));
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; padding: 116px 28px 104px; display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: min(440px, 74vw); height: auto; margin-bottom: 30px; filter: drop-shadow(0 6px 28px rgba(0,0,0,.65)); }
.hero-note {
  margin-top: 18px; font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--enigma-gold-400);
}
.hero-tagline-en {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--enigma-gold-600); margin-top: 26px;
}
.hero-strip {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; gap: 28px; flex-wrap: wrap; justify-content: center;
  padding: 16px clamp(20px, 5vw, 88px);
  border-top: 1px solid var(--cafe-line-soft);
  background: linear-gradient(0deg, rgba(8,5,3,.9), transparent);
  font-family: var(--font-heading); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--enigma-gold-500);
}
.hero-strip .sep { color: var(--fg-muted); }

/* ---------- two-column feature ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.feature.reverse .feature-media { order: -1; }
.feature-media { position: relative; }
.feature-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; position: relative; z-index: 1; }
.feature-media .frame { position: absolute; inset: -16px -16px 16px 16px; border: 1px solid var(--cafe-line); z-index: 0; }

/* craft pillars */
.pillars { display: grid; gap: 4px; margin-top: 36px; border-top: 1px solid var(--cafe-line-soft); }
.pillar { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--cafe-line-soft); align-items: baseline; }
.pillar .pn { font-family: var(--wordmark); color: var(--enigma-gold-500); font-size: 20px; flex: none; width: 2.2em; }
.pillar h4 { margin: 0 0 3px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-1); }
.pillar p { margin: 0; font-size: 16px; color: var(--fg-3); line-height: 1.5; }

/* ==========================================================================
   CARTA — parchment printed menu
   ========================================================================== */
.world-parchment {
  background:
    radial-gradient(circle at 18% 22%, rgba(138,106,50,.10), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(74,14,19,.07), transparent 46%),
    var(--enigma-parchment-50);
  color: var(--enigma-ink-900);
}
.world-parchment .eyebrow { color: var(--enigma-copper-600); }
.world-parchment .h2 { color: #2A1B10; }
.world-parchment .muted { color: #6f604a; }
.carta-head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px,6vw,72px); }
.carta-head p { color: #5d4f3c; font-size: 18px; }
.carta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px); }
.carta-cols { columns: 2; column-gap: clamp(44px,6vw,84px); }
.carta-cols .carta-block { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 44px; }
.carta-cols .carta-block:first-child { margin-top: 0; }
@media (max-width: 900px) { .carta-cols { columns: 1; } }
.carta-col h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: .08em; text-transform: uppercase; color: #3a2614;
  margin: 0 0 6px; display: flex; align-items: center; gap: 14px;
}
.carta-col h3::after { content: ""; flex: 1; height: 1px; background: rgba(58,38,20,.22); }
.carta-col .col-note { font-style: italic; color: #8a6a32; font-size: 15px; margin: 0 0 20px; }
.carta-block + .carta-block { margin-top: 40px; }
.m-item { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px dotted rgba(58,38,20,.20); }
.m-item .m-name { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 20px; color: #241509; white-space: nowrap; }
.m-item .m-desc { font-size: 14px; color: #7a6850; font-style: italic; flex: 1; }
.m-item .m-dots { flex: 1; border-bottom: 1px dotted rgba(58,38,20,.28); transform: translateY(-4px); min-width: 16px; }
.m-item .m-price { font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: .06em; color: #6b4a1a; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* food rows with descriptions */
.m-row2 { padding: 12px 0; border-bottom: 1px dotted rgba(58,38,20,.20); }
.m-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.m-top .m-name { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 20px; color: #241509; white-space: normal; }
.m-top .m-price { font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: .06em; color: #6b4a1a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-desc2 { margin: 5px 0 0; font-size: 14px; color: #7a6850; font-style: italic; line-height: 1.46; max-width: 90%; }
.m-add { color: #9a7430; font-style: italic; }
.carta-foot { text-align: center; margin-top: clamp(48px,7vw,80px); color: #6f604a; font-style: italic; font-size: 15px; }

/* small inline menu photos */
.carta-photos { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: clamp(40px,6vw,72px); }
.carta-photos figure { margin: 0; position: relative; aspect-ratio: 1/1; overflow: hidden; border: 1px solid rgba(58,38,20,.25); }
.carta-photos img { width: 100%; height: 100%; object-fit: cover; }
.carta-photos figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 14px 12px 10px;
  background: linear-gradient(0deg, rgba(20,12,6,.82), transparent);
  font-family: var(--font-heading); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--enigma-gold-300);
}

/* ==========================================================================
   EL ESPACIO — gallery
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery figure { margin: 0; position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--cafe-line-soft); }
.gallery figure:nth-child(odd) { transform: translateY(16px); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-soft); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 16px 14px 12px;
  background: linear-gradient(0deg, rgba(15,10,7,.9), transparent);
  font-family: var(--font-heading); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--enigma-gold-400);
}
.pullquote {
  text-align: center; max-width: 760px; margin: clamp(56px,8vw,96px) auto 0;
}
.pullquote p {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.45; color: var(--fg-1); margin: 18px 0;
}
.pullquote .by { font-family: var(--font-heading); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--enigma-gold-500); }

/* ==========================================================================
   EL ENIGMA — the secret bar (teal world)
   ========================================================================== */
.world-bar {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(196,161,90,.12), transparent 52%),
    radial-gradient(ellipse at 50% 116%, rgba(107,17,25,.26), transparent 60%),
    linear-gradient(180deg, var(--cafe-bg) 0%, #0A0604 42%, #060302 100%);
  color: var(--fg-1);
  overflow: hidden;
}
.enigma-intro { text-align: center; max-width: 720px; margin: 0 auto; }
.enigma-intro .h2 { color: #EDE3C6; }
.enigma-intro .lede { color: #cabfa9; }

/* riddle gate */
.gate { max-width: 560px; margin: clamp(40px,6vw,64px) auto 0; }
.gate-panel {
  position: relative;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(160deg, rgba(42,27,17,.62), rgba(10,6,4,.74));
  box-shadow: var(--shadow-lg), var(--shadow-inner-etch);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.gate-panel .gate-eyebrow { color: var(--enigma-gold-400); }
.gate-seq {
  font-family: var(--wordmark); color: var(--enigma-gold-300);
  font-size: clamp(28px, 5vw, 44px); letter-spacing: .12em; margin: 18px 0 6px;
}
.gate-hint { color: #b3a487; font-style: italic; font-size: 16px; margin: 0 0 26px; }
.gate-tiles { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tile {
  width: 62px; height: 62px; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: .04em;
  color: var(--enigma-gold-300); background: rgba(20,12,7,.66);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xs);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out-soft);
}
.tile:hover { border-color: var(--enigma-gold-400); background: var(--cafe-surface-2); transform: translateY(-2px); }
.tile:active { transform: scale(.95); }
.tile.correct { background: var(--enigma-gold-600); color: var(--enigma-ink-900); border-color: var(--enigma-gold-400); pointer-events: none; }
.gate.wrong .gate-panel { animation: shake .4s var(--ease-mechanical); border-color: var(--enigma-crimson-600); }
.gate-feedback { min-height: 20px; margin-top: 18px; font-family: var(--font-heading); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.gate-feedback.err { color: var(--enigma-crimson-500); }
.gate-feedback.ok  { color: var(--enigma-gold-400); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }

/* reveal — the door opens */
.bar-reveal {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch;
  gap: 0; margin-top: clamp(48px,7vw,80px);
  border: 1px solid var(--border-subtle);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur-reveal) var(--ease-mechanical), opacity var(--dur-reveal) var(--ease-out-soft);
}
.bar-reveal.open { max-height: 720px; opacity: 1; }
.bar-reveal-media { position: relative; min-height: 380px; }
.bar-reveal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bar-reveal-media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(10,6,4,.72)); }
.bar-reveal-body {
  background: linear-gradient(160deg, #1B100A, #0A0604);
  padding: clamp(32px,4vw,52px); display: flex; flex-direction: column; justify-content: center;
}
.bar-reveal-body .script { font-size: 24px; }
.bar-detail { display: flex; gap: 26px; flex-wrap: wrap; margin: 22px 0 28px; }
.bar-detail .bd { }
.bar-detail .bd .k { font-family: var(--font-heading); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--fg-3); }
.bar-detail .bd .v { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--enigma-gold-400); }

/* ==========================================================================
   VISÍTANOS
   ========================================================================== */
.visit { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,6vw,72px); align-items: center; }
.visit-info dl { margin: 28px 0 0; display: grid; gap: 22px; }
.visit-info .row { border-top: 1px solid var(--cafe-line-soft); padding-top: 16px; }
.visit-info dt { font-family: var(--font-heading); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--enigma-gold-500); margin-bottom: 6px; }
.visit-info dd { margin: 0; font-size: 18px; color: var(--fg-2); line-height: 1.5; }
.visit-address {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,3vw,34px);
  letter-spacing: .03em; color: var(--fg-1); line-height: 1.15; margin: 24px 0 0; text-transform: uppercase;
}
.visit-noreserva {
  font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--enigma-gold-400);
  margin: 14px 0 10px; padding-left: 16px; border-left: 2px solid var(--enigma-gold-600);
}
.visit-events { font-family: var(--font-serif); font-size: 16px; color: var(--fg-2); margin: 0 0 26px; padding-left: 16px; }
.visit-events a { color: var(--enigma-gold-400); text-decoration: none; border-bottom: 1px solid var(--enigma-gold-600); }
.visit-events a:hover { color: var(--enigma-gold-300); }
.hours { width: 100%; border-collapse: collapse; margin-bottom: 26px; }
.hours th, .hours td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--cafe-line-soft); font-weight: 400; }
.hours th { font-family: var(--font-heading); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.hours td { font-family: var(--font-serif); font-size: 19px; color: var(--enigma-gold-400); text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.today th { color: var(--enigma-gold-300); }
.hours tr.today td { color: var(--enigma-gold-300); }
.hours tr.today { position: relative; }
.visit-contact { font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; color: var(--fg-3); }
.visit-contact a { color: var(--fg-3); text-decoration: none; border-bottom: 1px solid var(--cafe-line); }
.visit-contact a:hover { color: var(--enigma-gold-400); }
.map {
  position: relative; aspect-ratio: 4/3; border: 1px solid var(--cafe-line);
  background:
    repeating-linear-gradient(0deg, rgba(196,161,90,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(196,161,90,.05) 0 1px, transparent 1px 44px),
    radial-gradient(circle at 60% 45%, rgba(184,122,46,.16), transparent 60%),
    var(--cafe-bg-2);
  display: grid; place-items: center; overflow: hidden;
}
.map .pin {
  text-align: center; z-index: 2;
}
.map .pin .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--enigma-gold-500); margin: 0 auto 10px; box-shadow: 0 0 0 6px rgba(196,161,90,.18), 0 0 24px rgba(196,161,90,.4); }
.map .pin span { font-family: var(--font-heading); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--enigma-gold-400); }
.map .roads { position: absolute; inset: 0; opacity: .5; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #0A0705; border-top: 1px solid var(--cafe-line); padding: 64px 0 48px; text-align: center; position: relative; z-index: 2; }
.footer-logo { height: 56px; width: auto; margin: 0 auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); }
.site-footer .tagline { font-family: var(--font-serif); font-style: italic; color: var(--fg-3); margin: 20px 0 26px; font-size: 17px; }
.footer-links { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.footer-year { font-family: var(--font-heading); font-size: 10px; letter-spacing: .3em; color: var(--fg-muted); }
.footer-contact { font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; color: var(--fg-muted); margin-top: 12px; }

/* ==========================================================================
   Scroll-reveal (progressive enhancement — content visible without JS)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out-soft), transform .8s var(--ease-out-soft); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: .08s; }
  .js .reveal.d2 { transition-delay: .16s; }
  .js .reveal.d3 { transition-delay: .24s; }
}

/* ==========================================================================
   Tweaks panel (vanilla, brand-styled, follows host protocol)
   ========================================================================== */
.twk {
  position: fixed; right: 16px; bottom: 16px; z-index: 2147483646; width: 250px;
  display: none; flex-direction: column;
  background: rgba(16,11,8,.86);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--cafe-line); border-radius: 6px; box-shadow: var(--shadow-lg);
  font-family: var(--font-ui); color: var(--fg-1); overflow: hidden;
}
.twk.open { display: flex; }
.twk-hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 12px 16px; cursor: move; border-bottom: 1px solid var(--cafe-line-soft); }
.twk-hd b { font-family: var(--font-heading); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--enigma-gold-400); font-weight: 600; }
.twk-x { background: none; border: 0; color: var(--fg-3); cursor: pointer; font-size: 14px; width: 24px; height: 24px; border-radius: 4px; line-height: 1; }
.twk-x:hover { background: rgba(255,255,255,.06); color: var(--fg-1); }
.twk-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.twk-row { display: flex; flex-direction: column; gap: 8px; }
.twk-row > label { font-size: 11px; letter-spacing: .04em; color: var(--fg-2); }
.twk-sel { width: 100%; height: 32px; background: rgba(0,0,0,.32); border: 1px solid var(--cafe-line); color: var(--fg-1); font-family: var(--font-serif); font-size: 15px; border-radius: 3px; padding: 0 8px; outline: none; cursor: pointer; }
.twk-sel:focus { border-color: var(--enigma-gold-500); }
.twk-seg { display: flex; border: 1px solid var(--cafe-line); border-radius: 3px; overflow: hidden; }
.twk-seg button { flex: 1; background: transparent; border: 0; border-right: 1px solid var(--cafe-line-soft); color: var(--fg-3); font-family: var(--font-heading); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 9px 4px; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.twk-seg button:last-child { border-right: 0; }
.twk-seg button:hover { color: var(--fg-1); }
.twk-seg button[data-on="1"] { background: var(--enigma-gold-600); color: var(--enigma-teal-900); }
.twk-row-h { flex-direction: row; align-items: center; justify-content: space-between; }
.twk-tg { position: relative; width: 38px; height: 21px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); cursor: pointer; padding: 0; flex: none; transition: background var(--dur-fast); }
.twk-tg[data-on="1"] { background: var(--enigma-gold-600); }
.twk-tg i { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform var(--dur-fast); }
.twk-tg[data-on="1"] i { transform: translateX(17px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .hero-inner { padding: 104px 24px 96px; }
  .hero-strip { gap: 12px 20px; font-size: 10px; }
  .feature, .carta-grid, .bar-reveal, .visit { grid-template-columns: 1fr; }
  .feature.reverse .feature-media { order: 0; }
  .bar-reveal-media { min-height: 280px; }
  .gallery { grid-template-columns: repeat(2,1fr); }
  .gallery figure:nth-child(odd) { transform: none; }
  .carta-photos { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; gap: 22px;
    position: absolute; top: 78px; left: 0; right: 0;
    background: rgba(11,7,5,.97); padding: 28px 32px; border-bottom: 1px solid var(--cafe-line);
  }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav-toggle span { width: 24px; height: 1.5px; background: var(--enigma-gold-400); display: block; }
  .status-pill { display: none; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .carta-photos { grid-template-columns: 1fr; }
  .tile { width: 54px; height: 54px; font-size: 19px; }
  .hero-strip { font-size: 10px; gap: 14px; }
}