@charset "UTF-8";
/* =====================================================================
   Los Magueyes — Zero Day Design concept
   One hand-written stylesheet. No bundler, no framework, no utilities.

   The idea: a maguey is an agave. The palette comes off the plant and
   the room — dusty blue-green agave, warm masa paper, deep ink, and a
   single earned accent of burnt chile red used only on prices, the
   specials board and calls to action.

   Deliberately NOT here: serape stripes, papel picado, sombreros,
   cactus silhouettes, chalkboard textures, fake handwriting, or the
   terracotta-and-lime "fiesta" palette. The menu is the design.
   ===================================================================== */

/* ------------------------------------------------------------- tokens */
:root {
  /* agave — desaturated blue-green, the colour of blue weber */
  --agave-900: #16302c;
  --agave-800: #1d403a;
  --agave-700: #27544b;
  --agave-600: #386b5f;
  --agave-400: #85afa1;
  --agave-200: #b6cdc4;

  /* masa — warm limestone paper */
  --masa-50:  #faf6ee;
  --masa-100: #f3ece0;
  --masa-200: #e7dcca;
  --masa-300: #d6c7ae;

  --ink:      #1a1815;
  --ink-soft: #4a453d;
  --ink-mute: #6f6858;

  /* the one accent, earned */
  --chile:    #a8321d;
  --chile-lo: #8a2817;

  --rule:     #ccbda3;
  --rule-soft: #e0d4bd;

  --bg:       var(--masa-50);
  --fg:       var(--ink);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 66ch;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --maxw: 78rem;

  --shadow: 0 1px 2px rgba(26, 24, 21, .06),
            0 8px 24px -12px rgba(26, 24, 21, .18);
}

/* ------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the sticky section bar must not cover an anchored heading */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* very fine paper tooth — texture, not gradient */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26,24,21,.022) 1px, transparent 0);
  background-size: 4px 4px;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--agave-700); text-underline-offset: .18em; }
a:hover { color: var(--chile); }

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

/* -------------------------------------------------------- structure */
.wrap {
  width: min(100% - (var(--gut) * 2), var(--maxw));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gut) * 2), 46rem); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--masa-50);
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------- concept notice */
/* Outreach guardrail 2 — visible, persistent, on every page. */
.concept {
  background: var(--ink);
  color: var(--masa-200);
  font-size: .8125rem;
  line-height: 1.45;
  letter-spacing: .01em;
  padding: .6rem 0;
}
.concept strong { color: var(--masa-50); font-weight: 600; }
.concept p { margin: 0; max-width: none; }

/* ------------------------------------------------------------ header */
.masthead {
  background: var(--agave-900);
  color: var(--masa-100);
}
.masthead a { color: inherit; }

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: baseline; gap: .7rem; text-decoration: none; }
.brand__name {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--masa-50);
}
.brand__sub {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--agave-200);
}

.nav { margin-left: auto; }
.nav ul {
  display: flex; gap: clamp(.9rem, 2vw, 1.8rem);
  list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--masa-200);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current] {
  color: var(--masa-50);
  border-bottom-color: var(--chile);
}

/* --------------------------------------------------- store switcher */
.stores {
  background: var(--agave-800);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: .55rem 0;
}
.stores__inner {
  display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap;
  font-size: .8125rem;
}
.stores__label {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .6875rem;
  color: var(--agave-200);
}
.stores__list { display: flex; gap: .4rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.stores__list a {
  display: inline-block;
  text-decoration: none;
  color: var(--masa-100);
  padding: .25rem .6rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: .8125rem;
  white-space: nowrap;
}
.stores__list a:hover { background: var(--agave-600); border-color: var(--agave-400); }

/* -------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--agave-900);
  color: var(--masa-100);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
@media (min-width: 56rem) {
  /* asymmetric on purpose — the plate is the larger half */
  .hero__grid { grid-template-columns: 5fr 6fr; }
}
.hero h1 { color: var(--masa-50); margin-bottom: .35em; }
.hero__lede {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  color: var(--agave-200);
  max-width: 34ch;
}
.hero__figure { position: relative; }
.hero__figure img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}
.hero__caption {
  margin-top: .8rem;
  font-size: .8125rem;
  color: var(--agave-200);
  max-width: 46ch;
}
.hero__caption b {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--masa-50);
  font-weight: 600;
  letter-spacing: -.01em;
}

.btnrow { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }

.btn {
  display: inline-block;
  font: inherit;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  text-decoration: none;
  padding: .8rem 1.4rem;
  border: 1px solid var(--chile);
  background: var(--chile);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--chile-lo); border-color: var(--chile-lo); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--agave-400); color: var(--masa-100); }
.btn--ghost:hover { background: var(--agave-700); border-color: var(--agave-400); color: var(--masa-50); }

/* ----------------------------------------------------------- sections */
/* Varied rhythm — bands are deliberately not all the same height. */
.band { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.band--tight { padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.band--paper { background: var(--masa-100); }
.band--deep  { background: var(--agave-900); color: var(--masa-100); }
.band--deep h2, .band--deep h3 { color: var(--masa-50); }
.band--deep a { color: var(--agave-200); }

.eyebrow {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-mute);
  margin: 0 0 .6rem;
}
.band--deep .eyebrow { color: var(--agave-400); }

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 1.6rem;
}

/* --------------------------------------------------------- the menu */
/* "The menu is the design." Prices sit in a real column with tabular
   figures and a leader rule. This is the part that must look set. */

.sectionnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--masa-50) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: .5rem 0;
}
.sectionnav ul {
  display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.sectionnav a {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink-soft);
  padding: .4rem .7rem;
  border-radius: 2px;
}
.sectionnav a:hover { background: var(--masa-200); color: var(--ink); }

.msection { padding: clamp(2rem, 5vw, 3.25rem) 0; border-top: 1px solid var(--rule-soft); }
.msection:first-of-type { border-top: 0; }

.msection__head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.msection__head h2 { margin: 0; }
.msection__es {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-mute);
}
.msection__note {
  font-size: .875rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: .4rem 0 0;
}
.msection__figure { margin: 1.4rem 0 0; }
.msection__figure img { border-radius: 2px; box-shadow: var(--shadow); }

/* two columns on wide screens — a menu, not a feed */
.items {
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0 clamp(2rem, 5vw, 4rem);
}
@media (min-width: 60rem) {
  .items { grid-template-columns: 1fr 1fr; }
}

.item {
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  break-inside: avoid;
}
.item__top {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.item__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.008em;
  margin: 0;
}
.item__leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-.28em);
}
.item__price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: .9375rem;
  color: var(--chile);
  white-space: nowrap;
  font-weight: 600;
}
.item__price--none {
  color: var(--ink-mute);
  font-weight: 400;
  font-style: italic;
  font-size: .8125rem;
}
.item__desc {
  margin: .3rem 0 0;
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: 54ch;
}
.item__tags {
  margin: .4rem 0 0;
  display: flex; gap: .4rem; flex-wrap: wrap;
  list-style: none; padding: 0;
}
.tag {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .18rem .45rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-mute);
}
.tag--veg { border-color: var(--agave-400); color: var(--agave-700); }

/* --------------------------------------------------------- price note */
.pricenote {
  background: var(--masa-100);
  border-left: 3px solid var(--chile);
  padding: 1rem 1.25rem;
  font-size: .875rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.pricenote p { margin: 0; max-width: 72ch; }
.pricenote strong { color: var(--ink); }

/* ---------------------------------------------------------- specials */
.specials {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
@media (min-width: 40rem) { .specials { grid-template-columns: repeat(5, 1fr); } }
.special {
  background: var(--masa-50);
  padding: 1.1rem 1rem;
  text-align: center;
}
.special__day {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-mute);
  margin: 0 0 .45rem;
}
.special__name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 .3rem;
}
.special__price {
  font-variant-numeric: tabular-nums;
  color: var(--chile);
  font-weight: 700;
  font-size: 1.15rem;
}
.special__desc { font-size: .75rem; color: var(--ink-mute); margin: .35rem 0 0; }

/* --------------------------------------------------------- locations */
.loccards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.loccard {
  background: var(--masa-50);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.35rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.loccard__brand {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--chile);
}
.loccard h3 { margin: 0; }
.loccard__addr { font-size: .9375rem; color: var(--ink-soft); font-style: normal; margin: 0; }
.loccard__tel {
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  font-family: var(--serif);
  text-decoration: none;
  display: inline-block;
  margin-top: .2rem;
}
.loccard__caveat {
  font-size: .75rem;
  color: var(--ink-mute);
  border-top: 1px solid var(--rule-soft);
  padding-top: .6rem;
  margin: .35rem 0 0;
  max-width: none;
}
.loccard__nophone {
  font-size: .8125rem;
  color: var(--ink-mute);
  font-style: italic;
  margin: 0;
}

/* -------------------------------------------------------- two-column */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 54rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 3fr 2fr; }
  .split--wide-right { grid-template-columns: 2fr 3fr; }
}
.split figure { margin: 0; }
.split img { border-radius: 2px; box-shadow: var(--shadow); }

figcaption {
  font-size: .75rem;
  color: var(--ink-mute);
  margin-top: .5rem;
}
.band--deep figcaption { color: var(--agave-400); }

/* --------------------------------------------------- pronunciation */
.guide { margin: 1.5rem 0 0; }
.guide__row {
  display: grid;
  gap: .15rem .9rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 44rem) {
  .guide__row { grid-template-columns: 12rem 1fr; align-items: baseline; }
}
.guide__term { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; }
.guide__say { font-style: italic; color: var(--chile); font-size: .875rem; }
.guide__desc { font-size: .9375rem; color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------- gap */
.gapnote {
  border: 1px dashed var(--rule);
  background: var(--masa-100);
  padding: 1.1rem 1.25rem;
  border-radius: 2px;
  font-size: .875rem;
  color: var(--ink-soft);
}
.gapnote p:last-child { margin-bottom: 0; }
.gapnote strong { color: var(--ink); }

/* ----------------------------------------------------------- footer */
.foot {
  background: var(--ink);
  color: var(--masa-200);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
  font-size: .9375rem;
}
.foot a { color: var(--masa-100); }
.foot__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.foot h2 {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--masa-300);
  font-family: var(--sans);
  font-weight: 600;
  margin: 0 0 .8rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .4rem; }
.foot__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8125rem;
  color: var(--masa-300);
}
.foot__legal p { max-width: 72ch; }

/* ------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------ print */
@media print {
  .concept, .stores, .sectionnav, .nav, .btnrow, .hero__figure { display: none; }
  body { background: #fff; }
  .item { break-inside: avoid; }
  .items { grid-template-columns: 1fr 1fr; }
}

/* current section in the sticky menu nav (set by assets/js/app.js) */
.sectionnav a[aria-current] {
  background: var(--agave-700);
  color: var(--masa-50);
}

/* ---------------------------------------------------------------------
   Their food photography is a black-ground studio series. Two consequences:

   1. On the dark bands the black ground would otherwise read as a hard
      rectangle pasted onto the green. `lighten` drops the black out against
      the darker backdrop so the plate floats, which is what the photographer
      was shooting for. Guarded to dark bands only.
   2. On the menu the photograph is a supporting element, not a band — a
      menu page whose first screen is a giant nacho is not a menu. Section
      images are capped and cropped so the items stay the point.
   --------------------------------------------------------------------- */

.hero__figure img,
.band--deep .split figure img {
  mix-blend-mode: lighten;
}

.msection__figure img {
  width: 100%;
  max-height: 230px;
  object-fit: cover;
  object-position: center 55%;
}

/* the plate shots crop badly at very short heights on narrow screens */
@media (max-width: 40rem) {
  .msection__figure img { max-height: 170px; }
}

/* ---------------------------------------------------------------------
   Page head for the list pages. A menu that spends a whole screen on its
   own title before showing a dish has buried the lede — title and intro
   sit side by side and the first section starts near the fold.
   --------------------------------------------------------------------- */
.pagehead { padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.pagehead__grid { display: grid; gap: .5rem clamp(2rem, 5vw, 4rem); align-items: end; }
@media (min-width: 52rem) {
  .pagehead__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.pagehead h1 { margin: 0; }
.pagehead p  { margin: 0; }
.pagehead .eyebrow { margin-bottom: .3rem; }

.msection:first-of-type { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.msection__figure img { max-height: 200px; }

/* The margarita shot is the one portrait frame in the set (640x960). Cropped
   to a wide band at the default focus it lands on the stem; pull it up to the
   glass. Per-section override rather than a field — there is exactly one. */
#margaritas .msection__figure img { object-position: center 22%; }

/* visually hidden, still announced */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* directions link on a location card */
.loccard__map {
  margin-top: auto;
  padding-top: .75rem;
  align-self: flex-start;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--agave-700);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .1rem;
}
.loccard__map:hover { color: var(--chile); border-bottom-color: var(--chile); }
.loccard__map span[aria-hidden] { font-size: .875em; }