/* ==========================================================================
   DeliJey Food Truck Hondureña — Indianapolis, IN
   Palette read off their own truck and menu board: the Honduran flag blue in
   the "D" of the logo, the white of the truck body, the gold of fried tajadas
   and the scarlet of the macaw on the sign. Nothing invented.
   ========================================================================== */
:root{
  --ink:#060E18;
  --ink-2:#0B1725;
  --ink-3:#122334;
  --cream:#F6F1E7;
  --azul:#1B84D6;
  --azul-deep:#0D5FA6;
  --gold:#E6A54A;
  --gold-deep:#B87B21;
  --macaw:#D8402B;
  --muted:rgba(246,241,231,.68);
  --muted-l:rgba(246,241,231,.84);
  --muted-dark:#5A5A57;
  --line:rgba(246,241,231,.16);
  --line-2:rgba(246,241,231,.26);
  --line-dark:rgba(6,14,24,.14);
  --disp:'Bebas Neue',Impact,system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1160px;
  --gut:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);
  font-size:17px;line-height:1.62;padding-bottom:78px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
section[id]{scroll-margin-top:84px}
.pad{padding-block:clamp(52px,6vw,96px)}

h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;line-height:1.02;
  letter-spacing:.012em;text-transform:uppercase;text-wrap:balance}
h2{font-size:clamp(34px,4.6vw,58px);margin-bottom:16px;max-width:22ch}
h3{font-size:24px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
.kick{font-family:var(--body);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:14px}
.sub{color:var(--muted);max-width:64ch;font-size:17px}
.es{font-style:italic}

nav a,header a,footer a,.cline a,.btn,.tap{min-height:44px;display:inline-flex;align-items:center}
.btn{padding:0 22px;border-radius:9999px;text-decoration:none;font-weight:700;
  font-family:var(--body);letter-spacing:.05em;text-transform:uppercase;font-size:14px;
  border:2px solid transparent;justify-content:center;
  transition:transform .16s ease,filter .16s ease}
.btn-azul{background:var(--azul-deep);color:#fff}
.btn-gold{background:var(--gold);color:#1B1204}
.btn-out{border-color:var(--line-2);color:var(--cream)}
.btn-out.dark{border-color:var(--line-dark);color:var(--ink)}
.btn-light{background:var(--cream);color:var(--ink)}
@media(hover:hover){.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}}

/* ---------------- header ---------------- */
header{position:sticky;top:0;z-index:60;background:rgba(6,14,24,.94);
  backdrop-filter:saturate(140%) blur(9px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:11px}
.brand{text-decoration:none;color:var(--cream);display:flex;align-items:center;gap:11px}
.bflag{width:30px;height:30px;border-radius:7px;flex:0 0 30px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--azul) 0 33%,#fff 33% 67%,var(--azul) 67% 100%);
  color:var(--azul-deep);font:700 13px/1 var(--body)}
.btext{display:flex;flex-direction:column;justify-content:center}
.bname{font-family:var(--disp);font-size:25px;letter-spacing:.04em;line-height:1}
.bname em{font-style:normal;color:var(--azul)}
.bsub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;line-height:1.3;margin-top:2px}
nav{display:flex;align-items:center;gap:4px}
nav a.nl{color:var(--cream);text-decoration:none;font-weight:600;font-size:15px;padding:0 11px;opacity:.86}
@media(hover:hover){nav a.nl:hover{opacity:1;color:var(--gold)}}
@media(max-width:940px){nav a.nl{display:none}}

/* ---------------- hero ---------------- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
/* the night shot is dark to begin with, so the scrim leans on a left-to-right
   wash — the copy stays readable while the lit truck keeps its detail */
.hero .shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,14,24,.90) 0%,rgba(6,14,24,.72) 42%,rgba(6,14,24,.34) 100%),
             linear-gradient(180deg,rgba(6,14,24,.30) 0%,rgba(6,14,24,.50) 58%,rgba(6,14,24,.94) 100%),
             url('../img/truck-night-w1520.jpg') center 46%/cover no-repeat}
@media(max-width:820px){
  .hero .shade{background:linear-gradient(180deg,rgba(6,14,24,.58) 0%,rgba(6,14,24,.78) 55%,rgba(6,14,24,.96) 100%),
               url('../img/truck-night-w1520.jpg') center 46%/cover no-repeat}
}
.hero-in{position:relative;padding-block:clamp(58px,7.4vw,116px)}
.eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:16px}
h1{font-size:clamp(46px,8vw,104px);letter-spacing:.01em;margin-bottom:18px;max-width:16ch}
h1 span{display:block;color:var(--azul)}
.lede{font-size:clamp(17px,1.9vw,20.5px);color:var(--muted-l);max-width:58ch;margin-bottom:24px}
.hrating{display:flex;align-items:center;gap:10px;margin:0 0 20px;flex-wrap:wrap}
.hrating .rnum{font-family:var(--disp);font-size:32px;line-height:1}
.hrating .rstars{color:#F0B93F;font-size:17px;letter-spacing:.08em}
.hrating .rcap{color:var(--muted);font-size:14px}
.hbtns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.hfacts{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px;color:var(--muted)}
.hfacts b{color:var(--cream);font-weight:600}

.nowpill{display:inline-flex;align-items:center;gap:9px;border-radius:100px;
  padding:7px 16px 7px 13px;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  border:1px solid var(--line-2);background:rgba(6,14,24,.55);margin-bottom:18px}
.nowpill .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.nowpill.is-open{border-color:rgba(74,196,120,.45);color:#7BE0A2}
.nowpill.is-open .dot{background:#4AC478;box-shadow:0 0 0 4px rgba(74,196,120,.18)}
.nowpill.is-shut{border-color:rgba(216,64,43,.42);color:#F09386}
.nowpill.is-shut .dot{background:var(--macaw)}
.nowpill .hint{font-weight:500;color:var(--muted)}

/* ---------------- marquee strip ---------------- */
.strip{background:var(--gold);color:#1B1204;overflow:hidden;padding:11px 0;
  border-block:3px solid var(--ink)}
.track{display:flex;width:max-content;animation:march 34s linear infinite}
.track span{font-family:var(--disp);font-size:19px;letter-spacing:.07em;text-transform:uppercase;
  padding:0 20px;display:inline-flex;align-items:center;gap:20px;white-space:nowrap;line-height:1}
.track span::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(27,18,4,.42)}
@keyframes march{to{transform:translateX(-50%)}}

/* ---------------- menu ---------------- */
.mtop{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:end}
@media(max-width:920px){.mtop{grid-template-columns:1fr;gap:24px;align-items:start}}
.pricepill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;background:var(--ink-2);font-size:14.6px;color:var(--muted)}
.pricepill b{font-family:var(--disp);font-size:26px;color:var(--cream);letter-spacing:.02em;
  line-height:1;white-space:nowrap;flex:none}

.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:960px){.mgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.mgrid{grid-template-columns:1fr}}
.mcard{border:1px solid var(--line);border-radius:16px;padding:24px 22px 20px;background:var(--ink-2);
  display:flex;flex-direction:column}
.mcard.wide{grid-column:span 1}
.mcard h3{font-size:21px;color:var(--gold);letter-spacing:.05em;margin-bottom:3px}
.mcard .gloss{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:16px}
.mcard ul{list-style:none;margin:0;padding:0}
.mcard li{padding:11px 0;border-bottom:1px solid rgba(246,241,231,.09)}
.mcard li:last-child{border-bottom:0;padding-bottom:0}
.mcard li b{display:block;font-weight:600;font-size:16.5px;color:var(--cream)}
.mcard li small{display:block;font-size:14px;color:var(--muted);line-height:1.5;margin-top:1px}
.mnote{margin-top:28px;font-size:15.5px;color:var(--muted);border-top:1px dashed var(--line);
  padding-top:22px;max-width:78ch}
.mnote b{color:var(--cream)}

.boardwrap{position:relative}
.boardwrap img{width:100%;border-radius:16px;border:1px solid var(--line);
  box-shadow:0 22px 55px rgba(0,0,0,.42)}
/* top-left, so it never sits over the phone number painted on the board */
.tagchip{position:absolute;left:12px;top:12px;background:rgba(6,14,24,.86);color:var(--cream);
  border:1px solid var(--line-2);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 12px;border-radius:100px;backdrop-filter:blur(6px)}

/* ---------------- food gallery ----------------
   Nine photos, a flat 3x3 on desktop and 2-up on phones — every tile the same
   4:5 crop so no row ever ends with a hole in it. */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:820px){.plates{grid-template-columns:repeat(2,1fr);gap:12px}}
.plate{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--ink-2);display:block}
.plate img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover){.plate:hover img{transform:scale(1.05)}}
.plate figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
  background:linear-gradient(180deg,transparent,rgba(6,14,24,.55) 38%,rgba(6,14,24,.93));
  font-family:var(--disp);font-size:23px;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.05;color:var(--cream)}
.plate figcaption small{display:block;font-family:var(--body);font-weight:400;font-size:13.4px;
  color:var(--muted-l);text-transform:none;letter-spacing:0;line-height:1.45;margin-top:5px}
@media(max-width:820px){
  .plate figcaption{font-size:19px;padding:36px 14px 13px}
  .plate figcaption small{font-size:12.4px}
}

/* ---------------- the truck (light band) ---------------- */
.band{background:var(--cream);color:var(--ink)}
.band .kick{color:var(--gold-deep)}
.band .sub{color:var(--muted-dark)}
.band h2{color:var(--ink)}
.bgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:32px}
@media(max-width:960px){.bgrid{grid-template-columns:1fr;gap:28px}}
.bshots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bshots img{width:100%;object-fit:cover;border-radius:14px;box-shadow:0 18px 44px rgba(6,14,24,.22)}
.bshots img:first-child{grid-column:1 / -1;aspect-ratio:16/10}
.bshots img:not(:first-child){aspect-ratio:1/1}
.spec{list-style:none;margin:0;padding:0}
.spec li{display:flex;align-items:flex-start;gap:13px;padding:15px 0;border-bottom:1px solid var(--line-dark)}
.spec li:last-child{border-bottom:0}
.spec svg{width:20px;height:20px;flex:0 0 20px;margin-top:3px;color:var(--azul-deep)}
.spec b{display:block;font-weight:700}
.spec small{display:block;font-size:15px;color:var(--muted-dark);line-height:1.5}

/* ---------------- reviews ---------------- */
.rev{background:var(--ink-2)}
.revhead{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:920px){.revhead{grid-template-columns:1fr;gap:26px}}
.gsum{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:18px;
  padding:22px 26px;background:var(--ink-3)}
.gbig{font-family:var(--disp);font-size:64px;line-height:.9;color:var(--cream)}
.gstars{color:#F0B93F;font-size:20px;letter-spacing:.1em;display:block}
.gof{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-top:5px}

.railwrap{margin-top:34px}
.railhead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.railhead .cap{font-size:13.6px;color:var(--muted)}
.railbtn{background:transparent;color:var(--muted);border:1px solid var(--line-2);
  border-radius:100px;padding:8px 18px;font:700 12.5px var(--body);letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;min-height:38px}
.railbtn:hover{color:var(--gold);border-color:var(--gold)}
.rail{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.railtrack{display:flex;gap:16px;width:max-content;animation:roll 52s linear infinite}
.rail:hover .railtrack,.rail.paused .railtrack{animation-play-state:paused}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rv{width:342px;flex:none;background:var(--ink-3);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px}
.rv .stars{color:#F0B93F;letter-spacing:2px;font-size:15px}
.rv p{margin:0}
.rv p.es{font-size:16.4px;color:var(--cream);line-height:1.5}
.rv p.en{font-size:14.2px;color:var(--muted);line-height:1.5}
.rv .who{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rv .nm{font-size:13.6px;font-weight:700;color:var(--cream)}
.rv .gchip{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--azul);background:rgba(27,132,214,.13);border:1px solid rgba(27,132,214,.3);
  border-radius:100px;padding:3px 9px}
@media(max-width:600px){.rv{width:278px}}

/* ---------------- hours + find us ---------------- */
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:32px;align-items:start}
@media(max-width:920px){.fgrid2{grid-template-columns:1fr;gap:32px}}
.hours{width:100%;border-collapse:collapse;font-size:16px}
.hours th{text-align:left;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding-bottom:10px}
.hours th:last-child{text-align:right}
.hours td{padding:12px 0;border-top:1px solid var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted-l)}
.hours tr.today td{color:var(--gold)}
.hours tr.today td:first-child{font-weight:700}
.hours tr.today td:last-child{color:var(--gold)}
.hnote{margin-top:16px;font-size:14.5px;color:var(--muted)}
.hnote sup{color:var(--gold)}

.shows{display:grid;gap:12px}
.show{border:1px solid var(--line);border-radius:14px;padding:20px 20px;background:var(--ink-2)}
.show b{display:block;font-family:var(--disp);font-size:20px;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:5px;color:var(--gold)}
.show small{display:block;font-size:15px;color:var(--muted);line-height:1.55}
.yesno{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.yesno span{font-size:13.4px;font-weight:600;border-radius:100px;padding:5px 13px;
  border:1px solid var(--line-2);color:var(--muted-l)}
.yesno span.no{opacity:.62;text-decoration:line-through}

/* ---------------- contact ---------------- */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:30px}
@media(max-width:960px){.cgrid{grid-template-columns:1fr;gap:30px}}
.cline{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.cline .ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:rgba(246,241,231,.08);
  display:inline-flex;align-items:center;justify-content:center;color:var(--gold)}
.cline .ic svg{width:20px;height:20px}
.cline .lb{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.3}
.cline .vl{font-family:var(--disp);font-size:27px;line-height:1.16;text-decoration:none;
  color:var(--cream);letter-spacing:.03em}
.cbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------------- map ---------------- */
.mapband{position:relative;border-top:1px solid var(--line)}
.mapband iframe{display:block;width:100%;height:clamp(300px,34vw,420px);border:0;
  filter:saturate(.9) contrast(1.02)}
.mapcard{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) 22px}
.mapcard .inner{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;background:rgba(6,14,24,.92);
  border:1px solid var(--line);border-radius:14px;padding:16px 20px;backdrop-filter:blur(6px)}
.mapcard .addr{display:flex;flex-direction:column;gap:2px}
.mapcard .addr b{font-family:var(--disp);letter-spacing:.03em;font-size:20px}
.mapcard .addr small{color:var(--muted);font-size:14px}
/* on a phone the card is taller than the map, so drop it underneath instead of
   floating it on top and hiding the pin entirely */
@media(max-width:720px){
  .mapband iframe{height:280px}
  .mapcard{position:static;padding:0}
  .mapcard .inner{border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding:18px var(--gut);background:var(--ink-2);backdrop-filter:none}
  .mapcard .btn{width:100%}
}

/* ---------------- footer ---------------- */
footer{background:var(--ink-2);border-top:1px solid var(--line);padding-block:48px 34px;
  font-size:15px;color:var(--muted)}
footer h4{font-weight:700;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cream);margin:0 0 15px}
.fgrid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer a{color:var(--muted);text-decoration:none}
@media(hover:hover){footer a:hover{color:var(--cream)}}
.fbot{border-top:1px solid var(--line);margin-top:34px;padding-top:20px;font-size:13.6px;
  color:var(--muted);line-height:1.65;max-width:100ch}

/* ---------------- sticky call bar ---------------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink-2);
  border-top:2px solid var(--azul-deep);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:none;gap:10px}
.callbar .btn{flex:1;font-size:13.5px;padding:13px 10px;min-height:46px}
@media(max-width:720px){.callbar{display:flex}}

/* ---------------- small screens ---------------- */
@media(max-width:620px){
  .bname{font-size:21px}
  .bsub{font-size:10.5px;letter-spacing:.12em}
  .hrow{padding-block:9px;gap:10px}
  header .btn{padding:0 15px;font-size:13px}
  section[id]{scroll-margin-top:74px}
  .hfacts{gap:8px 18px;font-size:14.5px}
  h1{max-width:none}
  section.pad{padding-block:46px}
  .hero-in{padding-block:54px}
  .bgrid{margin-top:22px;gap:22px}
  .mgrid,.plates{margin-top:24px}
  .fgrid2{margin-top:24px}
  .gsum{padding:18px 20px;gap:16px}
  .gbig{font-size:52px}
  footer{padding-block:38px 26px}
  .fgrid{gap:28px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
  .track,.railtrack{animation:none!important}
}