/* =========================================================
   LA VENTANA CAFE — grainy tan & blue, sleek + moody
   ========================================================= */

:root{
  --cream:      #F1E8CF;
  --cream-2:    #E8DBB9;
  --cream-soft: #F7F1E0;
  --ink:        #122150;   /* navy text on cream */
  --blue:       #0C1A3E;   /* single deep navy — used everywhere */
  --blue-bright:#0C1A3E;
  --blue-deep:  #0C1A3E;   /* moody dark section  */
  --blue-night: #070F25;   /* darkest             */
  --tan:        #C7B083;
  --tan-line:   #C7B083;
  --muted-d:    rgba(241,232,207,.62);  /* muted on dark */
  --muted-l:    rgba(18,33,80,.62);     /* muted on light */
  --line-d:     rgba(241,232,207,.16);
  --line-l:     rgba(18,33,80,.16);
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---- film grain overlay over everything ---- */
body::after{
  content:"";
  position:fixed; inset:-50%;
  z-index:9999;
  pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:multiply;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}
  80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)}
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- typography ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:.95;
  letter-spacing:.01em; text-transform:uppercase; margin:0; }
.display{ font-size:clamp(3.6rem, 11vw, 10rem); }
h2{ font-size:clamp(2.4rem, 5.5vw, 4.6rem); }
h3{ font-size:clamp(1.5rem, 2.4vw, 2.1rem); }
.eyebrow{ font-family:var(--body); font-weight:700; text-transform:uppercase;
  letter-spacing:.32em; font-size:.72rem; opacity:.7; display:inline-block; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); max-width:62ch; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6em;
  font-weight:600; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.95em 1.7em; border-radius:100px; border:1.5px solid transparent;
  transition:all .35s var(--ease); cursor:pointer; }
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-blue{ background:var(--blue); color:var(--cream); }
.btn-blue:hover{ background:var(--blue); transform:translateY(-2px); box-shadow:0 8px 22px rgba(21,39,92,.4); }
.btn-ghost{ border-color:currentColor; }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.on-dark .btn-ghost:hover{ background:var(--cream); color:var(--blue-deep); }

/* ---------- NAV ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; transition:background .4s var(--ease), padding .4s var(--ease);
  mix-blend-mode:normal; }
.nav.scrolled{ background:rgba(241,232,207,.86); backdrop-filter:blur(14px);
  padding:12px 28px; border-bottom:1px solid var(--line-l); }
.nav.scrolled.on-dark-nav{ background:rgba(8,15,37,.7); border-bottom-color:var(--line-d); }
.nav .brand{ font-family:var(--display); font-size:1.45rem; letter-spacing:.02em;
  text-transform:uppercase; line-height:.85; }
.nav .brand small{ display:block; font-size:.5em; letter-spacing:.4em; opacity:.7; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:.82rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px;
  width:0; background:currentColor; transition:width .35s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ opacity:1; }
.nav .nav-cta{ background:var(--blue); color:var(--cream)!important;
  padding:.62em 1.4em; border-radius:100px; line-height:1;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.nav-cta::after{ display:none; }
.nav .nav-cta:hover{ background:var(--blue); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(21,39,92,.42); }
.menu-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px;
  flex-direction:column; gap:5px; }
.menu-toggle span{ width:26px; height:2px; background:currentColor; transition:.3s var(--ease); }

/* light vs dark text for nav depending on page hero */
.nav.text-light{ color:var(--cream); }
.nav.text-dark{ color:var(--ink); }

/* ---------- sections ---------- */
section{ position:relative; }
.pad{ padding:clamp(70px,10vw,140px) 0; }
.dark{ background:var(--blue-deep); color:var(--cream); }
.darker{ background:var(--blue-night); color:var(--cream); }
.light{ background:var(--cream); color:var(--ink); }
.blue{ background:var(--blue); color:var(--cream); }
.on-dark{ color:var(--cream); }
.center{ text-align:center; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

/* ---------- HERO ---------- */
.hero{ min-height:100vh; display:flex; align-items:flex-end; position:relative;
  overflow:hidden; background:var(--blue-night); color:var(--cream); padding-bottom:7vh; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.02) brightness(.74); }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,15,37,.55) 0%, rgba(7,15,37,.2) 30%, rgba(7,15,37,.85) 100%); }
.hero .wrap{ position:relative; z-index:2; }
.hero .display{ margin:0; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.hero .display .out{ -webkit-text-stroke:2px var(--cream); color:transparent; }
.hero-sub{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-top:26px; border-top:1px solid var(--line-d); padding-top:24px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.scroll-hint{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:3; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; opacity:.7;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint::after{ content:""; width:1px; height:34px; background:var(--cream);
  animation:scrolldot 1.8s var(--ease) infinite; transform-origin:top; }
@keyframes scrolldot{ 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }

/* page banner (interior pages) */
.banner{ min-height:54vh; display:flex; align-items:flex-end; position:relative;
  overflow:hidden; background:var(--blue-deep); color:var(--cream); padding:140px 0 56px; }
.banner .eyebrow{ color:var(--tan-line); }
.banner .deco{ position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  font-family:var(--display); font-size:34vw; line-height:.8; color:rgba(241,232,207,.05);
  z-index:0; pointer-events:none; white-space:nowrap; }
.banner .wrap{ position:relative; z-index:2; }

/* ---------- marquee ---------- */
.marquee{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d); padding:18px 0; }
.marquee-track{ display:inline-flex; gap:46px; animation:marq 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{ font-family:var(--display); font-size:1.7rem; text-transform:uppercase;
  letter-spacing:.04em; display:inline-flex; align-items:center; gap:46px; }
.marquee .dot{ width:9px; height:9px; border-radius:50%; background:var(--tan-line); display:inline-block; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- intro split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.split.rev .col-media{ order:2; }
.col-media{ position:relative; }
.col-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px; }
.col-media .tag{ position:absolute; bottom:16px; left:16px; background:var(--blue);
  color:var(--cream); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.5em 1em; border-radius:100px; }
.stat-row{ display:flex; gap:40px; margin-top:34px; flex-wrap:wrap; }
.stat .n{ font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--blue); }
.dark .stat .n, .darker .stat .n, .blue .stat .n{ color:var(--tan-line); }
.stat .l{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }

/* ---------- feature cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{ border:1px solid var(--line-d); border-radius:8px; padding:34px 28px;
  transition:transform .4s var(--ease), background .4s var(--ease); }
.light .card{ border-color:var(--line-l); }
.card:hover{ transform:translateY(-6px); }
.dark .card:hover, .darker .card:hover{ background:rgba(241,232,207,.04); }
.light .card:hover{ background:var(--cream-soft); }
.card .num{ font-family:var(--display); font-size:1.1rem; color:var(--tan-line); }
.card h3{ margin:14px 0 10px; }

/* ---------- menu ---------- */
.menu-cat{ margin-bottom:60px; }
.menu-cat-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; border-bottom:2px solid currentColor; padding-bottom:14px; margin-bottom:26px; }
.menu-cat-head h2{ font-size:clamp(2rem,4vw,3.4rem); }
.menu-cat-head .es{ font-family:var(--display); opacity:.4; font-size:1.4rem; }
.menu-item{ display:grid; grid-template-columns:1fr auto; gap:6px 18px;
  padding:16px 0; border-bottom:1px solid var(--line-l); align-items:baseline; }
.dark .menu-item, .darker .menu-item{ border-bottom-color:var(--line-d); }
.menu-item .mi-name{ font-weight:600; font-size:1.08rem; }
.menu-item .mi-name .pill{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--tan-line); color:var(--tan-line); border-radius:100px;
  padding:.15em .6em; margin-left:8px; vertical-align:middle; }
.menu-item .mi-price{ font-family:var(--display); font-size:1.3rem; color:var(--blue); }
.dark .mi-price, .darker .mi-price{ color:var(--tan-line); }
.menu-item .mi-desc{ grid-column:1/2; font-size:.92rem; color:var(--muted-l); }
.dark .mi-desc, .darker .mi-desc{ color:var(--muted-d); }

/* ---------- gallery ---------- */
.gallery{ columns:3; column-gap:16px; }
.gallery .g-item{ break-inside:avoid; margin-bottom:16px; border-radius:6px;
  overflow:hidden; position:relative; background:var(--blue-deep); }
.gallery .g-item img{ width:100%; transition:transform .6s var(--ease), filter .6s var(--ease);
  filter:saturate(1.02); }
.gallery .g-item:hover img{ transform:scale(1.05); }
.gallery .g-cap{ position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px;
  background:linear-gradient(transparent, rgba(7,15,37,.82)); color:var(--cream);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; opacity:0;
  transform:translateY(8px); transition:.4s var(--ease); }
.gallery .g-item:hover .g-cap{ opacity:1; transform:none; }
/* css-art tiles (when no photo) */
.art-tile{ aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:2rem; text-transform:uppercase; color:var(--cream);
  text-align:center; padding:20px; }
.art-1{ background:radial-gradient(circle at 30% 30%, #1C3470, #0C1A3E); }
.art-2{ background:linear-gradient(135deg,#15275C,#070F25); }
.art-3{ background:linear-gradient(135deg,#C7B083,#15275C); color:var(--blue-night); }
.art-4{ background:radial-gradient(circle at 70% 20%, #E8DBB9, #15275C); color:var(--blue-night); }
.art-5{ aspect-ratio:1/1.3; background:linear-gradient(180deg,#0C1A3E,#1C3470); }
.art-6{ aspect-ratio:1/1.3; background:repeating-linear-gradient(45deg,#15275C 0 14px,#102047 14px 28px); }

/* ---------- visit / contact ---------- */
.info-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start; }
.info-list{ list-style:none; padding:0; margin:0; }
.info-list li{ padding:22px 0; border-bottom:1px solid var(--line-d);
  display:grid; grid-template-columns:130px 1fr; gap:16px; align-items:baseline; }
.info-list .k{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; opacity:.6; }
.info-list .v{ font-size:1.12rem; }
.info-list .v a:hover{ color:var(--tan-line); }
.hours-tbl{ width:100%; border-collapse:collapse; }
.hours-tbl td{ padding:11px 0; border-bottom:1px solid var(--line-d); font-size:1rem; }
.hours-tbl td:last-child{ text-align:right; font-weight:600; }
.hours-tbl tr.today td{ color:var(--tan-line); }
.map-card{ border-radius:10px; overflow:hidden; border:1px solid var(--line-d); }
.map-card iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.2) contrast(1.05); }

/* big CTA */
.cta-big{ text-align:center; }
.cta-big h2{ font-size:clamp(2.6rem,7vw,6rem); }

/* ---------- footer ---------- */
.footer{ background:var(--blue-night); color:var(--cream); padding:70px 0 34px; }
.footer-top{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:50px;
  border-bottom:1px solid var(--line-d); }
.footer .brand-lg{ font-family:var(--display); font-size:clamp(2.4rem,5vw,4rem);
  line-height:.9; text-transform:uppercase; }
.footer h4{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.55; margin:0 0 18px; font-weight:700; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer ul li{ margin-bottom:11px; }
.footer ul a{ opacity:.85; transition:.3s; } .footer ul a:hover{ opacity:1; color:var(--tan-line); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; padding-top:26px; font-size:.78rem; opacity:.6; }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .gallery{ columns:2; }
  .info-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer .brand-lg{ grid-column:1/-1; }
}
@media (max-width:720px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(78vw,360px);
    background:var(--blue-night); color:var(--cream); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:26px; padding:40px;
    transform:translateX(100%); transition:transform .45s var(--ease); z-index:1001; }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1.1rem; }
  .menu-toggle{ display:flex; z-index:1002; }
  .menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ opacity:0; }
  .menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .split{ grid-template-columns:1fr; }
  .split.rev .col-media{ order:0; }
  .grid-3{ grid-template-columns:1fr; }
  .gallery{ columns:1; }
  .footer-top{ grid-template-columns:1fr; }
  .hero-sub{ flex-direction:column; align-items:flex-start; }
  .menu-cat-head{ flex-direction:column; align-items:flex-start; gap:6px; }
}