/* ==========================================================================
   MasMais Taqueria — one-page site
   Built by hand from design_handoff_masmais_onepager/ (Home.dc.html + Spec.dc.html).
   No build step, no framework, zero JavaScript. The only third-party embed is
   the Tebi reservation widget.

   Sections: 1 tokens · 2 base · 3 nav · 4 landing · 5 bands · 6 content
             7 menu · 8 contact · 9 footer · 10 404 · 11 breakpoint (720px)

   There is exactly ONE breakpoint, at 720px. Everything else is fluid:
   clamp() type, 5vw gutters, auto-fit grids, wrapping flex.
   ========================================================================== */

@import url('fonts.css');

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* The palette is closed: maroon world, yellow accent, white type, ink lines.
     Depth comes from the maroon ramp, never from new hues. */
  --maroon:       #591427;   /* brand ground: page, nav, section headers      */
  --maroon-dark:  #410D1A;   /* one step deeper: the origin section           */
  --maroon-mid:   #732338;   /* secondary text on white                       */
  --maroon-light: #85344A;   /* quiet borders, link hover on white           */
  --yellow:       #F8C700;   /* CTAs, badges, kickers, card shadow, focus     */
  --cream:        #FAF5EC;   /* the menu list, and nothing else              */
  --ink:          #180104;   /* body text on white, every outline, footer     */
  --white:        #ffffff;

  --gutter:       5vw;
  --section-y:    clamp(64px, 9vw, 120px);
  --w-text:       760px;     /* single-column prose                          */
  --w-menu:       720px;     /* the menu header band                         */
  --w-menu-list:  560px;     /* the bodega list: narrower, so it reads slow  */
  --w-wide:       1140px;    /* photo grid, footer                           */
  --w-contact:    1100px;

  --radius-card:  18px;
  --radius-pill:  999px;
  --radius-sm:    12px;
}

/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  background:var(--maroon);
  scroll-behavior:smooth;
}
/* Respect users who ask for less motion — smooth scrolling included. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

body{
  margin:0;
  background:var(--maroon);
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* height:auto is load-bearing. The width/height attributes on each <img> are
   there so the browser can reserve space before the CSS arrives, but HTML maps
   them to CSS width/height as presentational hints. Without this, height="1400"
   wins over `aspect-ratio` and the photo grid renders 1400px tall. */
img{max-width:100%;height:auto;}

a{color:var(--maroon);}
a:hover{color:var(--maroon-light);}

::selection{background:var(--yellow);color:var(--ink);}

/* Focus is always visible, never the browser default. */
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}

/* Visually hidden but still read aloud. Used for the h1, the "vegetarian"
   labels beside each badge, and the nav toggle's accessible name. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.wrap{max-width:var(--w-wide);margin:0 auto;}

/* Shared shapes -----------------------------------------------------------
   The illustrated-outline rule applied to UI: 3px ink on anything interactive
   or framed, 2px on small elements. Elevation is flat and cartoon — solid
   offset shadows, never blur. */
.pill{
  display:inline-block;
  border-radius:var(--radius-pill);
  text-decoration:none;
  /* A pill that wraps to two lines turns into a lozenge. Keep them on one. */
  white-space:nowrap;
}

.kicker{
  display:inline-block;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:var(--radius-pill);
  padding:5px 16px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.5px;
  color:var(--ink);
}

/* Category heading + yellow rule filling the rest of the line. */
.rule-head{display:flex;align-items:center;gap:16px;}
.rule-head h2{margin:0;}
.rule-head::after{
  content:"";
  flex:1;
  height:4px;
  background:var(--yellow);
  border-radius:2px;
}

h2.display{
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:800;
  color:var(--maroon);
  margin:0;
}

/* --- 3. Nav -------------------------------------------------------------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 24px;
  padding:18px var(--gutter);
  background:var(--maroon);
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
}
.brand img{height:21px;width:auto;display:block;}
.brand-word{
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--white);
  position:relative;
  top:1px;
}

/* The hamburger is a link to #nav-panel and the panel opens on
   `#nav-panel:target` — the url fragment is the control, and that is what keeps
   the site at zero JavaScript. It is a real link, so it is focusable and
   operable from the keyboard with no extra work. */
.nav-burger{display:none;text-decoration:none;}
.nav-burger:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
}
/* Only ever visible inside the mobile overlay. */
.nav-close{display:none;}
.nav-brand{display:none;}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.5vw,26px);
  flex-wrap:wrap;
}
.nav-links a{
  font-weight:800;
  font-size:16px;
  color:var(--white);
  text-decoration:none;
}
.nav-links a:hover{color:var(--yellow);}

/* --- 4. Landing viewport ------------------------------------------------- */
.landing{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:clamp(20px,3vw,32px);
  padding:24px var(--gutter) 40px;
}
.hero img{width:min(380px,68vw);height:auto;}

/* --- 5. Full-bleed photo bands ------------------------------------------- */
.band{
  display:block;
  width:100%;
  object-fit:cover;
  border-top:4px solid var(--ink);
  border-bottom:4px solid var(--ink);
  height:clamp(240px,42vw,540px);
}

/* The first band is taller and zoomed 115% from the top, so the founders' heads
   stay in frame at every width. The wrapper clips the overflow the scale adds. */
.band-zoom{
  overflow:hidden;
  border-top:4px solid var(--ink);
  border-bottom:4px solid var(--ink);
}
.band-zoom img{
  display:block;
  width:100%;
  height:clamp(240px,42vw,600px);
  object-fit:cover;
  object-position:center top;
  transform:scale(1.15);
  transform-origin:center top;
}

/* --- 6. Content sections ------------------------------------------------- */
.section-white{background:var(--white);padding:var(--section-y) var(--gutter);}

.corn{max-width:var(--w-text);margin:0 auto;}
.corn h2{
  margin:18px 0 16px;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(36px,4.5vw,56px);
  line-height:1.02;
  color:var(--maroon);
}
.corn p{margin:0 0 14px;font-size:18px;line-height:1.65;max-width:56ch;}
.corn p:last-child{margin-bottom:0;}

/* Food photo trio. auto-fit means it falls to 2-up then 1-up on its own. */
/* Margarita night — the dark band between the corn story and the food photos.
   Two columns that fall to one under 300px of column, with the text block
   centred against the photo rather than top-aligned. */
.margarita{
  background:var(--maroon-dark);
  padding:clamp(56px,8vw,96px) var(--gutter);
}
.margarita-inner{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4.5vw,56px);
  align-items:center;
}
.margarita img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border:3px solid var(--ink);
  border-radius:var(--radius-card);
  display:block;
}
.margarita-kicker{
  margin:0;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(17px,2vw,20px);
  color:var(--yellow);
}
.margarita h2{
  margin:10px 0 0;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(34px,4.2vw,52px);
  line-height:1.05;
  color:var(--white);
}
.margarita-sub{
  margin:10px 0 0;
  font-weight:700;
  font-size:16px;
  color:rgba(255,255,255,.75);
}
.margarita-copy{
  margin:18px 0 0;
  font-size:18px;
  line-height:1.65;
  color:rgba(255,255,255,.92);
  max-width:48ch;
}
/* Top padding is its own value now: the dark margarita band sits directly
   above, so this section no longer flows out of the white one. */
.photos{background:var(--white);padding:clamp(56px,8vw,96px) var(--gutter) var(--section-y);}
.photos h2{
  margin:0 0 26px;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(30px,3.6vw,44px);
  color:var(--maroon);
}
/* 3-up above the breakpoint, 1-up below. The handoff prototype used
   auto-fit/minmax(230px), but at exactly 720px that yields two columns and a
   stranded third photo; the spec asks for 3-up ≥720 and a stack below. */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.photo-grid figure{margin:0;}
.photo-grid img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border:3px solid var(--ink);
  border-radius:var(--radius-card);
  display:block;
}

/* Origin — the one step deeper into the maroon ramp. */
.origin{background:var(--maroon-dark);padding:var(--section-y) var(--gutter);}
.origin-inner{max-width:var(--w-text);margin:0 auto;}
.origin h2{
  margin:0 0 16px;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(34px,4.2vw,52px);
  line-height:1.05;
  color:var(--white);
}
.origin p{
  margin:0 0 14px;
  font-size:18px;
  line-height:1.65;
  color:rgba(255,255,255,.92);
  max-width:56ch;
}
.origin p:last-child{margin-bottom:0;}

/* Section header bands on maroon (menu, contact). */
.band-head{
  scroll-margin-top:12px;
  padding:clamp(40px,6vw,72px) var(--gutter) clamp(48px,7vw,84px);
}
.band-head-inner{margin:0 auto;text-align:center;}
.band-head h2{
  margin:0;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:800;
  line-height:.95;
  color:var(--white);
}
.band-head .lead{
  margin:18px 0 0;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:700;
  color:var(--yellow);
}

/* --- 7. Menu ------------------------------------------------------------- */
#menu .band-head-inner{max-width:var(--w-menu);}
#menu h2{font-size:clamp(56px,9vw,110px);}
#menu .lead{font-size:clamp(19px,2.6vw,26px);}
.menu-note{
  margin:14px 0 0;
  font-size:16px;
  color:rgba(255,255,255,.85);
}
/* In the legend the (v) is the thing being defined, so it stays full size —
   it is only shrunk to 13px where it trails a dish line. */
.menu-note .veg{font-size:inherit;}

/* The "bodega" list (2026-08-17). The restraint IS the design: cream ground,
   every word one colour, and no rules, leaders, badges, pills or second colours
   anywhere below. The old card/leader/badge treatment read fast-food. */
.menu-list{background:var(--cream);padding:clamp(56px,8vw,96px) var(--gutter);}
.menu-inner{
  max-width:var(--w-menu-list);
  margin:0 auto;
  color:var(--maroon);
  display:flex;
  flex-direction:column;
  gap:clamp(36px,5vw,48px);
}
.menu-category h2{
  margin:0 0 16px;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:.5px;
  color:var(--maroon);
}
/* Only tacos carries a note, and it takes over the 16px gap under the heading. */
.menu-category h2.has-note{margin-bottom:6px;}
.menu-category .cat-note{
  margin:0 0 16px;
  font-style:italic;
  font-size:14px;
}

/* The dish stack. A 2-item category and a 12-item one lay out identically —
   the stack just grows. Never art-direct an individual dish. */
.dishes{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:16px;
  line-height:1.5;
}

/* One row per dish: the whole line left, the price right, on the baseline.
   A long line wraps inside the left column and the price stays put. */
.dish{
  display:flex;
  gap:24px;
  align-items:baseline;
}
.dish p{margin:0;flex:1;}
.dish-price{
  font-weight:600;
  white-space:nowrap;
}

/* The (v) mark. It is decorative, and the word "vegetarian" travels beside it
   in an .sr-only span, so a screen reader hears "chilaquiles …, vegetarian". */
.veg{
  font-style:italic;
  font-size:13px;
}

/* --- 8. Contact ---------------------------------------------------------- */
#contact .band-head-inner{max-width:900px;}
#contact h2{font-size:clamp(48px,8vw,96px);}
#contact .lead{font-size:clamp(18px,2.4vw,24px);}

.contact-main{background:var(--white);padding:clamp(56px,8vw,96px) var(--gutter);}
.contact-inner{max-width:var(--w-contact);margin:0 auto;}

/* The card is the repeating unit: a third location is a third card and
   nothing else changes. */
.locations{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,3.5vw,40px);
}
/* The hours rows overflow when the CARD is narrow, which happens at 360px and
   again at ~720-900px where the cards sit 2-up. That is a component question,
   not a viewport one, so it is a container query rather than a second
   breakpoint — the page still has exactly one of those. */
.location{
  container-type:inline-size;
  border:3px solid var(--ink);
  border-radius:var(--radius-card);
  box-shadow:8px 8px 0 var(--yellow);
  padding:clamp(24px,3.5vw,34px);
  background:var(--white);
}
/* A location that isn't open yet is drawn quieter: dashed, no shadow. */
.location-soon{
  border:3px dashed var(--maroon-light);
  box-shadow:none;
}
.location h2{font-size:30px;}
.location-soon h2{margin:14px 0 0;}
.location-addr{
  display:inline-block;
  margin-top:6px;
  font-weight:700;
  font-size:16px;
  color:var(--maroon);
}
.hours{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hours div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:16px;
}
.hours .day{font-weight:800;}
/* A time range is one value — never let it break across lines. */
.hours .day + span{white-space:nowrap;}
/* Below ~380px of card, "monday – wednesday" plus a time range no longer fits
   on one line at 16px; one step down the scale keeps every day on its own row. */
@container (max-width: 380px){
  .hours div{font-size:15px;gap:12px;}
}
/* Narrowest the card ever gets: 2-up at exactly 720px, and phones under 360px. */
@container (max-width: 330px){
  .hours div{font-size:14px;gap:10px;}
}
.location-note{margin:22px 0 0;font-size:15px;color:var(--maroon-mid);}
.location-soon p{
  margin:12px 0 0;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  max-width:44ch;
}
.location-soon a{
  display:inline-block;
  margin-top:16px;
  font-weight:800;
  font-size:16px;
  color:var(--maroon);
}

.talk{margin-top:clamp(56px,8vw,88px);}
.talk h2{font-size:30px;}
.talk-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px;
}
.talk-links a{
  border:3px solid var(--ink);
  padding:12px 24px;
  font-weight:800;
  font-size:16px;
  color:var(--ink);
  background:var(--white);
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.talk-links a:hover{background:var(--yellow);color:var(--ink);}
.talk-note{margin:20px 0 0;font-size:15px;color:var(--maroon-mid);}

/* --- 9. Footer ----------------------------------------------------------- */
.site-footer{
  background:var(--ink);
  color:var(--white);
  padding:32px var(--gutter);
}
.footer-inner{
  max-width:var(--w-wide);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 40px;
}
.footer-word{
  margin:0;
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:800;
  font-size:22px;
  color:var(--white);
}
.footer-word span{color:var(--yellow);font-size:14px;}
.site-footer a{
  color:var(--white);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
}
.site-footer a:hover{color:var(--yellow);}

/* --- 10. 404 ------------------------------------------------------------- */
/* One screen, maroon ground, nothing else. Served by 404.html, which Apache
   and Netlify both hand out at the url that failed. Its one button is the
   site's only yellow button now, so the style lives here rather than in the
   shared shapes above. Hover lifts 1px up-left and grows the shadow; active
   presses 1px down-right and shrinks it. */
.notfound{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(24px,4vw,40px);
  padding:40px var(--gutter);
  text-align:center;
  background:var(--maroon);
}
.notfound p{
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:700;
  color:var(--white);
  font-size:clamp(26px,6vw,40px);
  line-height:1.15;
  max-width:14ch;
  margin:0;
}
.notfound .pill{
  background:var(--yellow);
  color:var(--ink);
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:700;
  font-size:16px;
  padding:8px 20px;
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
}
.notfound .pill:hover{
  color:var(--ink);
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink);
}
.notfound .pill:active{
  transform:translate(1px,1px);
  box-shadow:1px 1px 0 var(--ink);
}
/* Yellow-on-yellow would vanish, so the ring goes ink here. */
.notfound .pill:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}

/* --- 11. The one breakpoint ---------------------------------------------- */
@media (max-width:719px){
  /* The bar follows you down the page, so menu and contact are always one tap
     away on a phone. */
  .site-header{position:sticky;top:0;z-index:50;}

  .nav-burger{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    border:2px solid rgba(255,255,255,.35);
    border-radius:var(--radius-sm);
    cursor:pointer;
  }
  .nav-burger span{
    width:22px;
    height:3px;
    background:var(--white);
    border-radius:2px;
  }

  .photo-grid{grid-template-columns:1fr;}

  /* Full screen, so the only thing on it is the choice. It covers the page
     instead of pushing it, so the centred logo behind it never moves.
     The panel is ALWAYS fixed over the viewport here and is only hidden with
     visibility, never display:none. That is what stops the jump: following
     #nav-panel makes the browser scroll the panel into view, and a panel that
     already fills the viewport needs no scrolling. Hide it with display and the
     browser scrolls to the top of the page instead, so a menu opened halfway
     down loses your place. visibility:hidden also keeps it out of the tab order
     and off screen readers while it is shut. */
  .nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    position:fixed;
    inset:0;
    z-index:100;
    background:var(--maroon);
    gap:8px;
    padding:80px var(--gutter);
    overflow-y:auto;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }
  #nav-panel:target{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  /* The page must not scroll away underneath an open overlay. */
  body:has(#nav-panel:target){overflow:hidden;}
  /* Big targets, well clear of 44px, and centred so the thumb reaches them. */
  #nav-panel a:not(.nav-close){
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:64px;
    width:100%;
    font-size:clamp(28px,9vw,40px);
  }
  /* Lands on the same pixels as the header's wordmark, so opening the menu
     reads as the header growing rather than as a different screen. */
  #nav-panel .nav-brand{
    display:flex;
    align-items:center;
    gap:9px;
    position:absolute;
    top:18px;
    left:var(--gutter);
    height:44px;
  }
  #nav-panel .nav-brand img{height:21px;width:auto;display:block;}

  /* Sits exactly where the burger was, so it reads as the same button. */
  #nav-panel .nav-close{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:18px;
    right:var(--gutter);
    width:44px;
    height:44px;
    border:2px solid rgba(255,255,255,.35);
    border-radius:var(--radius-sm);
    color:var(--white);
    font-size:28px;
    line-height:1;
    text-decoration:none;
  }
}