/* Tacos Ay Ay Ay, Boulder. Hero study.
   The opening is ONE continuous drone take, not a sequence of plates: the camera
   flies down the centre aisle and turns into the archway booth in a single shot.
   Resting state is the settled page: last frame held, logo visible, page scrollable.
   The html.cine class is what adds the shot and the scroll lock, and main.js takes
   it off again. If the JS never runs, the page is simply already settled. */

:root {
  --adobe: #b9774c;
  --clay: #7a4428;
  --tile: #e4c9a8;
  --ink: #1b1310;
  --cream: #f5ece1;
  --neon: #ffd23f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0a0706;
  color: var(--cream);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The lock. overflow:hidden alone still permits programmatic scrolls, so the
   scrollable extent is collapsed to the viewport instead. */
html.cine, html.cine body {
  height: 100%;
  overflow: hidden;
}

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

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: #0a0706;
}

/* The shot. It holds its last frame when it ends, which IS the resting hero,
   so nothing has to be swapped in behind it. */
.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

/* Phones get the framed still instead. A 16:9 clip cover-crops to a sliver on a
   tall viewport, and they never download the 5MB. */
.still { display: none; }

@media (max-width: 600px) {
  .shot { display: none; }
  .still {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 55%;
  }
}

/* Vignette and the pool of shade the logo sits in. Always present. */
.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 56%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.58) 100%);
}

.blackout {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #000;
  opacity: 0;
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* The source art is neon on solid black, so screen drops the black and keeps the glow.
   The blend has to sit on the element that shares a stacking context with the photo.
   Put it on the img and it composites against .mark's own empty backdrop instead,
   and the logo renders as a black tile. */
.mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(56vw, 360px);
  transform: translate(-50%, -52%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.mark img {
  will-change: transform, opacity;
}

.skip {
  display: none;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  padding: 15px 20px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(10,7,6,.72);
  color: #fff;
  font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}

.skip:hover { background: rgba(10,7,6,.9); }
.skip:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }

html.cine .skip { display: block; }

.cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 1px;
  height: 56px;
  transform: translateX(-50%);
  overflow: hidden;
  background: rgba(255,255,255,.22);
  pointer-events: none;
}

.cue span {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--neon);
  animation: cueRun 2.4s cubic-bezier(.6,0,.3,1) infinite;
}

@keyframes cueRun {
  0%   { transform: translateY(-24px); }
  100% { transform: translateY(60px); }
}

/* ---------- the opening ---------- */

/* Only two things animate now. The shot itself carries the camera move, so the
   CSS has no business touching it. */

@keyframes markIn {
  0%   { transform: scale(.88); opacity: 0; filter: brightness(1.6); }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes blackOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cueIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* The mark and the cue are timed off the VIDEO, not off page load, so they land
   on the settle whether or not playback started on time. main.js adds .ending. */
html.cine .mark img { opacity: 0; }
html.cine .cue { opacity: 0; }

html.cine.ending .mark img {
  animation: markIn 1.2s cubic-bezier(.2,.7,.3,1) both;
}

html.cine.ending .cue {
  animation: cueIn .6s ease-out .9s both;
}

html.cine .blackout {
  animation: blackOut .9s ease-out both;
}

/* ---------- below the fold ---------- */

main { position: relative; z-index: 1; background: var(--ink); }

:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 15px 20px;
  background: var(--neon);
  color: var(--ink);
  font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
}

.skiplink:focus { left: 0; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(233,203,170,.16);
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding: 12px 2px;
  color: #e3d3c2;
  font-size: 15px;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav a:hover { border-bottom-color: var(--neon); }

.nav-order {
  padding: 12px 18px !important;
  border: 1px solid rgba(255,210,63,.55) !important;
  border-radius: 999px;
  color: var(--neon) !important;
  font-weight: 600;
}

.nav-order:hover { background: rgba(255,210,63,.12); }

/* ---------- bands ---------- */

.band {
  max-width: 1120px;
  margin: 0 auto;
  padding: 84px 24px 96px;
  text-align: center;
}

.intro { max-width: 820px; padding-bottom: 72px; }

.kicker {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c9a079;
}

.band h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--cream);
}

.band h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--cream);
}

.lede {
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  color: #e3d3c2;
}

.call a {
  display: inline-block;
  padding: 11px 0 9px;
  color: var(--neon);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,210,63,.5);
}

.call a:hover { border-bottom-color: var(--neon); }

.btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--neon);
  color: var(--ink);
  font: 600 16px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
}

.btn:hover { background: #ffdd68; }

.note {
  max-width: 640px;
  margin: 34px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: #c9a079;
}

.cta { margin: 36px 0 0; }

/* ---------- photo grid ---------- */

/* One frame shape, one ratio, every photo native 3:4 so nothing is cropped.
   The dome echoes the archways the opening shot lands on. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 20px;
  margin-top: 8px;
}

@media (min-width: 620px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.shotframe { margin: 0; }

.shotframe img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 50% 50% 10px 10px / 34% 34% 2% 2%;
}

.shotframe figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #c9a079;
}

/* ---------- full width plate ---------- */

/* The salsa bar is 3:2 and no 3:4 frame can hold it, so it gets its own element
   instead of a worse crop. The caption sits on solid ink, never over the photo. */
.plate {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  border-top: 1px solid rgba(233,203,170,.16);
  border-bottom: 1px solid rgba(233,203,170,.16);
  background: #150f0c;
}

.plate img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.plate-cap { padding: 56px 24px 64px; text-align: center; }

.plate-cap h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.1;
  color: var(--cream);
}

.plate-cap p {
  max-width: 420px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.6;
  color: #e3d3c2;
}

@media (min-width: 860px) {
  .plate { grid-template-columns: 1.15fr 1fr; }
  .plate-cap { padding: 48px 56px; text-align: left; }
  .plate-cap p { margin: 0; }
}

/* ---------- adobe wall ---------- */

/* The menu hangs on a wall rather than floating on the page background. Pueblo
   adobe coursing, drawn as a tiling SVG so it costs no request and stays crisp.

   The texture lives on ::before, not on the section, for a measurable reason: the
   contrast sweep skips any element whose nearest opaque ancestor carries a
   background-image, which would leave every heading and caption on this wall
   unverified. The section keeps a flat background-color set to the LIGHTEST pixel
   the texture can produce, so the sweep still measures, and measures the worst
   case. The real wall is darker everywhere, so the reported ratio is a floor. */
.adobe {
  position: relative;
  isolation: isolate;
  background-color: #403025;
}

.adobe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #332419;
  background-image:
    /* vignette first so the courses fade into the dark bands above and below */
    /* the long top fade keeps the heading and lede on near-flat ink, so the wall
       begins where the boards begin and never runs behind running text */
    linear-gradient(180deg, var(--ink) 0, rgba(27,19,16,0) 300px,
                            rgba(27,19,16,0) calc(100% - 200px), var(--ink) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cg fill='rgb(0,0,0)' fill-opacity='.3'%3E%3Crect width='240' height='5'/%3E%3Crect y='60' width='240' height='5'/%3E%3Crect width='5' height='60'/%3E%3Crect x='120' width='5' height='60'/%3E%3Crect x='60' y='60' width='5' height='60'/%3E%3Crect x='180' y='60' width='5' height='60'/%3E%3C/g%3E%3Cg fill='rgb(250,232,205)' fill-opacity='.06'%3E%3Crect y='5' width='240' height='1'/%3E%3Crect y='65' width='240' height='1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 240px 120px;
}

/* Smaller courses on a phone, or six-foot blocks fill the screen. */
@media (max-width: 759px) {
  .adobe::before { background-size: 100% 100%, 150px 76px; }
}

/* ---------- menu cards ---------- */

/* align-items:start so a short card stops stretching to the tallest in its row
   and leaving a column of empty panel under the last item. */
.menu {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 20px;
  text-align: left;
}

/* Two wide boards, never three narrow ones. Three columns of this much text at
   1440 is the wall of words the page opened with. */
@media (min-width: 760px) { .menu { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* Each board is an object rather than a block of text: a domed head echoing the
   archways, its own painted panel, and a tile stripe under the title. */
.card {
  position: relative;
  overflow: hidden;
  padding: 0 0 26px;
  border: 1px solid rgba(233,203,170,.18);
  border-radius: 120px 120px 16px 16px / 56px 56px 16px 16px;
  /* Flat, not a gradient. A gradient here reads as a background-image, which makes
     every line of menu text unmeasurable by the contrast sweep for a difference of a
     few levels of brown. The arch, the border and the drop shadow carry the depth. */
  background: #221811;
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
}

.card h3 {
  margin: 0;
  padding: 30px 26px 18px;
  font-size: 20px;
  letter-spacing: .03em;
  text-align: center;
  color: var(--neon);
}

/* The tile band is drawn, not shipped as an image. */
.card h3::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--adobe) 0 8px, transparent 8px 13px);
}

.card ul { margin: 0; padding: 4px 26px 0; list-style: none; }

.card li {
  padding: 10px 0;
  border-top: 1px solid rgba(233,203,170,.12);
  font-size: 16px;
  line-height: 1.45;
  color: var(--cream);
}

.card li:first-child { border-top: 0; }

.card li span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: #c9a079;
}

.meats {
  margin: 0;
  padding: 2px 26px 14px;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  color: #c9a079;
}

/* A photograph takes a full row inside the grid, so the text never runs more
   than two boards deep without a break. 5:2 keeps 60 percent of the height of a
   3:2 frame, which the receding aisle survives. Narrow screens get it uncropped
   because there is no second column to match. */
.board-shot { grid-column: 1 / -1; margin: 2px 0; }

.board-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: center 48%;
  border-radius: 16px;
}

.board-shot figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: #c9a079;
  text-align: center;
}

@media (max-width: 759px) {
  .board-shot img { aspect-ratio: 3 / 2; }
}

/* Full bleed tint, so the band's own max-width does not draw an inset panel
   edge down the middle of the page. */
.bar { background: #150f0c; border-top: 1px solid rgba(233,203,170,.16); }

/* ---------- visit ---------- */

.visit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: left;
  margin-top: 8px;
}

@media (min-width: 760px) { .visit-grid { grid-template-columns: repeat(3, 1fr); } }

.vcol h3 {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c9a079;
}

.addr, .contact, .hours {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--cream);
}

.hours .day { display: inline-block; min-width: 10.5em; color: #c9a079; font-size: 16px; }
.hours .hrs { color: var(--cream); }

/* Below this the longest label eats the whole line, so one pair wraps and the
   other does not. Stack them all instead of letting the rows disagree. */
@media (max-width: 480px) {
  .hours .day { display: block; min-width: 0; }
}

.contact { line-height: 1.2; }

.contact a {
  display: inline-block;
  padding: 12px 0 10px;
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,210,63,.45);
}

.contact a:hover { border-bottom-color: var(--neon); }

.small {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #c9a079;
}

/* ---------- footer ---------- */

.foot {
  position: relative;
  z-index: 1;
  padding: 44px 24px 56px;
  border-top: 1px solid rgba(233,203,170,.16);
  background: var(--ink);
  text-align: center;
}

.foot-name {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cream);
}

.foot-line { margin: 0 0 16px; font-size: 15px; color: #c9a079; }
.foot-line a { color: #e3d3c2; text-decoration: none; border-bottom: 1px solid rgba(227,211,194,.4); }

.foot-links { margin: 0; display: flex; justify-content: center; gap: 24px; }
.foot-links a { padding: 13px 2px; font-size: 15px; color: #e3d3c2; text-decoration: none; border-bottom: 1px solid rgba(227,211,194,.4); }

/* ---------- mobile call bar ---------- */

/* Phones only, and phones never run the opening sequence, so this can never
   collide with the scroll lock. */
.callbar { display: none; }

@media (max-width: 600px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    gap: 1px;
    background: rgba(233,203,170,.2);
    border-top: 1px solid rgba(233,203,170,.2);
  }
  .callbar a {
    padding: 17px 10px;
    background: #241a15;
    color: var(--cream);
    font: 600 16px/1 ui-sans-serif, system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
  }
  .callbar-order { background: var(--neon) !important; color: var(--ink) !important; }
  .foot { padding-bottom: 104px; }
}

/* ---------- documents ---------- */

.doc {
  max-width: 740px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  text-align: left;
}

.doc h1 { margin: 0 0 8px; font-size: clamp(30px, 5vw, 44px); line-height: 1.1; color: var(--cream); }
.doc h2 { margin: 38px 0 12px; font-size: 21px; color: var(--neon); }
.doc p, .doc li { font-size: 17px; line-height: 1.7; color: #e3d3c2; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 14px; }
.doc strong { color: var(--cream); }
.doc a { color: var(--neon); }
.doc-updated { font-size: 14px !important; color: #c9a079 !important; }

.doc-back {
  display: inline-block;
  margin-top: 40px;
  padding: 14px 22px;
  border: 1px solid rgba(255,210,63,.55);
  border-radius: 999px;
  color: var(--neon);
  font-size: 15px;
  text-decoration: none;
}

.doc-back:hover { background: rgba(255,210,63,.12); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .shot { display: none; }
  .still {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 55%;
  }
  .cue span { animation: none; }
  html.cine .mark img,
  html.cine .cue,
  html.cine .blackout { animation: none; opacity: 1; }
  html.cine .blackout { opacity: 0; }
}