*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--dot);color:var(--bg)}

/* ---------- the mark ---------- */
.wordmark{
  font-family:var(--font-display);font-weight:var(--display-weight);
  font-stretch:var(--display-stretch);font-style:var(--display-style);
  letter-spacing:var(--display-tracking);text-transform:var(--display-case);
  line-height:.82;white-space:nowrap;display:inline-block;
}
.dot{
  display:inline-block;width:.2em;height:.2em;border-radius:50%;
  background:var(--dot-fill);margin-left:.05em;vertical-align:baseline;
}
[data-brand="night"] .dot{width:.24em;height:.24em}
[data-brand="bluecorn"] .dot{width:.17em;height:.17em;margin-left:.03em}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(16px,4vw,48px);background:var(--bg);transition:background .5s ease;
}
.nav .wordmark{font-size:30px}
.nav ul{list-style:none;display:flex;gap:clamp(14px,3vw,36px);font-weight:600;font-size:15px}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--dot);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.nav .order{background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:999px}
.nav .order::after{display:none}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100svh - 70px);display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,5vw,64px) clamp(16px,4vw,48px) 96px;
}
.hero .wordmark{font-size:var(--fit,24vw);margin-left:-.04em;align-self:flex-start}
.hero .dot{animation:land .9s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes land{from{transform:translateY(-1.2em) scale(.4);opacity:0}to{transform:none;opacity:1}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:40px}
.hero-foot h1{font-family:var(--font-display);font-style:var(--display-style);font-weight:var(--display-weight);font-size:clamp(28px,4.4vw,56px);line-height:1;letter-spacing:-.02em;max-width:14ch}
.hero-foot p{color:var(--muted);max-width:30ch;font-size:15px}

/* ---------- strip ---------- */
.strip{border-top:2px solid var(--line);border-bottom:2px solid var(--line);overflow:hidden;white-space:nowrap}
.strip-track{display:inline-flex;gap:48px;padding:14px 0;animation:scroll 28s linear infinite;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.08em}
.strip-track span::after{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--dot);margin-left:48px;vertical-align:middle}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section.block{padding:clamp(64px,10vw,140px) clamp(16px,4vw,48px)}
.label{font-family:var(--font-display);font-style:var(--display-style);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:var(--display-tracking);text-transform:var(--display-case);font-size:clamp(56px,11vw,150px);line-height:.85;margin-bottom:clamp(32px,6vw,72px)}

/* menu */
.menu-list{list-style:none;border-top:2px solid var(--line)}
.menu-item{display:grid;grid-template-columns:60px 1fr auto;gap:12px 24px;align-items:baseline;padding:28px 0;border-bottom:2px solid var(--line);transition:padding .25s}
.menu-item:hover{padding-left:12px}
.menu-item .no{font-weight:700;color:var(--muted);font-size:15px}
.menu-item h3{font-family:var(--font-display);font-style:var(--display-style);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:-.03em;text-transform:var(--display-case);font-size:clamp(32px,5vw,64px);line-height:1}
.menu-item h3 em{font-style:normal;color:var(--dot)}
.menu-item .desc{grid-column:2/3;color:var(--muted);font-size:16px}
.menu-item .price{font-weight:700;font-size:clamp(20px,2.4vw,28px);grid-row:1/3;grid-column:3}
.menu-extras{display:flex;gap:clamp(24px,6vw,96px);flex-wrap:wrap;margin-top:40px;font-size:16px}
.menu-extras strong{display:block;font-size:20px}
.menu-extras span{color:var(--muted)}
.rule{margin-top:56px;font-size:15px;color:var(--muted)}
.rule b{color:var(--ink)}

/* photo slot */
.photo{
  margin:0 clamp(16px,4vw,48px);aspect-ratio:16/8;border:2px dashed var(--muted);border-radius:4px;
  display:grid;place-items:center;text-align:center;color:var(--muted);font-size:14px;padding:24px;position:relative;overflow:hidden;
}
.photo .tortilla{width:min(36vw,280px);aspect-ratio:1;border-radius:50%;background:var(--dot-fill);margin-bottom:18px;opacity:.95}
.photo small{display:block;letter-spacing:.06em;text-transform:uppercase;font-weight:700}

/* manifesto */
.manifesto p{font-family:var(--font-display);font-style:var(--display-style);font-weight:var(--display-weight);font-size:clamp(30px,5.4vw,76px);line-height:1.04;letter-spacing:-.025em;max-width:18ch}
.manifesto p span{color:var(--muted)}

/* find us */
.find{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;border-top:2px solid var(--line);padding-top:32px}
.find h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.find p{font-size:20px;font-weight:600;line-height:1.35}
.tbd{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--muted);color:var(--muted);border-radius:999px;padding:1px 8px;vertical-align:middle;margin-left:6px}

/* footer */
footer{padding:48px clamp(16px,4vw,48px) 140px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:2px solid var(--line)}
footer .big{width:clamp(80px,14vw,180px);aspect-ratio:1;border-radius:50%;background:var(--dot-fill)}
footer small{color:var(--muted)}

/* ---------- preview switcher (not part of the site) ---------- */
.switcher{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:#1a1a1a;color:#fff;font:600 13px/1 'Instrument Sans',system-ui,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px);overflow-x:auto;
}
.switcher .hint{padding:0 10px 0 12px;opacity:.6;white-space:nowrap}
.switcher button{all:unset;cursor:pointer;padding:9px 14px;border-radius:999px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.switcher button i{width:10px;height:10px;border-radius:50%;display:inline-block}
.switcher button[aria-pressed="true"]{background:#fff;color:#111}
.switcher a{padding:9px 14px;border-radius:999px;background:#333;white-space:nowrap}

@media (max-width:640px){
  .nav ul li:not(:last-child){display:none}
  .menu-item{grid-template-columns:36px 1fr auto}
  .switcher .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:640px){.hero{min-height:72svh}}

/* painted drop shadow (only Taquería sets --display-shadow) */
.wordmark,.label,.menu-item h3,.hero-foot h1,.manifesto p{text-shadow:var(--display-shadow,none)}

/* ---------- Taquería direction ---------- */
[data-brand="taqueria"] body{
  background-color:var(--bg);
  background-image:linear-gradient(#E4E4DC 1.5px,transparent 1.5px),linear-gradient(90deg,#E4E4DC 1.5px,transparent 1.5px);
  background-size:64px 64px;
}
[data-brand="taqueria"] .nav{background:var(--bg)}
[data-brand="taqueria"] .nav .order{background:var(--dot);color:#fff;font-weight:700}
/* the dot: a stamp, a little off-register */
[data-brand="taqueria"] .dot{
  position:relative;top:-.025em;left:.012em;
  border-radius:52% 48% 50% 47%/49% 53% 47% 51%;
  box-shadow:.03em .03em 0 var(--ink);
}
[data-brand="taqueria"] .hero-foot h1{font-size:clamp(34px,5.4vw,72px);line-height:.95;max-width:12ch;letter-spacing:.005em}
[data-brand="taqueria"] .hero-foot p{color:var(--ink);font-weight:500}
/* tarp-stripe band */
[data-brand="taqueria"] .strip{
  border:0;background:var(--yellow);position:relative;
  padding:12px 0;
}
[data-brand="taqueria"] .strip::before,[data-brand="taqueria"] .strip::after{
  content:"";position:absolute;left:0;right:0;height:12px;
  background:repeating-linear-gradient(90deg,var(--board) 0 28px,#fff 28px 56px,var(--dot) 56px 84px,#fff 84px 112px);
}
[data-brand="taqueria"] .strip::before{top:0}
[data-brand="taqueria"] .strip::after{bottom:0}
[data-brand="taqueria"] .strip-track{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.04em;font-weight:400;padding:12px 0}
[data-brand="taqueria"] .strip-track span::after{background:var(--dot);box-shadow:2px 2px 0 var(--ink)}
/* the menu is the wall price board */
[data-brand="taqueria"] #menu{
  background:var(--board);color:#fff;
  --ink:#fff;--line:#fff;--muted:#CFE0FF;--shadow-color:#14110F;
}
[data-brand="taqueria"] #menu .menu-item h3 em{color:var(--yellow)}
[data-brand="taqueria"] #menu .price{
  font-family:'Alfa Slab One',serif;font-weight:400;color:var(--yellow);
  font-size:clamp(34px,4.6vw,60px);line-height:1;text-align:right;text-shadow:.05em .05em 0 #14110F;
}
[data-brand="taqueria"] #menu .price small{display:block;font:700 12px/1.4 'Instrument Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:none;margin-top:6px}
[data-brand="taqueria"] #menu .menu-extras strong{font-family:'Anton',sans-serif;font-weight:400;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
[data-brand="taqueria"] #menu .rule{color:#fff}
[data-brand="taqueria"] #menu .rule b{color:var(--yellow)}
/* wax paper photo slot */
[data-brand="taqueria"] .photo{
  border:0;border-radius:2px;color:#5A5650;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.45) 0 2px,transparent 2px 46px),
    repeating-linear-gradient(25deg,rgba(0,0,0,.035) 0 1px,transparent 1px 60px),
    linear-gradient(160deg,#EFE8D2,#E2D8BC);
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}
[data-brand="taqueria"] .photo .tortilla{transform:rotate(-7deg)}
[data-brand="taqueria"] .manifesto p span{color:var(--board)}
[data-brand="taqueria"] .find{border-top:4px solid var(--ink)}
[data-brand="taqueria"] footer{border-top:12px solid transparent;border-image:repeating-linear-gradient(90deg,var(--board) 0 28px,#fff 28px 56px,var(--dot) 56px 84px,#fff 84px 112px) 12}
[data-brand="taqueria"] .hero .wordmark{text-shadow:.026em .026em 0 var(--dot);line-height:.95}
[data-brand="taqueria"] .hero .dot{box-shadow:.02em .02em 0 var(--ink)}

/* ---------- Banner direction (the $20 eBay sign) ---------- */
[data-brand="banner"] body{background:#EDEDEA}
/* every "banner" = vinyl panel + thin black border + four corner grommets */
[data-brand="banner"] .hero,
[data-brand="banner"] #menu,
[data-brand="banner"] .manifesto,
[data-brand="banner"] .photo{
  --banner-bg:var(--bg);
  margin:16px clamp(10px,2vw,24px);border:3px solid var(--outline);
  background:
    var(--grommets) top 10px left 10px/20px 20px no-repeat,
    var(--grommets) top 10px right 10px/20px 20px no-repeat,
    var(--grommets) bottom 10px left 10px/20px 20px no-repeat,
    var(--grommets) bottom 10px right 10px/20px 20px no-repeat,
    var(--banner-bg);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
[data-brand="banner"] .hero{
  color:#fff;min-height:0;
  padding:clamp(40px,4.5vw,64px) clamp(16px,4vw,48px);
  gap:clamp(28px,5vw,72px);
}
[data-brand="banner"] .hero-foot{margin-top:0}
[data-brand="banner"] .nav{background:#EDEDEA;color:#1A1A1A}
[data-brand="banner"] .nav .wordmark{color:var(--bg)}
[data-brand="banner"] .nav .order{background:var(--bg);color:#fff}
/* white block letters, thin black outline */
[data-brand="banner"] .wordmark,[data-brand="banner"] .label,[data-brand="banner"] .menu-item h3,
[data-brand="banner"] .hero-foot h1,[data-brand="banner"] .manifesto p{
  -webkit-text-stroke:.04em var(--outline);paint-order:stroke fill;
}
[data-brand="banner"] .nav .wordmark{-webkit-text-stroke:0}
[data-brand="banner"] .hero-foot h1{font-size:clamp(34px,5.6vw,80px);line-height:.92;max-width:none}
[data-brand="banner"] .hero-foot p{color:#fff;font-weight:600;max-width:34ch}
[data-brand="banner"] .dot{box-shadow:none}
/* strip = black tape */
[data-brand="banner"] .strip{background:#1A1A1A;color:#fff;border:0;margin:0}
[data-brand="banner"] .strip-track{font-weight:900;font-stretch:82%;font-size:20px}
[data-brand="banner"] .strip-track span::after{background:var(--dot-fill);--hole:#1A1A1A;width:.9em;height:.9em}
/* menu = the white banner, red letters */
[data-brand="banner"] #menu{--banner-bg:#fff;--hole:#fff;color:var(--bg);--ink:var(--bg);--muted:#5A5A5A;--line:var(--outline)}
[data-brand="banner"] #menu .menu-item h3,[data-brand="banner"] #menu .label{-webkit-text-stroke:.03em var(--outline)}
[data-brand="banner"] #menu .menu-item h3 em{color:var(--bg)}
[data-brand="banner"] #menu .desc,[data-brand="banner"] #menu .menu-extras span{color:#3A3A3A}
[data-brand="banner"] #menu .price{font-weight:900;font-stretch:82%;font-size:clamp(28px,3.6vw,48px);text-align:right;line-height:1;color:var(--bg)}
[data-brand="banner"] #menu .price small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#1A1A1A;margin-top:4px}
[data-brand="banner"] #menu .menu-extras strong{text-transform:uppercase;font-weight:900;font-stretch:82%;font-size:22px}
[data-brand="banner"] #menu .rule{color:#3A3A3A}
[data-brand="banner"] #menu .rule b{color:var(--bg)}
/* photo + manifesto banners */
[data-brand="banner"] .photo{--banner-bg:#fff;--hole:#fff;color:#3A3A3A;border-style:solid}
[data-brand="banner"] .manifesto{color:#fff}
[data-brand="banner"] .manifesto p span{color:#1A1A1A;-webkit-text-stroke:0}
[data-brand="banner"] #find,[data-brand="banner"] footer{color:#1A1A1A;--muted:#6A6A6A;--line:#1A1A1A;--hole:#EDEDEA}
[data-brand="banner"] #find .label{color:var(--bg)}
[data-brand="banner"] footer .wordmark{color:var(--bg)}
[data-brand="banner"] .tbd{border-color:#6A6A6A;color:#6A6A6A}
/* grommet drawn per element so --hole resolves to the color behind each one */
[data-brand="banner"] .dot,[data-brand="banner"] .photo .tortilla,[data-brand="banner"] footer .big,
[data-brand="banner"] .strip-track span::after,[data-brand="banner"] .icon,[data-brand="banner"] .stamp{
  background:radial-gradient(circle, var(--hole,#E3262F) 0 33%, #2A2A2A 34% 40%, #D9D9D9 41% 52%, #9A9A9A 53% 66%, #5C5C5C 67% 73%, #1A1A1A 74% 100%);
}
[data-brand="banner"] .hero-foot h1{text-transform:uppercase;font-weight:900;font-stretch:82%;letter-spacing:-.005em}


.secret{border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:clamp(32px,6vw,72px) 0}.secret-tag{display:inline-block;background:var(--ink);color:var(--bg);padding:6px 12px;margin-bottom:24px;text-transform:uppercase;font-weight:900;letter-spacing:.08em;font-size:12px}.secret h2{font-size:clamp(32px,6vw,80px);line-height:1.05;letter-spacing:-.04em;margin-bottom:20px}.secret p{max-width:38ch;font-size:clamp(17px,2vw,23px)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.strip-track,.hero .dot{animation:none}*{transition:none!important}}
[data-brand="banner"] .secret-tag{color:#fff}

.instagram{text-decoration:underline;text-underline-offset:.2em}.instagram:hover{color:var(--bg)}