/* Linda Vista Market — "La Tiendita" warm photo-forward system
   Fonts: DM Serif Display (headlines) · Figtree (body) · Caveat (handwritten board accents) */

:root{
  /* color — semantic token contract */
  --surface:    #efdfb6;   /* warm masa, page bg */
  --surface-2:  #f8efd6;   /* card / panel surface */
  --ink:        #281a10;   /* warm brown-black text */
  --ink-soft:   #6e5a40;   /* secondary text */
  --accent:     #c5331c;   /* brick red, from the tile roof */
  --accent-deep:#9c2613;   /* darker brick, hovers */
  --line:       #d9c094;   /* hairlines */
  /* extra brand colors pulled from the real sign */
  --sky:        #4d92bf;   /* airbrush sky blue */
  --sun:        #efb13e;   /* sign yellow */
  --leaf:       #2f7d52;   /* sign green */
  --rosa:       #d85a86;   /* sign pink */
  /* type */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body:    "Figtree", system-ui, sans-serif;
  --font-label:   "Figtree", system-ui, sans-serif;
  --font-script:  "Caveat", cursive;
}

*{ box-sizing:border-box; margin:0; padding:0; }
img{ height:auto; display:block; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--surface);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
.wrap{ width:min(1140px,92vw); margin-inline:auto; }
.eyebrow{
  font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em;
  font-size:.74rem; font-weight:600; color:var(--accent);
}

/* ── papel picado band (real storefront motif) ─────────────────── */
.papel{
  height:34px; width:100%;
  /* Seamless 5-flag tile (sky·rosa·sun·leaf·brick) with cut-out picado holes.
     SVG background repeats horizontally so flags never distort at any width;
     the holes are true transparency, so they read over the hero and the dark footer alike. */
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20170%2034'%20preserveAspectRatio='xMinYMin%20meet'%3E%3Crect%20x='0'%20y='2'%20width='170'%20height='2'%20fill='%23b89a63'/%3E%3Cpath%20d='M2,4%20h30%20v18%20q-5,6%20-10,0%20q-5,6%20-10,0%20q-5,6%20-10,0%20zM15,11%20a2,2%200%201,0%204,0%20a2,2%200%201,0%20-4,0%20zM9,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM23,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM17,16%20L19,18%20L17,20%20L15,18%20z'%20fill='%234d92bf'%20fill-rule='evenodd'/%3E%3Cpath%20d='M36,4%20h30%20v18%20q-5,6%20-10,0%20q-5,6%20-10,0%20q-5,6%20-10,0%20zM49,11%20a2,2%200%201,0%204,0%20a2,2%200%201,0%20-4,0%20zM43,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM57,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM51,16%20L53,18%20L51,20%20L49,18%20z'%20fill='%23d85a86'%20fill-rule='evenodd'/%3E%3Cpath%20d='M70,4%20h30%20v18%20q-5,6%20-10,0%20q-5,6%20-10,0%20q-5,6%20-10,0%20zM83,11%20a2,2%200%201,0%204,0%20a2,2%200%201,0%20-4,0%20zM77,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM91,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM85,16%20L87,18%20L85,20%20L83,18%20z'%20fill='%23efb13e'%20fill-rule='evenodd'/%3E%3Cpath%20d='M104,4%20h30%20v18%20q-5,6%20-10,0%20q-5,6%20-10,0%20q-5,6%20-10,0%20zM117,11%20a2,2%200%201,0%204,0%20a2,2%200%201,0%20-4,0%20zM111,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM125,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM119,16%20L121,18%20L119,20%20L117,18%20z'%20fill='%232f7d52'%20fill-rule='evenodd'/%3E%3Cpath%20d='M138,4%20h30%20v18%20q-5,6%20-10,0%20q-5,6%20-10,0%20q-5,6%20-10,0%20zM151,11%20a2,2%200%201,0%204,0%20a2,2%200%201,0%20-4,0%20zM145,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM159,10%20a1,1%200%201,0%202,0%20a1,1%200%201,0%20-2,0%20zM153,16%20L155,18%20L153,20%20L151,18%20z'%20fill='%23c5331c'%20fill-rule='evenodd'/%3E%3C/svg%3E") repeat-x left top/170px 34px;
  opacity:.92;
}

/* ── buttons ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-label); font-weight:700; font-size:1rem;
  padding:.78em 1.4em; border-radius:999px; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn--call{ background:var(--accent); color:#fff; box-shadow:0 8px 22px -8px rgba(154,50,32,.7); }
.btn--call:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--surface-2); }
.btn--light{ background:var(--surface-2); color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,0,0,.4); }

/* ── header (over the hero photo, white) ───────────────────────── */
.site-head{ position:absolute; top:34px; left:0; right:0; z-index:30; }
.site-head .bar{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.brand{ display:flex; flex-direction:column; line-height:1; text-decoration:none; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.55); }
.brand b{ font-family:var(--font-display); font-size:1.45rem; letter-spacing:.01em; }
.brand span{ font-family:var(--font-label); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; margin-top:.3rem; color:rgba(255,255,255,.92); }
.head-call{ display:inline-flex; align-items:center; gap:.5em; font-weight:700; color:#fff; text-decoration:none; background:var(--accent); padding:.55em 1.1em; border-radius:999px; box-shadow:0 6px 18px -6px rgba(0,0,0,.5); }
.head-call:hover{ background:var(--accent-deep); }

/* ── hero (full-bleed photo: sign visible up top, text in lower band) ── */
.hero{
  position:relative; min-height:90vh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("images/photos/lvm1.webp") center 14% / cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(38,16,8,.28) 0%, rgba(38,16,8,.05) 18%,
    rgba(52,14,7,.66) 48%, rgba(22,9,4,.97) 88%);
}
.hero .wrap{ padding:3rem 0 3.4rem; }
.hero .kick{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:700; color:var(--sun); }
.hero h1{
  font-family:var(--font-display); font-weight:400; color:#fff;
  font-size:clamp(2.7rem,6.4vw,5.4rem); line-height:1; margin:.7rem 0 0; max-width:16ch;
  text-shadow:0 3px 26px rgba(0,0,0,.5);
}
.hero h1 .paint{ font-style:italic; color:var(--sun); }
.hero .lede{ font-size:clamp(1.08rem,1.5vw,1.28rem); max-width:44ch; margin-top:1.2rem; color:rgba(255,255,255,.94); text-shadow:0 2px 16px rgba(0,0,0,.6); }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem; }
.hero-facts{ list-style:none; display:flex; gap:2rem; flex-wrap:wrap; margin-top:2rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.25); }
.hero-facts li{ font-size:.9rem; color:rgba(255,255,255,.85); white-space:nowrap; }
.hero-facts b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:#fff; line-height:1; margin-bottom:.25rem; }
.hero-facts b span{ color:var(--sun); font-size:1.1rem; }

/* ── photo showcase (image stands alone, caption beneath) ──────── */
.showcase{ margin:0; }
.showcase img{ width:100%; height:clamp(280px,44vw,500px); object-fit:cover; object-position:center 32%; }
.showcase figcaption{
  background:var(--ink); color:var(--surface-2); text-align:center;
  font-family:var(--font-label); font-size:.84rem; letter-spacing:.01em;
  padding:.85rem 1.2rem;
}

/* ── photo showcase (image stands alone, caption beneath) ──────── */
.showcase{ margin:0; }
.showcase img{ width:100%; height:clamp(280px,44vw,500px); object-fit:cover; object-position:center 32%; }
.showcase figcaption{
  background:var(--ink); color:var(--surface-2); text-align:center;
  font-family:var(--font-label); font-size:.84rem; letter-spacing:.01em;
  padding:.85rem 1.2rem;
}

/* ── pillars intro ─────────────────────────────────────────────── */
.pillars-intro{ max-width:32ch; margin-bottom:2.6rem; }
.pillars-intro h2{ font-family:var(--font-display); font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.06; margin-bottom:.7rem; }
.pillars-intro p{ color:var(--ink-soft); font-size:1.1rem; }

/* ── testimonial (typographic, no photo) ───────────────────────── */
.testimonial{ background:var(--ink); color:var(--surface-2); padding:clamp(3rem,6vw,4.6rem) 0; text-align:center; }
.testimonial .stars{ color:var(--sun); font-size:1.3rem; letter-spacing:.1em; }
.testimonial blockquote{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.7rem); line-height:1.2; max-width:24ch; margin:1rem auto 1.1rem;
  color:var(--surface-2);
}
.testimonial .by{ font-family:var(--font-label); font-size:.92rem; color:rgba(255,250,240,.66); }
.testimonial .by a{ color:var(--sun); text-decoration:none; border-bottom:1px solid currentColor; }

/* ── three pillars ─────────────────────────────────────────────── */
.pillars{ padding:1.4rem 0 3.8rem; }
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.pillar{ padding:0 2.3rem; border-left:1px solid var(--line); }
.pillar:first-child{ padding-left:0; border-left:0; }
.pillar:last-child{ padding-right:0; }
.pillar .n{ font-family:var(--font-label); font-size:.8rem; font-weight:700; letter-spacing:.1em; color:var(--accent); }
.pillar h3{ font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.2rem); line-height:1; margin:.55rem 0 .15rem; }
.pillar .es{ font-family:var(--font-label); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft); }
.pillar p{ margin-top:1rem; color:var(--ink-soft); font-size:1.04rem; }

/* ── menu board (echoes the real in-store board) ───────────────── */
.cocina{ padding:1rem 0 4rem; }
.board{
  border:3px solid var(--ink); border-radius:10px;
  padding:2.4rem clamp(1.4rem,4vw,3rem) 2.2rem;
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(180deg, #f4e7c8 0 33px, #e7d6ac 33px 34px);
  box-shadow:0 22px 46px -26px rgba(42,28,18,.7);
}
.board-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.board-head h2{ font-family:var(--font-display); font-size:clamp(2rem,5vw,2.9rem); color:var(--ink); line-height:1; }
.board-head .note{ font-family:var(--font-script); font-size:1.5rem; color:var(--accent); }
.menu-cols{ columns:3; column-gap:2.4rem; }
.mcat{ break-inside:avoid; margin-bottom:1.7rem; }
.mcat .tag{
  display:inline-block; background:var(--accent); color:#fff;
  font-family:var(--font-label); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.82rem; padding:.26em .7em; border-radius:5px;
  box-shadow:0 2px 0 var(--accent-deep);
}
.mcat .en{ font-size:.66rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; display:block; margin-top:.45rem; }
.mcat ul{ list-style:none; margin-top:.6rem; }
.mcat li{
  display:flex; align-items:center; gap:.55rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  font-size:.9rem; color:var(--ink); padding:.2rem 0;
}
.mcat li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.board .foot{ margin-top:1.4rem; padding-top:1.4rem; border-top:2px solid var(--ink); font-size:.96rem; color:var(--ink-soft); }
.board .foot a{ color:var(--accent-deep); font-weight:600; text-decoration:none; }
.board .foot a:hover{ text-decoration:underline; }

/* ── services strip ────────────────────────────────────────────── */
.services{ padding:.5rem 0 4.4rem; }
.services .lead{ max-width:54ch; margin-bottom:1.6rem; }
.services .lead h2{ font-family:var(--font-display); font-size:clamp(1.8rem,4.4vw,2.7rem); line-height:1.1; margin-bottom:.5rem; }
.services .lead p{ color:var(--ink-soft); font-size:1.08rem; }
.svc-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.svc{ display:flex; gap:.95rem; padding:1.6rem 1.5rem; border-left:1px solid var(--line); }
.svc:first-child{ border-left:0; padding-left:0; }
.svc:last-child{ padding-right:0; }
.svc .ic{ width:30px; height:30px; color:var(--accent); flex-shrink:0; margin-top:.15rem; }
.svc h3{ font-family:var(--font-display); font-weight:400; font-size:1.25rem; line-height:1; }
.svc .es{ font-family:var(--font-label); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); display:block; margin:.3rem 0 .5rem; }
.svc p{ font-size:.92rem; color:var(--ink-soft); }

/* ── visit ─────────────────────────────────────────────────────── */
.visit{ padding:4.4rem 0; }
.visit .hours-h{ font-size:1.5rem; margin-bottom:1rem; }
.visit .grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.6rem; align-items:start; }
.visit h2{ font-family:var(--font-display); font-size:clamp(2rem,5vw,3rem); line-height:1.06; margin-bottom:.5rem; }
.visit .sub{ color:var(--ink-soft); font-size:1.12rem; margin-bottom:1.6rem; }
.addr-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.7rem; }
.addr-card .lbl{ font-family:var(--font-label); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft); }
.addr-card .addr{ font-family:var(--font-display); font-size:1.4rem; line-height:1.18; margin:.25rem 0 1.1rem; }
.addr-card .phone{ font-family:var(--font-display); font-size:1.8rem; text-decoration:none; color:var(--accent-deep); }
.addr-card .phone:hover{ color:var(--accent); }
.addr-card .cta-row{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.hours{ list-style:none; }
.hours li{ display:flex; justify-content:space-between; padding:.64rem .2rem; border-bottom:1px solid var(--line); font-size:1rem; }
.hours li:last-child{ border-bottom:0; }
.hours li.today{ font-weight:700; color:var(--accent-deep); }
.hours li.today .t::after{ content:" · Open now"; color:var(--leaf); font-weight:600; font-size:.86rem; }
.hours .d{ font-family:var(--font-label); }

/* ── footer ────────────────────────────────────────────────────── */
.site-foot{ background:var(--ink); color:var(--surface-2); }
.site-foot .papel{ opacity:.9; }
.site-foot .inner{ padding:3rem 0 2rem; }
.site-foot .top{ display:flex; justify-content:space-between; gap:2.4rem; flex-wrap:wrap; }
.site-foot .fbrand b{ font-family:var(--font-display); font-size:1.8rem; display:block; line-height:1; }
.site-foot .fbrand span{ font-family:var(--font-script); font-size:1.4rem; color:var(--sun); }
.site-foot .fcol{ font-size:.96rem; line-height:1.85; }
.site-foot .fcol a{ color:var(--surface-2); text-decoration:none; }
.site-foot .fcol a:hover{ color:var(--sun); }
.site-foot .fcol .h{ font-family:var(--font-label); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,250,240,.55); display:block; margin-bottom:.5rem; }
.site-foot .credit{ border-top:1px solid rgba(255,250,240,.18); margin-top:2.4rem; padding-top:1.2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.86rem; color:rgba(255,250,240,.66); }
.site-foot .credit a{ color:var(--sun); text-decoration:none; }
.site-foot .credit a:hover{ text-decoration:underline; }

/* ── reveal ────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width:860px){
  .pillar-grid{ grid-template-columns:1fr; gap:0; }
  .pillar{ padding:1.7rem 0; border-left:0; border-top:1px solid var(--line); }
  .pillar:first-child{ padding-top:0; border-top:0; }
  .menu-cols{ columns:2; }
  .svc-strip{ grid-template-columns:1fr 1fr; }
  .svc{ border-top:1px solid var(--line); }
  .svc:nth-child(-n+2){ border-top:0; }
  .svc:nth-child(odd){ border-left:0; padding-left:0; }
  .svc:nth-child(even){ padding-right:0; }
  .visit .grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .head-call .txt{ display:none; }
  /* hero: push the sign to the very top, make the lower text band near-solid */
  .hero{ min-height:94vh; }
  .hero::before{ background-position:center 8%; }
  .hero::after{
    background:linear-gradient(180deg,
      rgba(38,16,8,.3) 0%, rgba(38,16,8,.08) 14%,
      rgba(40,12,6,.74) 38%, rgba(18,8,4,.99) 72%);
  }
  .hero h1{ font-size:2.45rem; }
  .menu-cols{ columns:1; }
  .svc-strip{ grid-template-columns:1fr; }
  .svc{ border-left:0; padding:1.3rem 0; border-top:1px solid var(--line); }
  .svc:first-child{ border-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero::before{ transform:none; }
  html{ scroll-behavior:auto; }
}