/* Gallito Taqueria.
   Turquoise and yellow read off their own rooster logo and the turquoise
   shipping container storefront they trade from. Anton for display because it
   is the closest free face to the chunky condensed GALLITO wordmark, Outfit
   for text. Daylight, on purpose: the sibling Alter Ego build is after dark. */

:root{
  --yellow:#F2C230;
  --teal:#2BBBC4;
  --teal-deep:#14818A;
  --coral:#E8543F;
  --ink:#141110;
  --ink-2:#2A2422;
  --paper:#FFFFFF;
  --paper-2:#FBF7EF;
  --muted:#6B625C;
  --line:#E7E0D6;

  --disp:'Anton',Impact,sans-serif;
  --body:'Outfit',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --wrap:1280px;
  --gut:clamp(26px,6vw,60px);
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
svg{width:1em;height:1em;flex:none}

h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:.98;margin:0;
  text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(2.7rem,8vw,6rem)}
h2{font-size:clamp(2.1rem,5vw,3.9rem)}
h3{font-size:clamp(1.45rem,2.6vw,2rem)}
h4{font-size:clamp(1.05rem,1.6vw,1.2rem);text-transform:none;
  font-family:var(--body);font-weight:600;letter-spacing:0}
h1.as-h2{font-size:clamp(2.1rem,5vw,3.9rem)}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--muted);max-width:54ch;
  margin-top:18px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--ink)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:10px var(--gut);
  display:flex;align-items:center;gap:20px}
.brand{flex:0 0 auto;line-height:0}
.brand img{height:clamp(46px,4.6vw,62px);width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.nav a{font:600 1rem/1 var(--body);text-decoration:none;color:#F6F1E8;padding:8px 0;
  transition:color .18s}
.nav a:hover,.nav a[aria-current=page]{color:var(--yellow)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;
  cursor:pointer;color:var(--yellow)}
.burger svg{width:28px;height:28px}
.scrim{display:none}

.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font:700 1rem/1 var(--body);padding:16px 34px;border-radius:999px;
  border:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px}
/* ⚠️ A PILL NEEDS MORE SIDE ROOM THAN A RECTANGLE. The 999px radius
   curves away from the text at both ends, so 26px measured fine and
   read as touching. */
.btn-fill{background:var(--yellow);color:var(--ink)}
.btn-fill:hover{background:var(--coral);color:#fff}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.lnk{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:700 1rem/1 var(--body);color:var(--teal-deep);margin-top:18px}
.lnk svg{width:18px;height:18px;transition:transform .18s}
.lnk:hover svg{transform:translateX(5px)}

/* ---------- hero: their photography is PORTRAIT, so the hero is a split ---- */
.hero{background:var(--teal);color:var(--ink);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:stretch;gap:0}
.hero-img{order:2;min-height:clamp(340px,52vw,680px)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-in{order:1;align-self:center;padding-top:clamp(48px,7vw,92px);
  padding-bottom:clamp(48px,7vw,92px)}
.hero-in h1{max-width:12ch}
.hero-in .lede{color:#0F3A3D;max-width:44ch}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,112px) 0}
.sec-deal{background:var(--ink);color:#F6F1E8;padding:clamp(34px,4.6vw,60px) 0}
.sec-gal{padding-bottom:0}
.sec-end{background:var(--yellow);text-align:center}
.sec-end .cta-row{justify-content:center}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;
  justify-content:space-between;margin-bottom:clamp(26px,3.4vw,44px)}
.sec-head .lnk{margin-top:0}
.split{display:grid;gap:clamp(28px,5vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.phero{background:var(--paper-2);padding:clamp(58px,8vw,116px) 0 clamp(30px,4vw,52px);
  border-bottom:4px solid var(--yellow)}

/* their talavera tile as the section rhythm */
.tile{height:clamp(56px,7vw,92px);background-image:var(--t);
  background-size:auto 100%;background-repeat:repeat-x;background-position:center}

.deals{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,3vw,40px);
  grid-template-columns:repeat(2,1fr)}
.d-w{display:inline-block;font:700 1rem/1 var(--body);color:var(--yellow);
  margin-bottom:10px}
.deals h3{color:#fff;margin:0 0 8px}
.deals p{margin:0;color:#D9D2C9;font-size:1rem}

.locs{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:repeat(2,1fr)}
.locs-2{margin-top:26px}
.loc{background:var(--paper-2);border-radius:var(--r);padding:clamp(24px,3vw,34px);
  border:1px solid var(--line)}
.loc h3{margin:0 0 10px}
.loc-a{font:600 1.0625rem/1.5 var(--body);margin:0 0 12px;color:var(--teal-deep)}
.loc p{font-size:1rem;color:var(--muted)}
.loc-sv{font-weight:600;color:var(--ink)}
.hrs{margin:16px 0 0;display:grid;gap:8px}
.hrs div{display:flex;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.hrs dt{margin:0;font-size:1rem;color:var(--muted)}
.hrs dd{margin:0;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}

/* portrait gallery, edge to edge */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  margin-top:clamp(28px,4vw,48px)}
.gal figure{margin:0;overflow:hidden;aspect-ratio:3/4}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.04)}

.wide{margin:0 0 clamp(26px,4vw,44px);border-radius:var(--r);overflow:hidden}
.wide img{width:100%;height:auto;max-height:66vh;object-fit:cover}
/* ⚠️ ARTWORK IS NOT A PHOTOGRAPH. object-fit:cover crops to fill, which is
   right for a photo and wrong for a designed graphic: on the catering tile it
   cut the top off "GET YOUR FAVORITES" and the bottom off "TAQUERIA". Art is
   shown whole, at its own aspect ratio, and sized rather than cropped. */
.art{margin:0 auto clamp(26px,4vw,44px);max-width:620px;border-radius:var(--r);
  overflow:hidden}
.art img{width:100%;height:auto;max-height:none;object-fit:contain}

.mloc{margin:0 0 clamp(50px,7vw,92px)}
.mloc h2{margin:0 0 6px}
.msec{margin:clamp(26px,3.4vw,44px) 0 0}
.msec h3{margin:0 0 6px;color:var(--teal-deep)}
.per{font:600 1rem/1.5 var(--body);color:var(--muted);margin:0 0 10px}
.mlist{list-style:none;margin:0;padding:0}
.mlist li{display:flex;gap:20px;justify-content:space-between;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line)}
.mlist h4{margin:0}
.mlist p{margin:5px 0 0;color:var(--muted);font-size:1rem;max-width:56ch}
.mlist span{font:700 1.0625rem/1 var(--body);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.veg{font:700 1rem/1 var(--body);color:var(--teal-deep)}

.ords{display:grid;gap:clamp(18px,2.6vw,30px);grid-template-columns:repeat(2,1fr)}
.ord{display:block;text-decoration:none;background:var(--teal);color:var(--ink);
  border-radius:var(--r);padding:clamp(26px,3.4vw,40px);transition:transform .22s}
.ord:hover{transform:translateY(-5px)}
.ord h3{margin:0 0 10px}
.ord p{margin:0;font-size:1rem;color:#0F3A3D}
.ord .lnk{color:var(--ink)}

.big-link{font-family:var(--disp);font-size:clamp(1.3rem,2.6vw,2rem);margin:0 0 14px;
  text-transform:none}
.big-link a{text-decoration:none;color:var(--teal-deep)}
.big-link a:hover{color:var(--coral)}

.form{display:grid;gap:15px;align-content:start;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.form label{display:grid;gap:7px;font:600 1rem/1.3 var(--body);color:var(--muted)}
.form input,.form textarea{font:400 1.0625rem/1.5 var(--body);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;
  width:100%}
.form input:focus,.form textarea:focus{outline:2px solid var(--teal);
  outline-offset:1px;border-color:transparent}
.form .btn{justify-self:start;border:0;cursor:pointer;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:0;font-size:1rem;color:var(--teal-deep);min-height:1.4em}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#D9D2C9;padding:clamp(48px,6vw,76px) 0 26px}
.foot-top{display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.8fr)}
.foot-mark{height:clamp(84px,9vw,118px);width:auto;border-radius:10px}
.foot-em{margin:18px 0 0;font-size:1rem}
.foot-em a{color:var(--yellow);text-decoration:none}
.foot h3{font-family:var(--body);font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--yellow);margin:0 0 10px}
.foot-locs{display:grid;gap:22px}
.foot-locs p{margin:0;font-size:1rem;line-height:1.7}
.foot-nav{display:grid;gap:9px}
.foot-nav a{text-decoration:none;color:#D9D2C9;font-size:1rem}
.foot-nav a:hover{color:var(--yellow)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  margin-top:clamp(34px,4.6vw,56px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);font-size:1rem}
.foot-bottom p{margin:0}
.foot-bottom a{color:var(--yellow)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

@media(max-width:1060px){
  /* The drawer is position:fixed inside .hdr, so the header must not carry a
     backdrop-filter, filter or transform: any of them would make the drawer lay
     out against the header box and open as a sliver. */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:var(--ink);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:96px 28px 28px;transform:translateX(100%);margin-left:0;
    transition:transform .34s cubic-bezier(.4,0,.2,1);overflow-y:auto;z-index:70}
  .nav[data-open=true]{transform:translateX(0)}
  .nav a{font-size:1.2rem;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .nav .btn{margin-top:20px;justify-content:center}
  .burger{display:block}
  .scrim{display:block;position:fixed;inset:0;background:#000;opacity:0;
    visibility:hidden;transition:opacity .3s,visibility .3s;z-index:55}
  .scrim[data-open=true]{opacity:.55;visibility:visible}
  .hero{grid-template-columns:1fr}
  .hero-img{order:1;min-height:clamp(300px,62vw,520px)}
  .hero-in{order:2}
  .split,.locs,.ords,.deals{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr}
  .mlist li{flex-direction:column;gap:5px}
}

/* Instagram, from their own live site. 44px tap target, mark plus handle. */
.ig{display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  text-decoration:none;color:#D9D2C9;font:600 1rem/1 var(--body);min-height:44px}
.ig svg{width:22px;height:22px}
.ig:hover{color:var(--yellow)}
.ig:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* Order button inside a location card. */
.loc-btn{margin-top:18px}
.ord .btn{margin-top:16px}
.ord .lnk{display:block;margin-top:14px}