/* ==========================================================================
   MR. CHILE TAPROOM — design system
   Palette pulled from the subject's own world: dried guajillo chile, cempasúchil
   marigold, masa, nopal green. Display face is an expanded heavy grotesque set
   like a venue marquee, because the marquee is what this business actually is.
   ========================================================================== */

:root {
  --ink:        #16100E;
  --ink-2:      #211815;
  --ink-3:      #2E211C;
  --chile:      #C1272D;
  --chile-lit:  #E23B41;
  --marigold:   #F0A830;
  --masa:       #F2E9D8;
  --masa-dim:   #B7A992;
  --verde:      #57B583;
  --line:       rgba(242, 233, 216, 0.13);
  --line-lit:   rgba(242, 233, 216, 0.26);

  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --band-y: clamp(3.5rem, 8vw, 7rem);
  --max: 1180px;
  --r: 8px;
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  background: var(--ink);
  color: var(--masa);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--marigold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--marigold); color: var(--ink); padding: .85rem 1.25rem;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- type ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 115%;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 0.95;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 9.5vw, 6.2rem); }
h2 { font-size: clamp(1.9rem, 5.2vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-stretch: 108%; letter-spacing: -0.005em; }
h4 { font-size: 1rem; font-stretch: 100%; letter-spacing: .02em; }

p { text-wrap: pretty; }
.lede { font-size: clamp(1.075rem, 2.1vw, 1.3rem); line-height: 1.55; color: var(--masa); max-width: 60ch; }
.prose { max-width: 68ch; color: var(--masa-dim); }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--masa); font-weight: 600; }

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marigold);
  display: block;
  margin-bottom: 1rem;
}
.eyebrow--chile { color: var(--chile-lit); }

/* --- layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: var(--band-y); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--alt { background: var(--ink-2); }
.band--chile { background: var(--chile); color: var(--masa); }
.band--chile .eyebrow { color: #FFD9A0; }
.rule { border: 0; border-top: 1px solid var(--line); }

.stack > * + * { margin-top: 1.15rem; }
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
}
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px) and (max-width: 999px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 800; font-stretch: 108%;
  text-transform: uppercase; letter-spacing: .01em; font-size: .95rem;
  padding: .95rem 1.6rem; border: 2px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer; transition: transform .12s ease, background .18s ease, color .18s ease;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--chile); color: #fff; }
.btn--primary:hover { background: var(--chile-lit); }
.btn--gold { background: var(--marigold); color: var(--ink); }
.btn--gold:hover { background: #FFBE4D; }
.btn--ghost { border-color: var(--line-lit); color: var(--masa); background: transparent; }
.btn--ghost:hover { border-color: var(--masa); background: rgba(242,233,216,.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- header -------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22,16,14,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }

.nav { display: none; gap: 1.6rem; }
.nav a {
  white-space: nowrap;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--masa-dim); padding-block: .4rem; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--masa); border-bottom-color: var(--chile); }
.hdr .btn { padding: .7rem 1.05rem; font-size: .82rem; }
@media (min-width: 940px) { .nav { display: flex; gap: 1.1rem; } .hdr__in { gap: 1.25rem; } }
@media (min-width: 1240px) { .nav { gap: 1.6rem; } .hdr__in { gap: 2rem; } }
@media (max-width: 1079px) { .hdr__cta { display: none; } }

/* mobile drawer */
.menu-btn {
  display: inline-flex; align-items: center; gap: .5rem; background: none; border: 1px solid var(--line-lit);
  color: var(--masa); font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem .85rem; border-radius: var(--r); cursor: pointer;
}
@media (min-width: 940px) { .menu-btn { display: none; } }
.drawer { display: none; border-top: 1px solid var(--line); background: var(--ink-2); }
.drawer[data-open="true"] { display: block; }
.drawer a {
  display: block; padding: .95rem 0; text-decoration: none; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: 1.15rem;
}
.drawer a:last-child { border-bottom: 0; }

/* --- status strip (live open/closed) ------------------------------------- */
.status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--masa-dim);
}
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--masa-dim); flex: none; }
.status[data-state="open"] .status__dot { background: var(--verde); box-shadow: 0 0 0 0 rgba(87,181,131,.7); animation: pulse 2.4s infinite; }
.status[data-state="open"] .status__word { color: var(--verde); }
.status[data-state="closed"] .status__word { color: var(--chile-lit); }
.status__word { font-weight: 500; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(87,181,131,.6); }
  70% { box-shadow: 0 0 0 9px rgba(87,181,131,0); }
  100% { box-shadow: 0 0 0 0 rgba(87,181,131,0); }
}

/* --- hero ---------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(193,39,45,.34), transparent 62%),
    radial-gradient(680px 420px at 92% 8%, rgba(240,168,48,.15), transparent 60%);
  pointer-events: none;
}
.hero__in { position: relative; }
.hero h1 { margin-block: 1.1rem .35rem; }
.hero h1 em { font-style: normal; color: var(--marigold); display: block; }
.hero__sub { font-family: var(--mono); font-size: clamp(.8rem, 1.9vw, .95rem); letter-spacing: .13em; text-transform: uppercase; color: var(--masa-dim); margin-bottom: 1.9rem; }

/* --- THE BOARD (signature element) --------------------------------------- */
/* A venue marquee. The hero of this site is the schedule, because the schedule
   is the product. Answers "what's on and are you open" above the fold. */
.board {
  border: 1px solid var(--line-lit);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(46,33,28,.92), rgba(22,16,14,.92)),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.22) 3px 4px);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(242,233,216,.07);
  overflow: hidden;
  max-width: 640px;
}
.board__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--line);
  background: rgba(193,39,45,.14);
}
.board__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--marigold); }
.board__body { padding: 1.35rem 1.2rem 1.2rem; }
.board__row { display: flex; gap: 1rem; align-items: baseline; }
.board__row + .board__row { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px dashed var(--line); }
.board__when {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--chile-lit); flex: none; width: 5.4rem; padding-top: .3rem;
}
.board__what h3 { margin-bottom: .3rem; }
.board__what p { font-size: .93rem; color: var(--masa-dim); line-height: 1.5; }
.board__foot { padding: 1rem 1.2rem; border-top: 1px solid var(--line); background: rgba(0,0,0,.28); }

/* --- papel picado divider (used once, deliberately) ---------------------- */
.picado { height: 26px; width: 100%; color: var(--chile); }

/* --- cards --------------------------------------------------------------- */
.card {
  border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: var(--ink-2); height: 100%; display: flex; flex-direction: column; gap: .7rem;
}
.band--alt .card { background: var(--ink); }
.card__kicker { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--marigold); }
.card p { font-size: .95rem; color: var(--masa-dim); line-height: 1.55; }
.card--link { text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.card--link:hover { border-color: var(--chile); transform: translateY(-3px); }
.card__tag {
  align-self: flex-start; margin-top: auto; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--masa-dim);
  border: 1px solid var(--line-lit); border-radius: 100px; padding: .3rem .7rem;
}

/* --- hours table --------------------------------------------------------- */
.hours { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .88rem; }
.hours th, .hours td { text-align: left; padding: .62rem 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 400; color: var(--masa-dim); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.hours td { text-align: right; }
.hours tr[data-today="true"] th, .hours tr[data-today="true"] td { color: var(--marigold); }
.hours tr[data-closed="true"] td { color: var(--masa-dim); }

/* --- definition list / specs --------------------------------------------- */
.specs { display: grid; gap: 0; }
.specs > div { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.specs dt { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--masa-dim); min-width: 8.5rem; }
.specs dd { font-size: .98rem; flex: 1 1 14rem; }
.specs a { color: var(--marigold); }

/* --- menu list ----------------------------------------------------------- */
.mlist { list-style: none; padding: 0; }
.mlist li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.mlist li:last-child { border-bottom: 0; }
.mlist strong { display: block; font-family: var(--display); font-weight: 800; font-stretch: 106%; text-transform: uppercase; font-size: 1.02rem; letter-spacing: -.005em; }
.mlist span { font-size: .93rem; color: var(--masa-dim); }

/* --- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
/* Questions are set in the body face at sentence case, not the uppercase
   display face. Two reasons: Spanish questions run roughly 25% longer than
   their English counterparts and uppercase amplifies that, and an opening
   inverted mark at heavy uppercase weight reads as a stray glyph instead of
   punctuation. Sentence case also just sounds like a person asking. */
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 3rem 1.25rem 0; position: relative;
  font-family: var(--body); font-weight: 600; text-transform: none;
  font-size: clamp(1.02rem, 1.7vw, 1.18rem); letter-spacing: -.004em; line-height: 1.4;
  color: var(--masa); transition: color .15s ease; overflow-wrap: break-word;
}
.faq summary:hover { color: var(--marigold); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .25rem; top: 1.3rem;
  font-family: var(--mono); font-size: 1.35rem; color: var(--chile-lit); line-height: 1;
  transition: transform .18s ease, color .18s ease;
}
.faq summary:hover::after { color: var(--marigold); }
.faq details[open] summary::after { content: '\2013'; transform: none; }
.faq details[open] summary { color: var(--marigold); }
.faq__a { padding: 0 3rem 1.45rem 0; color: var(--masa-dim); max-width: 70ch; line-height: 1.7; }

/* --- form ---------------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--masa-dim); }
.field input, .field select, .field textarea {
  background: var(--ink); border: 1px solid var(--line-lit); border-radius: var(--r); color: var(--masa);
  padding: .8rem .9rem; font-family: var(--body); font-size: 1rem; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select option { background: var(--ink); color: var(--masa); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--marigold); outline: none; box-shadow: 0 0 0 3px rgba(240,168,48,.2); }
.form__note { font-size: .85rem; color: var(--masa-dim); }

/* --- footer -------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); background: var(--ink-2); }
.ftr__grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .ftr__grid { grid-template-columns: 1.3fr 1fr 1.2fr; gap: 3rem; } }
.ftr h4 { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--marigold); margin-bottom: .9rem; }
.ftr a { color: var(--masa-dim); text-decoration: none; }
.ftr a:hover { color: var(--masa); text-decoration: underline; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.ftr address { font-style: normal; font-size: .95rem; color: var(--masa-dim); line-height: 1.75; }
.ftr address strong { color: var(--masa); }
.ftr__base {
  border-top: 1px solid var(--line); padding-block: 1.4rem; display: flex; flex-wrap: wrap;
  gap: .75rem 1.5rem; justify-content: space-between; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--masa-dim);
}

/* --- misc ---------------------------------------------------------------- */
.pill {
  display: inline-block; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid var(--line-lit); border-radius: 100px;
  padding: .32rem .75rem; color: var(--masa-dim);
}
.pill--gold { border-color: var(--marigold); color: var(--marigold); }
.tel { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: clamp(1.4rem, 4vw, 2rem); text-decoration: none; letter-spacing: -.01em; }
.tel:hover { color: var(--marigold); }

/* ==========================================================================
   Additions for the bilingual build: real photography, logo, flyers
   ========================================================================== */

.faq { max-width: 900px; }
.h1--sm { font-size: clamp(2.2rem, 7vw, 4.4rem); }
.h2--sm { font-size: clamp(1.5rem, 3.8vw, 2.2rem); }
.hi { color: var(--marigold); }
strong.hi { color: var(--masa); }

/* --- brand ---------------------------------------------------------------- */
.ftr__logo { width: 220px; height: auto; margin-bottom: 1.1rem; }
.ftr__social { display: flex; gap: 1.25rem; margin-top: 1rem; font-size: .93rem; }

/* --- language switch ------------------------------------------------------ */
.lang {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--masa); border: 1px solid var(--line-lit);
  border-radius: 100px; padding: .45rem .85rem; white-space: nowrap; flex: none;
}
.lang:hover { border-color: var(--marigold); color: var(--marigold); }
@media (max-width: 939px) { .lang { margin-left: auto; } }

/* --- hero with a real photograph behind it -------------------------------- */
/* The patio at dusk is the most persuasive asset this business has, so it goes
   behind the headline rather than into a gallery further down the page. */
.hero { isolation: isolate; display: flex; align-items: center; min-height: min(76vh, 700px); }
.hero__in { width: 100%; }
.hero h1, .hero__sub, .hero .eyebrow { text-shadow: 0 2px 18px rgba(12,8,7,.55); }
.hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }
/* The scrim is anchored to the text column and falls away fast, so the right
   two-thirds of the photograph reads as a photograph. A soft bottom fade hands
   off to the section below instead of ending on a hard edge. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(103deg, rgba(20,14,12,.94) 0%, rgba(20,14,12,.80) 30%,
                            rgba(20,14,12,.42) 58%, rgba(20,14,12,.14) 82%, rgba(20,14,12,.08) 100%),
    linear-gradient(180deg, rgba(20,14,12,.34) 0%, transparent 26%,
                            transparent 64%, rgba(22,16,14,.88) 100%),
    radial-gradient(680px 400px at 4% 2%, rgba(193,39,45,.24), transparent 70%);
}
@media (max-width: 719px) {
  .hero { min-height: min(88vh, 720px); }
  .hero::before {
    background: linear-gradient(180deg, rgba(20,14,12,.42) 0%, rgba(20,14,12,.72) 38%,
                                        rgba(22,16,14,.92) 72%, rgba(22,16,14,.97) 100%);
  }
  .hero__bg img { object-position: 50% 38%; }
}

/* --- figures & banners ---------------------------------------------------- */
.fig { margin: 0; }
.fig picture, .fig img { width: 100%; border-radius: var(--r); }
.fig img { border: 1px solid var(--line); }
.banner { margin: 0; height: clamp(200px, 34vw, 400px); overflow: hidden; }
.banner picture, .banner img { width: 100%; height: 100%; object-fit: cover; }

/* --- event flyers --------------------------------------------------------- */
.flyer {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--ink);
  overflow: hidden; display: flex; flex-direction: column;
}
.flyer__link { display: block; background: #0c0908; }
.flyer__img { width: 100%; height: auto; transition: opacity .2s ease; }
.flyer__link:hover .flyer__img { opacity: .88; }
.flyer__body { padding: clamp(1.1rem, 2.4vw, 1.6rem); display: flex; flex-direction: column; gap: .65rem; }
.flyer__body h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.flyer__body p { font-size: .95rem; color: var(--masa-dim); line-height: 1.55; }
.flyer__lineup { font-family: var(--mono); font-size: .82rem !important; color: var(--marigold) !important; letter-spacing: .04em; }
.flyer .btn { align-self: flex-start; margin-top: .35rem; }
.board__meta { font-family: var(--mono); font-size: .78rem !important; color: var(--marigold) !important; margin-top: .3rem; }

.card--wide { display: block; }
.card--wide .card__kicker { display: block; margin-bottom: .5rem; }
.card--wide h3 { margin-bottom: .7rem; }
.card--wide p { margin-bottom: .7rem; }
.form__note .pill { margin-right: .35rem; }
a.pill { text-decoration: none; }
a.pill:hover { border-color: var(--marigold); color: var(--marigold); }

/* Ghost buttons sitting on the chile-red band need a lighter border. */
.btn--onred { border-color: rgba(255,255,255,.55); }
.btn--onred:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* --- brand lockup ---------------------------------------------------------
   The supplied logo is a stacked lockup, unreadable at header height, so the
   header uses a horizontal lockup composed from the same artwork. Narrow
   screens fall back to the chile mark alone, which stays legible at any size. */
.brand { gap: 0; }
.brand__lockup { display: none; height: 38px; width: auto; }
.brand__mark   { display: block; height: 30px; width: auto; }
@media (min-width: 560px) {
  .brand__lockup { display: block; }
  .brand__mark   { display: none; }
}
@media (min-width: 940px) { .brand__lockup { height: 42px; } }
.brand:hover { opacity: .85; }

/* --- menu prices & hoppy hour --------------------------------------------- */
.mlist strong { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mlist__price { font-family: var(--mono); font-weight: 400; font-size: .88rem; color: var(--marigold); white-space: nowrap; letter-spacing: 0; text-transform: none; }
.mlist__price em { font-style: normal; color: var(--masa-dim); font-size: .8rem; }
.deals { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: .6rem; }
.deals li { position: relative; padding-left: 1.6rem; font-size: 1.02rem; }
.deals li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--marigold); }

/* --- density & photo legibility -------------------------------------------
   Two problems the desktop render exposed. First, .grid--split puts a tall
   figure beside short text, so the shorter column ends and leaves a void that
   on a near-black page reads as a hole rather than as whitespace. Capping the
   figure's aspect ratio keeps the columns close in height. Second, the interior
   and food shots are genuinely dark, and a flat hairline border around a dark
   photo on a dark page looks like an empty box, so they get a small lift and a
   warmer edge. */
.fig img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(242, 233, 216, .18);
  filter: brightness(1.14) saturate(1.06) contrast(1.02);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .9);
}
@media (min-width: 720px) {
  /* Only the heading column becomes a flex column, so its figure can be pushed
     down to close the gap. Making BOTH columns flex collapses any nested grid
     in the second one - which is where the amenity cards live. */
  .grid--split { align-items: stretch; }
  .grid--split > div:first-child { display: flex; flex-direction: column; }
  .grid--split > div:first-child .fig { margin-top: auto; }
}
.banner img { filter: brightness(1.08) saturate(1.04); }

/* Sections were 112px of padding top and bottom, so 224px of nothing between
   every band. Tightened, with the gap carried by the content instead. */
:root { --band-y: clamp(3rem, 5.4vw, 5rem); }
.band--tight { padding-block: clamp(2.25rem, 4vw, 3.25rem); }

/* --- header: the logo is the loudest thing in it ---------------------------
   On a 390px phone the horizontal lockup could not fit beside a word-labelled
   language link and a word-labelled menu button, so it was falling back to the
   chile mark alone and reading as a small icon. Shrinking the two controls -
   "ES" instead of "Español", a hamburger instead of "MENU" - buys back roughly
   110px, which is enough to run the full lockup on every phone. */
.hdr__in { min-height: 78px; }
.brand__lockup { display: block; height: 40px; }
.brand__mark { display: none; }

.lang__short { display: inline; }
.lang__long  { display: none; }
.lang { padding: .5rem .7rem; font-size: .78rem; letter-spacing: .1em; }

.menu-btn { padding: .6rem .65rem; }
.menu-btn svg { width: 20px; height: 14px; display: block; }

@media (min-width: 420px) { .brand__lockup { height: 44px; } }
@media (min-width: 560px) {
  .lang__short { display: none; }
  .lang__long  { display: inline; }
  .lang { padding: .5rem .95rem; }
}
@media (min-width: 940px) {
  .hdr__in { min-height: 92px; }
  .brand__lockup { height: 54px; }
}
@media (min-width: 1240px) { .brand__lockup { height: 58px; } }

/* Very narrow phones only: fall back to the mark so nothing collides. */
@media (max-width: 359px) {
  .brand__lockup { display: none; }
  .brand__mark { display: block; height: 34px; width: auto; }
}
.hdr__cta { white-space: nowrap; }

/* --- logo, larger still ----------------------------------------------------
   Pushing the lockup up again. The controls give back what the logo takes:
   on phones the language link loses its pill and becomes plain text, and the
   header carries a wider max-width on large screens so a 66px lockup, the nav,
   the language link and the phone CTA all sit on one line. */
.hdr__in { min-height: 86px; }
.brand__lockup { height: 50px; }
.lang { border: 0; padding: .4rem .35rem; font-size: .8rem; letter-spacing: .08em; }
.lang:hover { border: 0; }
.menu-btn { padding: .55rem .55rem; }

@media (min-width: 420px) { .brand__lockup { height: 54px; } .hdr__in { min-height: 92px; } }
@media (min-width: 560px) {
  .lang { border: 1px solid var(--line-lit); padding: .5rem .95rem; font-size: .74rem; letter-spacing: .12em; }
  .brand__lockup { height: 56px; }
}
@media (min-width: 940px) {
  .hdr__in { min-height: 104px; }
  .brand__lockup { height: 60px; }
  .nav { gap: 1rem; }
  .nav a { font-size: .74rem; letter-spacing: .08em; }
}
@media (min-width: 1240px) {
  .hdr .wrap { max-width: 1360px; }
  .brand__lockup { height: 66px; }
  .nav { gap: 1.35rem; }
  .nav a { font-size: .78rem; letter-spacing: .1em; }
}
@media (max-width: 359px) { .brand__mark { height: 44px; } }


/* --- hero over the interior shot ------------------------------------------
   The interior is brighter and busier than the patio was, so the text column
   carries a heavier scrim and the headline sits over the darker left half of
   the room rather than the lit yellow wall. */
.hero::before {
  background:
    linear-gradient(103deg, rgba(18,12,10,.95) 0%, rgba(18,12,10,.86) 32%,
                            rgba(18,12,10,.52) 60%, rgba(18,12,10,.22) 84%, rgba(18,12,10,.14) 100%),
    linear-gradient(180deg, rgba(18,12,10,.40) 0%, transparent 24%,
                            transparent 60%, rgba(22,16,14,.90) 100%),
    radial-gradient(640px 380px at 3% 2%, rgba(193,39,45,.22), transparent 70%);
}
.hero__bg img { object-position: 30% 52%; }
.hero h1 { margin-block: 1.1rem .5rem; }
@media (max-width: 719px) {
  .hero::before {
    background: linear-gradient(180deg, rgba(18,12,10,.52) 0%, rgba(18,12,10,.80) 34%,
                                        rgba(22,16,14,.94) 70%, rgba(22,16,14,.97) 100%);
  }
  .hero__bg img { object-position: 34% 50%; }
}

/* --- new logo, sized up ----------------------------------------------------
   The redrawn lockup is squarer than the one it replaces (its wordmark stacks
   "MR. CHILE" over "TAPROOM"), so the same width buys more height and it can
   run larger everywhere without crowding the controls. */
.hdr__in { min-height: 92px; }
.brand__lockup { height: 58px; }
@media (min-width: 420px) { .brand__lockup { height: 62px; } .hdr__in { min-height: 98px; } }
@media (min-width: 560px) { .brand__lockup { height: 64px; } }
@media (min-width: 940px) { .hdr__in { min-height: 112px; } .brand__lockup { height: 68px; } }
@media (min-width: 1240px) { .brand__lockup { height: 76px; } }
@media (max-width: 359px) { .brand__mark { height: 52px; } }

.ftr__logo { width: 260px; }