/* La Zone 23 — "One Tortilla, Two Kitchens"
   Bungee (signage) + Rethink Sans (body). Tortilla cream, tile green, chili red on Call only. */
@font-face{font-family:"Bungee";src:url(../fonts/bungee.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Rethink Sans";src:url(../fonts/rethink-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Rethink Sans";src:url(../fonts/rethink-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --cream:#F6E7CB; --cream2:#FBF3E3; --ink:#1C1410; --black:#0F0B09;
  --red:#C2331A; --green:#0B5D3B; --gold:#E7B65C;
  /* type scale, ratio 1.25 on 17px */
  --t0:1.0625rem; --t1:1.3125rem; --t2:1.65rem; --t3:2.05rem; --t4:2.6rem; --t5:3.25rem; --t6:4.05rem;
  /* spacing, 4/8 scale */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --display:"Bungee","Arial Black",Impact,sans-serif;
  --body:"Rethink Sans",system-ui,"Segoe UI",sans-serif;
  --edge:3px solid var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:16px;scroll-padding-bottom:96px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--t0)/1.6 var(--body);background:var(--cream);color:var(--ink);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:.01em;text-transform:uppercase}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.top :focus-visible,.visit :focus-visible,.foot :focus-visible,.dock :focus-visible,.half--dz :focus-visible,.side--dz :focus-visible{outline-color:var(--cream)}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--s3)}
.skip{position:absolute;left:var(--s3);top:-100px;z-index:100;background:var(--cream);color:var(--ink);padding:12px 16px;font-weight:700;border:var(--edge)}
.skip:focus{top:var(--s3)}

/* Buttons: red is only ever the Call button */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s4);font:700 var(--t0)/1.2 var(--body);text-decoration:none;white-space:nowrap;border:var(--edge);border-radius:0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-call{background:var(--red);color:#fff;border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.btn:hover{transform:translate(-2px,-2px)}
.btn-call:hover{box-shadow:6px 6px 0 var(--ink)}
.btn-ghost:hover{background:var(--cream);color:var(--ink)}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* Header */
.top{background:var(--black);color:var(--cream)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
.brand-name{font:400 1.35rem/1 var(--display);letter-spacing:.02em;white-space:nowrap}
.nav,.top-call{display:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);text-decoration:none;font-weight:700}
.nav a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
.top-call{box-shadow:4px 4px 0 rgba(246,231,203,.28);border-color:var(--cream)}
@media(min-width:720px){.top-call{display:inline-flex}}
@media(min-width:960px){.nav{display:flex;gap:var(--s2);margin-left:auto;margin-right:var(--s3)}}

/* ---------- HERO ---------- */
.hero{position:relative;display:grid;background:var(--black);overflow-x:clip;border-bottom:var(--edge)}
.half{position:relative;display:flex;flex-direction:column}
.half--mx{background:var(--cream);color:var(--ink);z-index:1}
.half--dz{background:var(--green) url(../images/zellige.svg) 0 0/96px;color:var(--cream);transition:background-position .5s ease}
.half--dz:hover{background-position:4px 4px}
.bunting{height:78px;background:url(../images/bunting.svg) 0 0 repeat-x;background-size:auto 100%;margin-bottom:var(--s2)}
.half-in{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s3) var(--s6);flex:1}
.half-top{position:relative}
h1{position:relative}
.kick{font:400 var(--t0)/1.2 var(--display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s3)}
.half--mx .kick{color:var(--green)}
h1{font-size:clamp(2.1rem,10.5vw,var(--t4))}
h1 .h-a,h1 .h-b{display:inline}
.half--mx h1 .h-b{color:var(--green)}
.half-bot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);max-width:34ch}
.lede{font-size:var(--t0)}
.half--dz .half-in{padding-top:168px;padding-bottom:var(--s6)}
.half--mx .half-in{padding-bottom:168px}

.taco-wrap{position:relative;z-index:3;height:0}
.taco{position:absolute;left:50%;top:0;width:min(86vw,360px);aspect-ratio:400/290;transform:translate(-50%,-48%)}
.taco-back,.taco-front{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.taco-fill{position:absolute;left:12%;top:2%;width:76%;height:52%;object-fit:cover;border-radius:46% 46% 0 0/80% 80% 0 0;border:3px solid var(--ink);border-bottom:0}
.taco-front{filter:drop-shadow(0 6px 0 rgba(15,11,9,.55))}

@media(min-width:900px){
  .hero{grid-template-columns:1fr 1fr;min-height:clamp(580px,72vh,640px)}
  .half--mx{grid-area:1/1}
  .half--dz{grid-area:1/2}
  .half-in{padding:0 var(--s5) 96px}
  .half--mx .half-in{align-items:flex-end;text-align:right;padding-right:var(--s4)}
  .half--dz .half-in{align-items:flex-start;text-align:left;padding-left:var(--s4);padding-top:0}
  .half-top{width:100%}
  .bunting{margin-bottom:var(--s4)}
  .half--dz .half-top{padding-top:calc(78px + var(--s4))}
  .half--mx .kick{text-align:right}
  h1{font-size:clamp(2.1rem,4.7vw,4.75rem);white-space:nowrap}
  .half--mx h1 .h-a{display:block}
  .half--mx h1 .h-b{position:absolute;top:0;left:calc(100% + var(--s4) + var(--s4));color:var(--cream);text-align:left}
  .taco-wrap{grid-area:1/1/2/3;align-self:end;justify-self:center;width:0}
  .taco{top:auto;bottom:-60px;width:clamp(330px,36vw,500px);transform:translateX(-50%)}
  .half-bot{max-width:none}
  .half--mx .half-bot{align-items:flex-end;padding-right:calc(clamp(165px,18vw,250px) + var(--s4));max-width:calc(30ch + clamp(165px,18vw,250px) + var(--s4))}
  .half--dz .half-bot{padding-left:calc(clamp(165px,18vw,250px) + var(--s4));max-width:calc(30ch + clamp(165px,18vw,250px) + var(--s4))}
}

/* ---------- Sections ---------- */
.tray{background:var(--cream2);padding:var(--s7) 0 var(--s7)}
@media(min-width:900px){.tray{padding-top:calc(var(--s7) + 60px)}}
.tray-head{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
h2{font-size:var(--t3);color:var(--green)}
.tray-head p{max-width:46ch}
.strip-ul{list-style:none;margin:0;padding:0 var(--s3);display:grid;gap:var(--s4);max-width:1180px;margin-inline:auto}
.dish{display:grid;grid-template-columns:112px 1fr;gap:var(--s3);align-items:center;background:var(--cream);border:var(--edge);box-shadow:5px 5px 0 var(--ink)}
.dish-img{margin:0;align-self:stretch;border-right:var(--edge);overflow:hidden;min-height:112px}
.dish-img img{width:100%;height:100%;object-fit:cover}
.dish-t{padding:var(--s3) var(--s3) var(--s3) 0;display:grid;gap:var(--s2);justify-items:start}
.dish h3{font-size:1.1rem;line-height:1.15;color:var(--ink)}
.dish p{font-size:.95rem;line-height:1.45}
.tag{display:inline-block;font:700 .8rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border:2px solid var(--ink);background:var(--cream2);color:var(--ink)}
.tag--dz{background:var(--green);color:var(--cream);border-color:var(--green)}
.tag--mx{background:var(--ink);color:var(--cream)}

@media(min-width:620px){
  .strip-frame{position:relative}
  .strip{overflow-x:auto;scroll-snap-type:x proximity;--gut:max(var(--s3),calc((100vw - 1180px)/2 + var(--s3)));scroll-padding-inline:var(--gut);padding:var(--s2) var(--gut) var(--s5);scrollbar-color:var(--ink) var(--cream)}
  .strip-ul{display:flex;gap:var(--s4);padding:0;margin:0;max-width:none;width:max-content}
  .dish{flex:0 0 min(300px,78vw);display:flex;flex-direction:column;align-items:stretch;gap:0;scroll-snap-align:start}
  .dish-img{border-right:0;border-bottom:var(--edge);aspect-ratio:4/3.4;min-height:0}
  .dish-t{padding:var(--s3)}
  .dish h3{font-size:1.25rem}
  .dish p{font-size:var(--t0)}
}
.strip-nav{display:none}
.js .strip-nav{display:flex;gap:var(--s2);justify-content:flex-end;max-width:1180px;margin:0 auto var(--s3);padding-inline:var(--s3)}
.strip-nav button{width:48px;height:48px;font:700 1.4rem/1 var(--body);background:var(--cream);color:var(--ink);border:var(--edge);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.strip-nav button:hover{background:var(--ink);color:var(--cream)}
@media(max-width:619px){.js .strip-nav{display:none}}

/* Lineup */
.lineup{background:var(--cream);padding:var(--s7) 0 0;position:relative}
.lineup-title{margin-bottom:var(--s5)}
.lineup-grid{display:grid;position:relative}
.side{padding:var(--s5) var(--s3) var(--s6)}
.side h3{font-size:var(--t3);margin-bottom:var(--s4)}
.side--mx{background:var(--cream2);border-top:var(--edge);border-bottom:var(--edge)}
.side--mx h3{color:var(--ink)}
.side--dz{background:var(--green) url(../images/zellige.svg) 0 0/96px;color:var(--cream);transition:background-position .5s ease}
.side--dz:hover{background-position:4px 4px}
.names{list-style:none;margin:0;padding:0;display:grid}
.names li{font:700 var(--t1)/1.25 var(--body);padding:12px 0 12px 36px;border-bottom:2px dashed currentColor;position:relative;min-height:48px}
.names li:last-child{border-bottom:0}
.names li::before{content:"";position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-11px;background:var(--ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.side--dz .names li::before{background:var(--gold)}
.side--mx .names li::before{background:var(--green)}
.mascot{margin:0;position:relative;z-index:2;justify-self:center;width:min(60vw,230px);margin-block:calc(var(--s6) * -1);transform:rotate(-3deg);border:var(--edge);box-shadow:6px 6px 0 var(--ink);background:#fff}
.mascot img{width:100%;height:auto}
.lineup-mid{padding:var(--s6) 0;font-weight:700;font-size:var(--t1);max-width:40ch}
@media(min-width:900px){
  .lineup-grid{grid-template-columns:1fr 1fr}
  .side{padding:var(--s6) var(--s6) var(--s7)}
  .side--mx{padding-right:calc(var(--s6) + 110px);border-bottom:0}
  .side--dz{padding-left:calc(var(--s6) + 110px)}
  .mascot{position:absolute;left:50%;top:50%;width:230px;margin:0;transform:translate(-50%,-50%) rotate(-3deg)}
  .side h3{font-size:var(--t4)}
  .side--mx{padding-left:max(var(--s6),calc((100vw - 1180px)/2 + var(--s3)))}
}

/* Reviews */
.talk{background:var(--cream);padding:var(--s7) 0 var(--s8);background-image:linear-gradient(90deg,rgba(194,51,26,.0),rgba(194,51,26,.0));position:relative}
.talk::before{content:"";position:absolute;inset:0 0 auto 0;height:18px;background:repeating-conic-gradient(var(--ink) 0 25%,var(--cream) 0 50%) 0 0/36px 36px;opacity:.9}
.talk h2{margin-bottom:var(--s6);padding-top:var(--s3)}
.talk-grid{display:grid;gap:var(--s6)}
.bubble{margin:0;position:relative;background:var(--cream2);border:var(--edge);box-shadow:7px 7px 0 var(--ink);padding:var(--s4)}
.bubble::after{content:"";position:absolute;left:32px;bottom:-24px;width:34px;height:24px;background:var(--cream2);clip-path:polygon(0 0,100% 0,0 100%);border-left:var(--edge)}
.bubble::before{content:"";position:absolute;left:29px;bottom:-30px;width:42px;height:30px;background:var(--ink);clip-path:polygon(0 0,100% 0,0 100%)}
.bubble::after{z-index:1;left:32px;bottom:-24px;border:0;clip-path:polygon(0 0,86% 0,0 86%)}
.bubble blockquote{margin:0}
.bubble blockquote p{font-size:var(--t1);line-height:1.45;font-weight:700}
.bubble figcaption{margin-top:var(--s3);font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.b1 blockquote p{font-size:var(--t0);font-weight:400}
.b2,.b4{margin-left:var(--s4)}
@media(min-width:900px){
  .talk-grid{grid-template-columns:repeat(12,1fr);gap:var(--s6) var(--s5);align-items:start}
  .b1{grid-column:1/8;grid-row:1/3}
  .b2{grid-column:8/13;grid-row:1;margin:0;transform:rotate(1.2deg)}
  .b3{grid-column:7/12;grid-row:2;transform:rotate(-1deg)}
  .b4{grid-column:2/8;grid-row:3;margin:0}
  .b1 blockquote p{font-size:var(--t1);font-weight:700}
  .b1{padding:var(--s5)}
}

/* Visit */
.visit{background:var(--black);color:var(--cream);padding:var(--s7) 0 var(--s7)}
.visit h2{color:var(--cream);font-size:var(--t3)}
.visit-in{display:grid;gap:var(--s6)}
.visit-copy{display:grid;gap:var(--s4);justify-items:start}
.logo{width:160px;height:auto}
address{font:700 var(--t2)/1.25 var(--body);font-style:normal}
.visit-note{max-width:38ch}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.visit-img{margin:0;border:3px solid var(--cream);box-shadow:8px 8px 0 var(--green)}
.visit-img img{width:100%;height:auto}
.visit .link{color:var(--cream)}
@media(min-width:900px){
  .visit-in{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--s8)}
  .visit h2{font-size:var(--t4)}
}

/* Footer and dock */
.foot{background:var(--black);color:var(--cream);border-top:3px solid var(--gold);padding:var(--s4) 0 calc(var(--s6) + 72px)}
.foot p{font-size:.95rem}
.dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--black);border-top:3px solid var(--cream)}
.dock .btn{flex:1;min-height:52px;padding:0 var(--s2);box-shadow:none}
.btn-dock{background:transparent;color:var(--cream);border-color:var(--cream)}
@media(min-width:720px){.dock{display:none}.foot{padding-bottom:var(--s5)}}

/* Motion: the halves slide together once. No JS needed; nothing is hidden at any point. */
@media(prefers-reduced-motion:no-preference){
  .half--mx{animation:meetL .9s cubic-bezier(.2,.8,.2,1) both}
  .half--dz{animation:meetR .9s cubic-bezier(.2,.8,.2,1) both}
  .taco{animation:pop .9s cubic-bezier(.2,.8,.2,1) both}
  @keyframes meetL{from{transform:translateY(-28px)}to{transform:none}}
  @keyframes meetR{from{transform:translateY(28px)}to{transform:none}}
  @keyframes pop{from{scale:.9}to{scale:1}}
  @media(min-width:900px){
    @keyframes meetL{from{transform:translateX(-6vw)}to{transform:none}}
    @keyframes meetR{from{transform:translateX(6vw)}to{transform:none}}
    .half--mx h1 .h-b{animation:meetB .9s cubic-bezier(.2,.8,.2,1) both}
    @keyframes meetB{from{transform:translateX(12vw)}to{transform:none}}
  }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* 404 */
.nf{background:var(--green) url(../images/zellige.svg);color:var(--cream);min-height:70vh;display:flex;align-items:center;border-bottom:var(--edge)}
.nf-in{width:100%;max-width:1180px;margin-inline:auto;padding:var(--s7) var(--s3);display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.nf h1{font-size:clamp(2.1rem,6vw,4.05rem);max-width:14ch}
.nf p{font-size:var(--t1);max-width:32ch}
.nf-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.nf .btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream)}
/* keep tile pattern from running through the small text */
.half--dz .half-bot p{background:var(--green);box-shadow:0 0 0 10px var(--green)}