/* HoTaco — Taqueria del Vaquero
   One stylesheet for the whole site.
   Rule: colour arrives only through the photography. */

:root{
  color-scheme: light;
  --paper:#FBFAF8;
  --wash:#F5F3EF;
  --ink:#121110;
  --mute:#8C8880;
  --faint:#B8B4AC;
  --rule:#E4E1DA;
  /* Straight off the wordmark. The only colour on the page that is not a photograph. */
  --red:#E80303;

  --m:"DM Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --gut:clamp(16px,3.4vw,44px);
  --t:12px;
  /* the banner's exact height, so the masthead knows where to stick */
  --banner:22px;
}

*{box-sizing:border-box}
html,body{background:var(--paper)}
body{
  margin:0;color:var(--ink);
  font-family:var(--m);font-weight:400;
  font-size:var(--t);line-height:1.75;letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--mute)}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.wrap{padding-inline:var(--gut)}
h1,h2,h3{margin:0;font-weight:500;font-size:var(--t);letter-spacing:.015em}

/* ---------- the banner ----------
   A red strip running the house lines past. Sticky at the very top, so it
   stays with you rather than scrolling away, and the masthead sticks
   underneath it.

   Two identical runs sat side by side, the pair translated by exactly half
   its own width. When the animation restarts, the second run is already
   where the first one began, so the loop has no seam and no jump. */
.banner{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;
  height:var(--banner);overflow:hidden;
  background:var(--red);color:var(--paper);
}
.banner .run{display:flex;width:max-content;animation:roll 52s linear infinite}
.banner span{
  padding-inline:16px;white-space:nowrap;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.banner .run{animation:none}}

/* ---------- masthead ---------- */
.mast{
  position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--banner));z-index:40;
  background:var(--paper);
  padding-block:11px 10px;
}
.mast-grid{display:grid;gap:14px 20px;grid-template-columns:1fr}
@media(min-width:760px){.mast-grid{grid-template-columns:repeat(4,1fr);gap:0 20px}}
.col p,.col ul{margin:0}
.col ul{list-style:none;padding:0}
/* The masthead carries the full lockup, not just the arch. It goes white
   on the red and dark tones and back to red on the paper ones, handled by
   the filter further down. wordmark.webp is 1500x907. */
.brand{line-height:0;margin:0}
.brand a{display:block;width:clamp(112px,11vw,152px);border:0}
.brand img{display:block;width:100%;height:auto}
.lede{color:var(--ink);max-width:26ch}
.colhead{color:var(--faint);margin-bottom:2px}
/* Nav links carry the brand red so the clickable things read as clickable.
   The page you are already on stays ink: it is where you are, not somewhere to go. */
.col li a{display:inline-block;color:var(--red)}
.col li a:hover{color:var(--ink)}
.col li a.sel,.col li a.sel:hover{color:var(--ink)}
.sel::before{content:"[ "}
.sel::after{content:" ]"}

.glyph{width:30px;margin:14px 0 0;opacity:.9}

/* ---------- photography ---------- */
figure{margin:0}
.plate{position:relative;overflow:hidden;background:var(--rule);max-width:100%}
.plate img{width:100%;height:100%;object-fit:cover}
.cap{
  display:flex;gap:12px;padding-top:9px;
  color:var(--faint);font-size:10px;letter-spacing:.07em;line-height:1.6;
}
.cap b{font-weight:400;color:var(--mute)}

/* ---------- asymmetric field ---------- */
.field{padding-block:clamp(18px,2.6vw,38px)}
.row{display:grid;gap:clamp(9px,1.1vw,15px);align-items:end}
@media(min-width:900px){
  .r-a{grid-template-columns:5fr 3fr 4fr}
  .r-b{grid-template-columns:3fr 6fr 3fr}
  .r-c{grid-template-columns:4fr 4fr 4fr}
  .r-d{grid-template-columns:6fr 6fr}
}
.void{display:none}

/* A monospace has no business at display size: every character occupies the
   same width, so scaling it up opens canyons between the letters. This sits
   just above the body copy and no further. Boldness on this site has to come
   from somewhere other than making the mono bigger. */
.state{
  max-width:46ch;margin:clamp(14px,2vw,26px) 0 0;
  font-size:15px;line-height:1.75;
}
.state + .state{margin-top:clamp(10px,1.4vw,18px)}
.state em{font-style:italic;color:var(--mute)}

.signature{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding-block:clamp(26px,4vw,56px);
}
.signature img{width:min(76vw,360px)}

/* ---------- index tables ---------- */
.idx{border-top:1px solid var(--rule);margin-top:clamp(16px,2.2vw,28px)}
.idx-head{
  display:flex;justify-content:space-between;gap:16px;
  padding-block:10px;color:var(--faint);border-bottom:1px solid var(--rule);
}
.line{
  display:grid;gap:2px 20px;padding-block:9px;border-bottom:1px solid var(--rule);
  grid-template-columns:1fr;
}
@media(min-width:780px){.line{grid-template-columns:72px 200px 1fr 130px;align-items:baseline}}
.line .n{color:var(--faint);font-variant-numeric:tabular-nums}
.line .t{color:var(--ink);font-weight:500}
.line .d{color:var(--mute)}
.line .v{color:var(--ink);text-align:left}
@media(min-width:780px){.line .v{text-align:right}}
.line:hover{background:var(--wash)}

/* diary: same skeleton, different column rhythm */
@media(min-width:780px){
  .diary .line{grid-template-columns:120px 1fr 200px 110px}
}
.diary .when{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.diary .where{color:var(--mute)}
.diary .tag{color:var(--faint);text-align:left}
@media(min-width:780px){.diary .tag{text-align:right}}
.diary .empty{padding-block:20px;color:var(--mute);border-bottom:1px solid var(--rule)}

/* ---------- enquiry ---------- */
.enq{padding-block:clamp(20px,3vw,44px)}
.enq-grid{display:grid;gap:clamp(16px,2.4vw,34px)}
@media(min-width:900px){.enq-grid{grid-template-columns:4fr 6fr}}
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.f label{color:var(--faint)}
.f input,.f select,.f textarea{
  font-family:var(--m);font-size:12px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);padding:9px 0;width:100%;border-radius:0;
}
.f textarea{min-height:76px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--ink)}
.duo{display:grid;gap:14px}
@media(min-width:560px){.duo{grid-template-columns:1fr 1fr}}
.send{
  font-family:var(--m);font-size:var(--t);letter-spacing:.06em;color:var(--paper);
  background:var(--ink);border:1px solid var(--ink);padding:12px 22px;cursor:pointer;margin-top:8px;
}
.send:hover{background:var(--paper);color:var(--ink)}
.send[disabled]{opacity:.45;cursor:default}
.small{color:var(--faint);margin:12px 0 0;max-width:46ch}
.ok{border:1px solid var(--ink);padding:18px}
.ok b{display:block;margin-bottom:6px;font-weight:500}
.ok p{margin:0;color:var(--mute)}
.meta{display:grid;gap:9px;margin-top:26px}
.meta div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--rule);padding-bottom:7px}
.meta span:first-child{color:var(--faint)}

footer{padding-block:20px 26px;border-top:1px solid var(--rule)}
.foot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;color:var(--faint)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- Scroll tones -------------------------------------------------
   The page moves through the brand palette as you scroll. scroll-tone.js
   sets data-tone on <html>; everything that already reads these variables
   follows on its own. No JS and the page stays paper.
   The reduced-motion block above kills the fade, not the colour. */
html,body{transition:background-color .55s ease,color .55s ease}
.mast,.banner,.plate{transition:background-color .55s ease,color .55s ease}

html[data-tone="wash"]{--paper:#F5F3EF}

html[data-tone="sand"]{--paper:#F2EBDF;--rule:#DFD5C4}

html[data-tone="red"]{
  --paper:#E80303;--ink:#121110;
  --rule:#B81414;--mute:#5A1010;--faint:#8A2222;--wash:#D40202;
}
/* The ticker is red, so it steps aside when the page takes the red. */
html[data-tone="red"] .banner{background:#121110;color:#FBFAF8}

html[data-tone="ink"]{
  --paper:#121110;--ink:#FBFAF8;
  --rule:#302E2A;--mute:#8C8880;--faint:#5E5A53;--wash:#1B1A18;
}

/* Nav links are set to the brand red, so they vanish on the red page and
   go muddy on the dark one. Both tones need their own link colour. */
html[data-tone="red"] .col li a{color:var(--ink)}
html[data-tone="ink"] .col li a{color:#FF6F68}

/* The wordmark and the agave are red artwork, so they disappear on the red
   page and go muddy on the dark one. Knock them back to paper on both. */
html[data-tone="red"] .brand img,
html[data-tone="red"] .glyph,
html[data-tone="ink"] .brand img,
html[data-tone="ink"] .glyph{filter:brightness(0) invert(1)}

/* ---- Collapsing masthead ------------------------------------------
   Stacked on a phone the masthead runs to 446px of an 812px screen, and
   it is sticky, so it follows you the whole way down. Once you are past
   the first screen it drops to the wordmark and a Menu toggle.

   Only below 760px, where the grid is stacked. Above that the four
   columns sit side by side and the bar is short enough already. */
.mast-toggle{
  display:none;
  padding:0;border:0;background:none;
  font:inherit;font-size:var(--t);letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);cursor:pointer;
}
html[data-tone="red"] .mast-toggle,
html[data-tone="ink"] .mast-toggle{color:var(--ink)}

@media(max-width:759px){
  /* Collapsed with max-height rather than display, so it can be eased.
     display:none cannot be transitioned, which is what made it snap.
     The row gap has to come in too or the collapsed rows leave their
     spacing behind and the bar never fully closes. */
  .lede-col,.nav{
    overflow:hidden;max-height:200px;opacity:1;
    transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .3s ease;
  }
  .mast-grid{transition:row-gap .5s cubic-bezier(.4,0,.2,1)}
  .brand a{transition:width .5s cubic-bezier(.4,0,.2,1)}
  .mast-toggle{
    display:block;overflow:hidden;
    max-height:0;opacity:0;margin-top:0;
    transition:max-height .5s cubic-bezier(.4,0,.2,1),
               opacity .3s ease,margin-top .5s cubic-bezier(.4,0,.2,1);
  }

  html[data-mast="min"] .lede-col,
  html[data-mast="min"] .nav{max-height:0;opacity:0}
  html[data-mast="min"] .mast-grid{row-gap:0}
  /* the wordmark earns less room once you are reading */
  html[data-mast="min"] .brand a{width:96px}
  html[data-mast="min"] .mast-toggle{max-height:40px;opacity:1;margin-top:8px}

  html[data-mast="min"][data-menu="open"] .nav{max-height:200px;opacity:1}
  html[data-mast="min"][data-menu="open"] .mast-grid{row-gap:14px}
}