/* Los Chulos, design C: the menu board. Sign green ground, cream type and rules, sign red for
   the call, mustard for prices. Archivo condensed for the board, Archivo at normal width for text.
   Square corners, thin rules, no shadows, almost no motion. */
:root{
  --g:#173d33; --g2:#11332a; --g3:#0c261f;
  --cream:#f6efe3; --mute:rgba(246,239,227,.72);
  --rule:rgba(246,239,227,.2); --rule-2:rgba(246,239,227,.5);
  /* the sign's red, a hair deeper so cream type on it passes AA (4.6:1) */
  --red:#cc2d37; --red-h:#b3232d; --red-a:#9e1f28;
  --mustard:#d2b865;
  --gut:clamp(16px,4vw,48px);
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --focus:var(--cream);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;color-scheme:dark;background:var(--g);scroll-padding-top:84px}
body{margin:0;font-family:var(--f);font-size:1.0625rem;line-height:1.5;color:var(--cream);background:var(--g);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,blockquote{margin:0}
h1,h2,h3{font-weight:inherit;font-size:inherit}
ul{padding:0;list-style:none}
a{color:inherit}
a,button{touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--mustard);color:var(--g)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:8px;top:-80px;z-index:100;padding:12px 18px;background:var(--cream);color:var(--g);font-weight:700;text-decoration:none;--focus:var(--mustard)}
.skip:focus{top:8px}
.wrap{width:min(100% - 2 * var(--gut),1320px);margin-inline:auto}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
p{text-wrap:pretty}
@media (max-width:960.98px){.desk{display:none!important}}

/* the board's display face: Archivo, condensed and heavy */
.hero-line,.feat-h,.feat-price,.menu-h,.cat-n,.cat-r,.mi-price,.mcats a,.score-n,.rev-q p,.visit-h,.closed,.bigtel .num,.btn .num,.cb-call b,.pm-t,.rating b,.feat-stat b{font-stretch:68%;font-weight:900;line-height:.86;letter-spacing:-.005em}

/* ---------- buttons: solid blocks, pressed on tap ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:56px;padding:0 24px;border:2px solid transparent;background:none;font-size:1.0625rem;font-weight:700;line-height:1.1;text-decoration:none;text-align:center;white-space:nowrap}
.btn:active{transform:translateY(2px)}
.btn .num{font-weight:800;font-size:1.32em;line-height:1}
.btn-red{background:var(--red);border-color:var(--red);color:var(--cream)}
.btn-red:active{background:var(--red-a);border-color:var(--red-a)}
.btn-line{border-color:var(--cream);color:var(--cream)}
.btn-green{background:var(--g);border-color:var(--g);color:var(--cream)}
@media (hover:hover) and (pointer:fine){
  .btn-red:hover{background:var(--red-h);border-color:var(--red-h)}
  .btn-line:hover{background:var(--cream);color:var(--g)}
  .btn-green:hover{background:var(--g3);border-color:var(--g3)}
}

/* ---------- header ---------- */
.hdr{background:var(--g);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;gap:10px;min-height:60px}
.nav{display:flex;margin-right:auto;margin-left:-10px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:.9375rem;font-weight:600;text-decoration:none;text-underline-offset:.3em}
.nav a:hover{text-decoration:underline}
.lang{display:none;min-width:44px;min-height:44px;padding:0 8px;background:none;border:1px solid var(--rule-2);font-size:.875rem;font-weight:700}
.js .lang{display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.lang:hover{background:var(--cream);color:var(--g)}}
.hdr-call{min-height:44px;padding:0 16px;font-size:.9375rem}
@media (min-width:961px){.hdr{position:sticky;top:0;z-index:30}}
@media (max-width:960.98px){.hdr-call{display:none}}

/* ---------- first screen: the sign, the line, the call, and the birria board ---------- */
.hero{border-bottom:1px solid var(--rule)}
.hero-main{--hp:clamp(32px,4vw,64px);container-type:inline-size;padding-block:clamp(26px,min(4.4vw,6vh),60px) clamp(32px,4vw,52px);display:flex;flex-direction:column}
/* the first screen also scales with the window's height, so the call button clears the fold on a 768px laptop */
.hero h1{width:min(100% - 14px,470px,58vh);margin:7px}
/* the logo's cream panel is the sign itself; a thin cream frame hangs it on the green */
.sign{width:100%;outline:1px solid var(--cream);outline-offset:6px}
.hero-line{margin-top:clamp(22px,min(3.2vw,4.4vh),44px);max-width:19ch;font-size:clamp(2.15rem,min(.6rem + 5.2vw,9.4vh),5.5rem);font-weight:850;text-transform:uppercase;line-height:.9;text-wrap:balance}
.hero-meta{display:flex;flex-wrap:wrap;margin-top:clamp(18px,min(2.6vw,3.4vh),34px);border-block:1px solid var(--rule)}
.hero-meta>*{display:flex;align-items:center;min-height:52px;padding-right:20px}
.hero-meta>*+*{padding-left:20px;border-left:1px solid var(--rule)}
/* the square hangs, so a wrapped line in Spanish still starts under the text */
.opennow{display:block;padding-left:20px;text-indent:-20px;font-weight:600}
.hero-meta .opennow{padding-block:14px}
.opennow::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;vertical-align:.02em;background:var(--mustard)}
.opennow.is-open::before{background:#7fd39a}
.opennow.is-closed::before{background:var(--red)}
.opennow:empty{display:none}
.rating{gap:9px;font-weight:600;text-decoration:none}
.rating b{font-size:1.65rem;font-weight:800;line-height:1}
.rating .stars{width:90px;height:17px}
.rating-c{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.28em}
.rating:hover .rating-c{text-decoration-color:currentColor}
.stars{display:block;flex:none;color:var(--mustard)}
.stars .off{color:rgba(246,239,227,.24)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,min(2.6vw,3.4vh),32px)}
.btn-xl{min-height:72px;padding:0 28px;font-size:1.125rem}
.btn-xl .num{font-size:1.6em}
/* a narrow hero column (phones, and the two-column hero just past 1024px) stacks the rows and the buttons */
@container (max-width:560px){
  .hero-meta{flex-direction:column}
  .hero-meta>*+*{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .hero-cta .btn{flex:1 1 100%}
  #heroCall{flex-direction:column;gap:4px;min-height:84px}
  .btn-xl:not(#heroCall){min-height:56px}
}

/* the featured board panel */
.feature{display:grid;align-content:start;background:var(--g2);padding:clamp(22px,3vw,34px) var(--gut);margin-inline:calc(-1 * var(--gut));border-top:1px solid var(--rule)}
.feat-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--cream)}
.feat-h{max-width:7ch;font-size:clamp(2.3rem,1.6rem + 2vw,3.3rem);text-transform:uppercase}
.feat-price{font-size:clamp(6.2rem,4rem + 6vw,9.6rem);line-height:.74;letter-spacing:-.02em;color:var(--mustard);margin-bottom:-.04em}
.feat-img{width:100%;max-width:440px;margin-top:20px}
.feat-p{margin-top:18px;max-width:34ch}
.feat-q{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.feat-q p{max-width:24ch;font-size:clamp(1.45rem,1.2rem + .7vw,1.75rem);font-stretch:75%;font-weight:700;line-height:1.08}
.feat-stat{display:flex;align-items:baseline;gap:8px;margin-top:12px;color:var(--mute);font-size:.9375rem}
.feat-stat b{font-size:1.75rem;font-weight:800;color:var(--mustard)}
@media (min-width:640px) and (max-width:1023.98px){
  .feature{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:32px}
  .feat-top{grid-column:1 / -1}
  .feat-img{grid-row:2 / span 3}
}
@media (min-width:1024px){
  .hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,500px)}
  .hero-main{padding-right:var(--hp)}
  .hero-meta{margin-right:calc(-1 * var(--hp))}
  .feature{margin:0;padding-inline:clamp(26px,2.6vw,36px);border-top:0;border-inline:1px solid var(--rule)}
  .feat-q p{text-indent:-.4em}
}

/* ---------- the menu board ---------- */
.menu{padding-block:clamp(48px,7vw,104px) clamp(40px,6vw,88px)}
.menu-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;padding-bottom:18px;border-bottom:2px solid var(--cream)}
.menu-h{font-size:clamp(5rem,2.6rem + 9vw,11rem);line-height:.74;letter-spacing:-.015em;text-transform:uppercase;margin-bottom:-.04em}
html:not(.js) #printBtn{display:none}

.mcats{display:none}
@media (max-width:960.98px){
  .mcats{position:sticky;top:0;z-index:20;display:flex;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);background:var(--g);border-bottom:1px solid var(--rule-2)}
  .mcats::-webkit-scrollbar{display:none}
  .mcats a{flex:none;display:flex;align-items:center;min-height:52px;padding:0 15px;border-right:1px solid var(--rule);font-size:1.375rem;font-weight:800;text-transform:uppercase;text-decoration:none}
  .mcats a:first-child{border-left:1px solid var(--rule)}
  .mcats a[aria-current="true"]{background:var(--cream);color:var(--g)}
  .mcats a:focus-visible{outline-offset:-5px;outline-color:var(--mustard)}
  .mcats::after{content:"";flex:none;width:var(--gut)}
  .cat{scroll-margin-top:64px}
}

.board{margin-top:clamp(28px,3.4vw,44px)}
@media (min-width:640px){.board{columns:2;column-gap:clamp(36px,4.4vw,64px);column-rule:1px solid var(--rule)}}
@media (min-width:1080px){.board{columns:3}}
.cat{break-inside:avoid;padding-bottom:clamp(36px,4vw,52px)}
/* each heading hangs a square photo on the left, inside the same cream rule */
.cat-top{display:grid;grid-template-columns:clamp(72px,7vw,104px) minmax(0,1fr);align-items:end;gap:16px;padding-bottom:10px;border-bottom:2px solid var(--cream)}
.cat-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--g2);outline:1px solid var(--rule-2);outline-offset:-1px}
.cat h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.cat-n{font-size:clamp(2.4rem,1.9rem + 1.3vw,3.1rem);text-transform:uppercase}
.cat-r{font-size:1.2rem;font-weight:800;line-height:1;color:var(--mustard);white-space:nowrap}
.cat-note{padding:11px 0 13px;font-size:.9375rem;line-height:1.45;color:var(--mute);border-bottom:1px solid var(--rule)}
.cat-note .es,html[lang="es"] .cat-note .en{display:none}
html[lang="es"] .cat-note .es{display:inline}
.mi{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:18px;padding:11px 0 12px;border-bottom:1px solid var(--rule)}
.mi-name{font-size:1.0625rem;font-weight:650;line-height:1.3}
.mi-gloss{grid-column:1;font-size:.875rem;line-height:1.35;color:var(--mute);margin-top:2px}
html[lang="es"] .mi-gloss{display:none}
.mi-price{grid-column:2;grid-row:1;font-size:1.75rem;font-weight:800;line-height:.8;color:var(--mustard);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tag{display:inline-block;margin-left:6px;padding:3px 6px;background:var(--mustard);color:var(--g);font-size:.75rem;font-weight:800;line-height:1;vertical-align:.14em;white-space:nowrap}
/* hover: a mustard rule and a tint that reaches a little past the type, so the rules stay on the column edge */
@media (hover:hover) and (pointer:fine){.mi:hover{border-bottom-color:var(--mustard)}.mi:hover::before{content:"";position:absolute;z-index:-1;inset:0 -8px;background:rgba(210,184,101,.12)}}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:20px;border-top:2px solid var(--cream)}
.menu-foot p{font-weight:600}

/* ---------- photos: a ruled grid of square tiles ---------- */
.photos{padding-bottom:clamp(48px,7vw,104px)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;background:var(--rule-2)}
@media (min-width:640px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tiles img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--g2)}

/* ---------- reviews: the red stripe ---------- */
.reviews{background:var(--red);color:var(--cream);--focus:var(--cream)}
.rev{display:grid;gap:28px 64px;align-items:center;padding-block:clamp(40px,6vw,88px)}
.score{display:flex;align-items:flex-end;gap:clamp(16px,2vw,28px)}
.score-n{font-size:clamp(8.5rem,5rem + 12vw,16.5rem);line-height:.72;letter-spacing:-.025em;margin-bottom:-.02em}
.score-r{display:grid;gap:2px;justify-items:start}
.score-r .stars{width:130px;height:24px;color:var(--cream)}
.score-r .stars .off{color:rgba(246,239,227,.34)}
.score-link{display:inline-flex;align-items:center;min-height:44px;font-size:1.0625rem;font-weight:700;text-underline-offset:.25em}
.rev-q{padding-top:24px;border-top:1px solid rgba(246,239,227,.45)}
.rq p{max-width:34ch;font-size:clamp(1.5rem,.9rem + 1.9vw,2.6rem);font-stretch:74%;font-weight:800;line-height:1.02;text-wrap:balance}
/* no scripts: all eight as a ruled list */
.rq li+li{margin-top:20px;padding-top:20px;border-top:1px solid rgba(246,239,227,.3)}
/* with scripts: the quotes share one cell, so the box is always as tall as the longest one; the swap is instant */
.js .rq{display:grid}
.js .rq li{grid-area:1 / 1;margin:0;padding:0;border:0;visibility:hidden}
.js .rq li.on{visibility:visible}
.rq-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:24px}
.rq-dots{display:flex}
.rq-dot{display:grid;place-items:center;width:40px;height:44px;padding:0;background:none;border:0}
.rq-dot::before{content:"";width:12px;height:12px;border:2px solid var(--cream)}
.rq-dot[aria-current="true"]::before{background:var(--cream)}
.rq-dot:focus-visible{outline-offset:-4px}
.rq-pp{min-height:44px;padding:0 16px;border-width:1px;font-size:.9375rem}
@media (max-width:400px){.rq-dot{width:34px}}
@media (min-width:860px){
  .rev{grid-template-columns:auto minmax(0,1fr)}
  .rev-q{padding:8px 0 8px clamp(28px,4vw,64px);border-top:0;border-left:1px solid rgba(246,239,227,.45)}
  .rq p{text-indent:-.4em}
}

/* ---------- hours: the cream block ---------- */
.visit{background:var(--cream);color:var(--g);--focus:var(--g);--rule:rgba(23,61,51,.24)}
.visit-in{display:grid;gap:36px 64px;padding-block:clamp(44px,6.4vw,96px) clamp(36px,5vw,72px)}
.visit .opennow{font-weight:700;margin-bottom:14px}
.visit .opennow::before{background:var(--g)}
.visit .opennow.is-open::before{background:#1f7a45}
.visit .opennow.is-closed::before{background:var(--red)}
.visit-h{font-size:clamp(3.4rem,1.8rem + 6vw,8rem);line-height:.8;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.closed{margin-top:22px;padding-top:16px;border-top:2px solid var(--g);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.6rem);font-weight:800;text-transform:uppercase;line-height:.95}
.hnote{margin-top:12px;font-weight:600}
.find{display:grid;gap:22px;align-content:end;justify-items:start}
.find address{font-style:normal;font-size:clamp(1.25rem,1rem + .8vw,1.6rem);font-weight:600;line-height:1.3}
.bigtel{display:block;padding-top:20px;border-top:2px solid var(--g);text-decoration:none;color:var(--g)}
.bigtel-l{display:block;font-weight:700;text-decoration:underline;text-underline-offset:.25em}
.bigtel .num{display:block;margin-top:10px;font-size:clamp(3.3rem,.6rem + 13.4vw,12.5rem);line-height:.8;letter-spacing:-.02em}
@media (hover:hover) and (pointer:fine){.bigtel:hover .num{color:var(--red)}}
@media (min-width:860px){
  .visit-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0}
  .hours{padding-right:clamp(24px,3vw,48px)}
  .find{padding-left:clamp(24px,3vw,48px);border-left:1px solid var(--rule)}
  .bigtel{grid-column:1 / -1}
}

/* ---------- footer ---------- */
.foot{background:var(--g3);padding-block:40px calc(40px + env(safe-area-inset-bottom))}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
.foot-sign{width:170px;outline:1px solid var(--rule-2);outline-offset:4px;margin:4px}
.legal{display:flex;flex-wrap:wrap;margin-inline:-10px}
.legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:.875rem;color:var(--mute);text-underline-offset:.25em}
.fine{flex-basis:100%;font-size:.875rem;color:var(--mute)}
.fine a{display:inline-block;padding-block:12px;text-underline-offset:.2em}
.fine[hidden]{display:none}
@media (max-width:960.98px){.foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}}

/* ---------- phone call bar: on once the hero's Call button is gone, off while the big number shows ---------- */
.callbar{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--g3);border-top:1px solid var(--rule-2)}
.cb-call{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 12px;background:var(--red);color:var(--cream);font-weight:700;text-decoration:none;white-space:nowrap}
.cb-call b{font-size:1.45rem;font-weight:800;line-height:1}
.cb-call:active{background:var(--red-a)}
.cb-dir{flex:none;display:flex;align-items:center;min-height:52px;padding:0 14px;border:1px solid var(--cream);font-weight:600;text-decoration:none;white-space:nowrap}
.cb-dir:active{background:var(--cream);color:var(--g)}
.js .callbar:not(.on){visibility:hidden}
@media (max-width:359px){.cb-call>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cb-dir{padding:0 12px}}
@media (min-width:961px){.callbar{display:none}}
@media (max-width:960.98px){html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------- printed menu dialog ---------- */
.pm{padding:0;border:1px solid var(--rule-2);background:var(--g3);color:var(--cream);width:min(96vw,1000px);max-width:none;max-height:94dvh;overflow:hidden}
.pm[open]{display:flex;flex-direction:column}
.pm::backdrop{background:rgba(6,20,16,.9)}
.pm-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--rule)}
.pm-t{font-size:1.75rem;text-transform:uppercase;line-height:1}
.pm-x{min-height:48px;padding:0 20px}
.pm-body{overflow:auto;overscroll-behavior:contain;background:#000}
.pm-body img{width:100%}

@media (forced-colors:active){.opennow::before,.tag{forced-color-adjust:none}}