/*
Theme Name: Habanero Mexican Grill
Theme URI: https://www.google.com/maps/place/Habanero+Mexican+Grill/
Author: Mason Wolford
Description: A one page block theme built for Habanero Mexican Grill of High Point, North Carolina. The layout is locked so the text, the hours, the menu and the photos can all be edited without the design coming apart.
Version: 1.5
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: habanero-mexican-grill
Tags: one-column, block-patterns, custom-colors, editor-style, full-site-editing
*/

/* Bump Version on every upload. The theme watches it and rebuilds the page
   when it changes, so an unchanged number means your edits never appear. */

/* ==========================================================================
   HABANERO MEXICAN GRILL, 2108 N Centennial St, High Point NC

   Every colour here was sampled off something they already own: the gold and
   the flag stripe off their menu cover, the olive off the dining room wall,
   the brick red off the front of the building. The papel picado band is the
   motif from their own flyers.
   ========================================================================== */

@font-face{font-family:"Alfa Slab One";font-style:normal;font-weight:400;
  src:url(assets/fonts/alfaslabone-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 800;
  src:url(assets/fonts/karla-latin.woff2) format("woff2");font-display:swap}

:root{
  --wood:#2A1D19;         /* the menu cover ground */
  --wood-deep:#1C1310;
  --cream:#FBF3E3;
  --cream-deep:#F4E8CE;
  --gold:#F0C73B;         /* their lettering */
  --gold-deep:#D9A81C;
  --red:#CD342F;          /* the flag stripe, and the brick out front */
  --red-text:#B32722;     /* the same red darkened until small text passes */
  --green:#3AA057;        /* the flag stripe */
  --olive:#A69826;        /* the dining room wall */
  --ink:#241A17;
  --muted:#6E5B4F;
  --muted-light:#C9B49E;
  --line:#E2D2B4;

  --s1:8px; --s2:16px; --s3:26px; --s4:42px; --s5:68px; --s6:104px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif;
  font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; line-height:1.05; text-wrap:balance}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit}

.wrap{max-width:1120px; margin:0 auto; padding:0 var(--s3)}
/* The header is sticky, so anchor targets have to stop clear of it. */
section[id], [id]{scroll-margin-top:78px}

.display{font-family:"Alfa Slab One",Georgia,serif; font-weight:400;
  letter-spacing:-.005em; text-transform:uppercase}
.label{font-weight:800; font-size:13px; letter-spacing:.17em;
  text-transform:uppercase}

/* ---------- the flag stripe, used as a divider ---------- */
.stripe{height:7px; display:flex}
.stripe i{flex:1}
.stripe i:nth-child(1){background:var(--green)}
.stripe i:nth-child(2){background:#FFFFFF}
.stripe i:nth-child(3){background:var(--red)}

/* ---------- papel picado, the motif off their own flyers ---------- */
.picado{height:30px; background:
  repeating-linear-gradient(90deg,
    var(--red) 0 44px, var(--gold) 44px 88px,
    var(--green) 88px 132px, #E86A2B 132px 176px);
  -webkit-mask:
    radial-gradient(circle 11px at 22px 100%, transparent 10.5px, #000 11px)
      repeat-x 0 0 / 44px 30px;
  mask:
    radial-gradient(circle 11px at 22px 100%, transparent 10.5px, #000 11px)
      repeat-x 0 0 / 44px 30px;
}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:40; background:var(--wood);
  box-shadow:0 1px 0 rgba(0,0,0,.35)}
.top .wrap{display:flex; align-items:center; gap:var(--s3);
  padding-top:15px; padding-bottom:15px}
.mark{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  color:var(--gold); font-size:20px; line-height:1; letter-spacing:.01em;
  text-decoration:none; flex:none}
.mark span{display:block; font-family:Karla,sans-serif; font-weight:700;
  font-size:9.5px; letter-spacing:.34em; color:var(--cream); margin-top:4px}
.nav{margin-left:auto; display:flex; gap:22px; flex:none}
/* These were 28px tall, under the 32px a thumb needs. */
.nav a{color:var(--muted-light); text-decoration:none; font-weight:600;
  font-size:15px; border-bottom:2px solid transparent; padding-bottom:2px;
  display:inline-flex; align-items:center; min-height:34px}
.nav a:hover{color:var(--gold); border-bottom-color:var(--gold)}
.tel{color:var(--gold); text-decoration:none; font-weight:800; font-size:16px;
  white-space:nowrap; flex:none; padding:10px 0}
@media (max-width:940px){ .nav{display:none} .top .wrap{gap:var(--s2)} }

/* ---------- hero ---------- */
.hero{background:var(--wood); color:var(--cream); position:relative}
.hero-in{max-width:1120px; margin:0 auto; padding:var(--s6) var(--s3);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.79fr);
  gap:var(--s3); align-items:center}
.hero .label{color:var(--gold)}
/* Their menu cover sets HABANERO in solid colour with a hard extrude behind
   it. This is that. The extrude has to be a colour you can SEE against the
   wood, so it is their own red, not a darker brown: a dark extrude on a dark
   ground is just a blur. Offsets in em so the depth scales with the type
   instead of turning into a smear on a phone. */
.hero h1{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(44px,6.4vw,78px); line-height:1.02; color:var(--cream);
  margin-top:var(--s2); letter-spacing:.012em;
  text-shadow:
    .005em .011em 0 #B32722, .010em .022em 0 #B32722,
    .015em .033em 0 #A6241F, .020em .044em 0 #A6241F,
    .025em .055em 0 #97211C, .030em .066em 0 #97211C,
    .035em .077em 0 #871D19, .040em .088em 0 #871D19,
    .045em .099em 0 #6E1815, .050em .110em 0 #6E1815,
    .06em .15em .16em rgba(0,0,0,.7)}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero-shot{position:relative}
.hero-shot img{border-radius:3px; box-shadow:0 30px 60px -30px rgba(0,0,0,.85);
  border:7px solid var(--cream)}
.badge{position:absolute; right:-14px; bottom:-20px; background:var(--gold);
  color:var(--wood); border-radius:50%; width:118px; height:118px; rotate:-8deg;
  display:grid; place-content:center; text-align:center; line-height:1.1;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}
.badge b{display:block; font-family:"Alfa Slab One",Georgia,serif; font-size:27px}
.badge span{font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase}

.do{display:flex; flex-wrap:wrap; gap:11px; margin-top:var(--s4)}
.also{margin-top:16px; font-size:16px; color:#C7B29A}
.also a{color:var(--gold); font-weight:700; text-decoration:none;
  display:inline-block; padding:4px 0;
  border-bottom:1px solid rgba(240,199,59,.4)}
.also a:hover{border-bottom-color:var(--gold)}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:800; font-size:15px; padding:14px 24px; border-radius:999px;
  border:2px solid transparent; letter-spacing:.01em; transition:.15s}
.btn.solid{background:var(--gold); color:var(--wood)}
.btn.solid:hover{background:var(--cream)}
.btn.ghost{border-color:#6B564A; color:var(--cream)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn.red{background:var(--red); color:#FFFFFF}
.btn.red:hover{background:#A82722}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:var(--s4); padding:var(--s5) var(--s3)}
  .hero h1{line-height:1.12}
  .hero-shot{order:-1}
  .badge{width:92px; height:92px; right:6px; bottom:-16px}
  .badge b{font-size:21px}
}

/* ---------- sections ---------- */
section{padding:var(--s6) 0}
.hero{padding:0}
.sec-head{max-width:44rem}
.sec-head .label{color:var(--red-text)}
.sec-head h2{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(30px,4vw,44px); margin-top:var(--s2)}
.sec-head p{margin-top:var(--s2); color:var(--muted); font-size:19px}

/* ---------- the dish grid ---------- */
.grid{margin-top:var(--s5); display:grid;
  grid-template-columns:repeat(4,1fr); gap:var(--s3)}
.dish{text-decoration:none}
.dish img{aspect-ratio:1; object-fit:cover; border-radius:3px;
  border:6px solid #FFFFFF; box-shadow:0 12px 26px -18px rgba(36,26,23,.6)}
.dish b{display:block; margin-top:14px; font-size:17px; font-weight:800}
.dish span{display:block; color:var(--muted); font-size:15.5px; line-height:1.45}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr); gap:var(--s2)} }
@media (max-width:520px){ .dish b{font-size:15.5px} .dish span{font-size:14px} }

/* ---------- the signature dish ---------- */
.feature{background:var(--olive); color:var(--ink)}
.feature .wrap{display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s5); align-items:center}
.feature .label{color:var(--wood)}
.feature h2{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,48px); margin-top:var(--s2)}
.feature p{margin-top:var(--s3); font-size:19px; color:var(--ink)}
.feature .quote{margin-top:var(--s3); padding-left:18px;
  border-left:4px solid var(--wood); font-size:17px; color:#332B10}
.feature img{border-radius:3px; border:8px solid #FFFFFF;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.6)}
@media (max-width:900px){ .feature .wrap{grid-template-columns:1fr; gap:var(--s4)} }

/* ---------- the menu ---------- */
.menu{background:var(--cream-deep)}
.cats{margin-top:var(--s5); display:grid;
  grid-template-columns:repeat(3,1fr); gap:var(--s4) var(--s5)}
.cat h3{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:19px; color:var(--red-text); border-bottom:3px solid var(--gold);
  padding-bottom:9px}
.cat ul{list-style:none; margin:14px 0 0; padding:0}
.cat li{padding:7px 0; border-bottom:1px dotted var(--line); font-size:16.5px}
.cat li:last-child{border-bottom:0}
.cat li em{display:block; font-style:normal; color:var(--muted); font-size:14.5px;
  line-height:1.45; margin-top:2px}
@media (max-width:900px){ .cats{grid-template-columns:1fr 1fr; gap:var(--s3)} }
@media (max-width:600px){ .cats{grid-template-columns:1fr} }
.note{margin-top:var(--s4); color:var(--muted); font-size:16px}

/* ---------- order ---------- */
.order{background:var(--wood); color:var(--cream); text-align:center}
.order h2{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(28px,4vw,42px); color:var(--gold)}
.order p{margin-top:var(--s2); color:#DCC9B2; font-size:19px}
.order .do{justify-content:center; margin-top:var(--s4)}


/* ---------- visit ---------- */
.visit{background:var(--cream-deep)}
.visit .wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5)}
.addr{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(26px,3.4vw,38px); margin-top:var(--s2)}
.addr-sub{margin-top:var(--s2); font-size:19px; color:var(--muted)}
.addr-sub a{color:var(--red-text); font-weight:800; text-decoration:none}
.hours{width:100%; border-collapse:collapse; margin-top:var(--s2)}
.hours td{padding:13px 0; border-bottom:1px dotted var(--line); font-size:18px}
.hours td:last-child{text-align:right; font-weight:800;
  font-variant-numeric:tabular-nums}
.hours tr:last-child td{border-bottom:0}
.tip{margin-top:var(--s3); font-size:16.5px; color:var(--muted)}
.tip a{color:var(--red-text); font-weight:700; text-decoration:none;
  display:inline-block; padding:3px 0;
  border-bottom:1px solid rgba(179,39,34,.4)}
.tip a:hover{border-bottom-color:var(--red-text)}
.special{margin-top:var(--s3); background:var(--wood); color:var(--cream);
  padding:16px 20px; border-radius:3px; font-size:17px}
.special b{color:var(--gold); font-family:"Alfa Slab One",Georgia,serif;
  font-weight:400; text-transform:uppercase; margin-right:8px; letter-spacing:.02em}
.services{display:flex; flex-wrap:wrap; gap:9px; margin-top:var(--s3)}
.chip{background:#2F7F45; color:#FFFFFF; font-weight:800; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; padding:8px 15px;
  border-radius:999px}
.chip.gold{background:var(--gold); color:var(--wood)}
.chip.red{background:var(--red-text)}
@media (max-width:900px){ .visit .wrap{grid-template-columns:1fr; gap:var(--s4)} }

/* ---------- footer ---------- */
footer{background:var(--wood-deep); color:#BFA890; padding:var(--s5) 0}
footer .wrap{display:grid; grid-template-columns:1.2fr 1fr 1fr;
  gap:var(--s4); font-size:16px}
.f-mark{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  color:var(--gold); font-size:22px; line-height:1}
.f-mark span{display:block; font-family:Karla,sans-serif; font-weight:700;
  font-size:9.5px; letter-spacing:.32em; color:var(--cream); margin-top:5px}
footer a{color:var(--gold); text-decoration:none; font-weight:700;
  display:inline-block; padding:4px 0}
footer p{margin-top:10px}
@media (max-width:760px){ footer .wrap{grid-template-columns:1fr; gap:var(--s3)} }

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

/* ==========================================================================
   WORDPRESS BLOCK WRAPPERS

   Everything above is the design. Everything below exists only to stop
   WordPress's own markup from fighting it. Every rule here is a bug that
   already happened once on a previous build.
   ========================================================================== */

.wp-site-blocks,
.wp-site-blocks > *,
.entry-content,
.entry-content > *{margin-block:0; max-width:none}

.wp-block-image{margin:0}
.wp-block-image figcaption{margin:0}

/* Core lists arrive with bullets and padding. The menu columns are list
   blocks so the owner can add and remove dishes in the normal editor. */
.cat ul,.cat ol{list-style:none; margin:14px 0 0; padding:0}
.cat li em{display:block; font-style:normal; color:var(--muted);
  font-size:14.5px; line-height:1.45; margin-top:2px}

/* Core wraps every table in a <figure>, which then inherits whatever the
   design gave figures and nothing else wants. */
.wp-block-table{margin:0; padding:0; position:static; overflow-x:visible}
.wp-block-table table{width:100%; border-collapse:collapse}
.wp-block-table td,.wp-block-table th{border:0}
.hours td,.wp-block-table.hours td{padding:13px 0;
  border-bottom:1px dotted var(--line); font-size:18px}
.wp-block-table.hours td:last-child{text-align:right; font-weight:800;
  font-variant-numeric:tabular-nums}
.wp-block-table.hours tr:last-child td{border-bottom:0}

/* Core adds 24px of margin-block-start between sibling blocks. Inside a grid
   it lands within the cells and knocks the columns out of line with each
   other. Zero it, then put back only the gaps the design asked for. The
   re-assertions must come AFTER the reset: same specificity, later wins.

   Do NOT write a blanket .wp-block-group{margin:0}. It flattens every
   margin-top in the design at once and the page looks subtly wrong
   everywhere with nothing obviously broken. */
.wp-block-group > * + *{margin-block-start:0}
.wp-block-group > .do{margin-top:var(--s4)}
.wp-block-group > .grid{margin-top:var(--s5)}
.wp-block-group > .cats{margin-top:var(--s5)}
.wp-block-group > .note{margin-top:var(--s4)}
.wp-block-group > .addr{margin-top:var(--s2)}
.wp-block-group > .addr-sub{margin-top:var(--s2)}
.wp-block-group > .tip{margin-top:var(--s3)}
.wp-block-group > .special{margin-top:var(--s3)}
.wp-block-group > .quote{margin-top:var(--s3)}
.sec-head > h2{margin-top:var(--s2)}
.sec-head > p{margin-top:var(--s2)}
.cat > ul{margin-top:14px}

/* Block validation forbids width and height attributes on an image block's
   <img>, so the space every photo occupies is reserved here instead or the
   page jumps as they load. */
.hero-shot .wp-block-image img{aspect-ratio:1000 / 750}
.dish .wp-block-image img,
.grid > .wp-block-image img{aspect-ratio:1; object-fit:cover}
.feature .wp-block-image img{aspect-ratio:760 / 760}
.storefront-shot img{aspect-ratio:1000 / 700; object-fit:cover}
.menu-shot img{aspect-ratio:760 / 1000; object-fit:cover}

/* Photos inside a grid are figures now, not bare images. */
.grid > .wp-block-image{margin:0; min-width:0}
.dish > .wp-block-image{margin:0}

/* Editor only. Keeps the admin preview close to the real thing. */
.editor-styles-wrapper{background:var(--cream)}

/* The dish tiles are blocks now, so the name and the note are paragraphs
   rather than <b> and <span>. */
.dish .dish-name{display:block; margin-top:14px; font-size:17px; font-weight:800}
.dish .dish-note{display:block; color:var(--muted); font-size:15.5px; line-height:1.45}
.dish > * + *{margin-block-start:0}
@media (max-width:520px){
  .dish .dish-name{font-size:15.5px}
  .dish .dish-note{font-size:14px}
}

/* The special is a paragraph block. */
.special strong{color:var(--gold); font-family:"Alfa Slab One",Georgia,serif;
  font-weight:400; text-transform:uppercase; margin-right:8px; letter-spacing:.02em}

/* The three copy columns are plain groups, so the block spacing reset above
   takes their gaps with it. Put them back by name. */
.copy > .wp-block-heading{margin-top:var(--s2)}
.copy > p{margin-top:var(--s3)}
.copy > .label{margin-top:0}
.copy > .addr-sub{margin-top:var(--s2)}
.copy > .wp-block-table{margin-top:var(--s2)}
.copy > .do{margin-top:var(--s4)}
.copy > .wp-block-image{margin-top:var(--s4)}

.lede{font-size:19px; color:var(--muted)}

/* .also sits inside the hero's raw html block, so it is a direct child of the
   copy group and .copy > p would otherwise give it the wrong gap. */
.copy > .also{margin-top:16px}

/* The eyebrows in the visit columns are plain label paragraphs, so they
   take their colour here rather than from an inline style. */
/* Scoped to these two sections: the hero eyebrow is gold, and an
   unscoped rule here lands after it in the cascade and wins. */
/* Matches whether the eyebrow sits in a .copy group (WordPress) or a
   plain div (the static build), so both render the same. */
.visit .label{color:var(--red-text)}
.addr-sub a{display:inline-block; padding:4px 0}

/* A visible keyboard focus ring. The browser default disappears against the
   dark ground in the header and the footer. */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:2px}
.hero a:focus-visible, footer a:focus-visible, .top a:focus-visible{
  outline-color:#FFFFFF}

/* ===== generated by sync-theme-css.py, do not edit below ===== */
/* Lifted out of index.html and menu.html. Work the design out
   there, then re-run sync-theme-css.py. */

/* ---------- the specials board and the student deal ---------- */
/* The deal panel is drawn from their own HPU flyer, not invented: an ivory
   card, a black pill with a gold block behind it and a star either side, the
   number set heavy with a red offset, and a gold rule under it. Every one of
   those is on the flyer in harvest/img. That is also why the pill stays: it
   is their shape, not a default.

   The specials sit straight on the band with no box around them. Two panels
   of equal weight side by side is what made this read as a template; one
   thing printed on the page and one flyer taped to it does not. */
.board{background:var(--cream-deep); padding:var(--s5) 0 var(--s4)}
/* Specials across the top, then the promotions side by side under it. Two
   flyers cannot share a narrow right hand column without both being too small
   to read, and the specials copy cannot survive a third column either. */
/* start, not stretch. Once the beer card carried the cans it was much the
   taller of the two, and stretching the student card to match left it as a
   large empty sheet of ivory. Two flyers pinned up are not the same height. */
.board-in{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);
  align-items:start}
.today{grid-column:1 / -1; margin-bottom:var(--s2)}

/* the green banner off the top of their flyer */
.today .label{display:inline-block; margin:0; background:#1E4D2B; color:#FFFFFF;
  padding:8px 15px; font-size:11.5px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase}
.today-h{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(26px,3.4vw,42px); line-height:1.02; margin:var(--s2) 0 var(--s2);
  color:var(--ink)}
.today-p{margin:0; color:var(--muted); max-width:40em; font-size:18px}
.today-when{margin:var(--s3) 0 0; font-size:12px; letter-spacing:.16em;
  /* #A8907A on the cream ground is 2.49:1, which is not readable text. */
  text-transform:uppercase; font-weight:800; color:#7A6450;
  border-top:2px solid var(--line); padding-top:12px; display:inline-block}

.deal{background:var(--cream); color:var(--ink); border:3px solid var(--ink);
  padding:var(--s4) var(--s3); text-align:center; rotate:-1.4deg;
  box-shadow:11px 13px 0 rgba(36,26,23,.13)}
.deal-k{display:inline-flex; align-items:center; gap:11px; margin:0;
  background:var(--ink); color:var(--cream); border-radius:999px;
  padding:9px 21px; font-size:12.5px; font-weight:800; letter-spacing:.17em;
  text-transform:uppercase; box-shadow:5px 5px 0 var(--gold)}
.deal-k i{color:var(--gold); font-style:normal; font-size:12px}
.deal-n{display:flex; align-items:flex-start; justify-content:center; gap:3px;
  font-family:"Alfa Slab One",Georgia,serif; color:var(--ink);
  font-size:clamp(66px,8.8vw,108px); line-height:.88; letter-spacing:-.015em;
  margin:var(--s4) 0 0; text-shadow:-.035em .042em 0 var(--red)}
.deal-x{display:flex; flex-direction:column; align-items:flex-start;
  line-height:1; padding-top:.05em; margin-left:.04em}
/* The offset has to be restated at each size. text-shadow inherits as a
   computed length, so the parent's 3px offset lands on 24px type as a slab
   the same weight as the stroke and the word turns to mud. */
.deal-pc{font-size:.44em; text-shadow:-.035em .042em 0 var(--red)}
.deal-off{font-size:.25em; letter-spacing:.09em; margin-top:.34em;
  text-shadow:-.04em .05em 0 var(--red)}
.deal-t{margin:var(--s3) 0 0; padding-top:var(--s2); font-size:14.5px;
  font-weight:700; line-height:1.55; color:var(--muted);
  border-top:4px solid var(--gold)}

/* The draft beer promotion, off their own flyer: black ground, gold display
   type, the price reversed out of a red block, the pour size in a green
   ring, and each beer named over a rule in roughly its own colour. Tilted
   the other way from the student card so the pair reads as two things pinned
   up rather than one component rendered twice. No brand logos: the flyer
   names them in plain type at the bottom and so does this. */
.beer{background:#140D0B; color:var(--cream); border:3px solid var(--ink);
  padding:var(--s3); text-align:center; rotate:1.2deg;
  box-shadow:-11px 13px 0 rgba(36,26,23,.13);
  display:flex; flex-direction:column}
.beer-k{margin:0; font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:800; color:#C7B29A}
.beer-h{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  color:var(--gold); font-size:clamp(30px,3.9vw,47px); line-height:.94;
  margin:8px 0 0; letter-spacing:.005em;
  text-shadow:-.028em .036em 0 #8A2018}
.beer-n{display:flex; align-items:center; justify-content:center; gap:13px;
  flex-wrap:wrap; margin:var(--s2) 0 0}
.beer-p{background:var(--red); color:#FFFFFF; font-family:"Alfa Slab One",Georgia,serif;
  font-size:clamp(30px,3.4vw,44px); line-height:1.06; padding:7px 17px 9px}
.beer-oz{border:2px solid #3F9C5C; color:#8FD3A2; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 14px; line-height:1}
/* The four cans, cut out of their own flyer. The edges are feathered into
   this card's background in the file itself, so it reads as part of the panel
   rather than a photograph pasted onto it. */
.beer-shot{display:block; width:84%; height:auto; margin:var(--s2) auto 0}
.beer-l{list-style:none; margin:var(--s2) 0 0; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:9px; text-align:center}
.beer-l li{font-weight:800; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.25; text-wrap:balance;
  color:#D6C4AE}
.beer-t{margin:auto 0 0; padding-top:var(--s2); font-size:13.5px;
  font-weight:700; color:#C7B29A; border-top:4px solid var(--gold);
  margin-top:var(--s3)}
@media (prefers-reduced-motion:reduce){ .deal,.beer{rotate:none} }

/* ---------- catering ---------- */
.catering{background:var(--cream-deep); padding:var(--s5) 0;
  border-top:1px solid var(--line)}
.cater-in{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s5);
  align-items:center}
.cater-p{margin:var(--s2) 0 var(--s3); font-size:18px; color:var(--muted);
  max-width:34em}
/* The ghost button is drawn for the dark hero, so on the cream catering
   panel it was cream text on cream. Same button, ground-appropriate ink. */
.catering .btn.ghost{border-color:#C9B292; color:var(--ink)}
.catering .btn.ghost:hover{border-color:var(--red); color:var(--red-text)}
.cater-fine{margin:var(--s2) 0 0; font-size:14.5px; color:var(--muted)}
.cater-shot{margin:0}
.cater-shot{rotate:1.4deg}
.cater-shot img{display:block; width:100%; height:auto; aspect-ratio:3/2;
  object-fit:cover; border:7px solid #FFFFFF;
  box-shadow:11px 13px 0 rgba(36,26,23,.16)}
.catering h2{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(28px,4vw,46px); line-height:1.02; margin:var(--s1) 0 0}

@media (max-width:860px){
  .board-in{grid-template-columns:1fr; gap:var(--s4)}
  /* upright on a phone: rotated, a full width card pushes past the viewport */
  .deal{rotate:none; box-shadow:7px 8px 0 rgba(36,26,23,.13)}
  .beer{rotate:none; box-shadow:-7px 8px 0 rgba(36,26,23,.13)}
  /* full width cans on a phone: at 84% they were thumbnails, and the labels
     under them need the extra room too or every one wraps to three lines */
  .beer-shot{width:100%}
  .beer-l{gap:7px}
  .beer-l li{font-size:10px; letter-spacing:.02em}
  .board-in{grid-template-columns:1fr}
  .today{margin-bottom:0}
  .cater-in{grid-template-columns:1fr; gap:var(--s3)}
}
/* ---------- category tiles, the same ones as the menu page ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  gap:var(--s2)}
.tile{position:relative; display:block; aspect-ratio:3/2; overflow:hidden;
  background:var(--wood); text-decoration:none; border:1px solid var(--line);
  box-shadow:8px 10px 0 rgba(36,26,23,.13)}
.tile:nth-child(6n+1){rotate:-1deg}
.tile:nth-child(6n+2){rotate:.7deg; margin-top:13px}
.tile:nth-child(6n+3){rotate:-.5deg; margin-top:4px}
.tile:nth-child(6n+4){rotate:.9deg}
.tile:nth-child(6n+5){rotate:-.8deg; margin-top:11px}
.tile:nth-child(6n+6){rotate:1.1deg; margin-top:3px}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .45s ease}
.tile::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,13,11,.88) 0%,
    rgba(20,13,11,.5) 40%, rgba(20,13,11,.08) 75%)}
.tile-t{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 18px 15px; font-family:"Alfa Slab One",Georgia,serif;
  text-transform:uppercase; font-size:clamp(19px,2vw,25px); line-height:1.05;
  color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,.55)}
.tile:hover img{transform:scale(1.045)}
.tile:hover .tile-t{color:var(--gold)}
.tile:focus-visible{outline:3px solid var(--gold-deep); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .tile img{transition:none}
  .tile:hover img{transform:none} }

.back{color:var(--muted-light); text-decoration:none; font-weight:700;
  font-size:15px}
.back:hover{color:var(--gold)}

/* ---------- intro ---------- */
.intro{background:var(--wood); color:var(--cream); padding:var(--s4) 0}
/* Same extruded headline as the front page. The extrude has to be a colour you can SEE against the
   wood, so it is their own red, not a darker brown: a dark extrude on a dark
   ground is just a blur. Offsets in em so the depth scales with the type
   instead of turning into a smear on a phone. */
.intro h1{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(42px,7vw,80px); line-height:.92; color:var(--cream);
  margin:0; letter-spacing:.012em;
  text-shadow:
    .005em .011em 0 #B32722, .010em .022em 0 #B32722,
    .015em .033em 0 #A6241F, .020em .044em 0 #A6241F,
    .025em .055em 0 #97211C, .030em .066em 0 #97211C,
    .035em .077em 0 #871D19, .040em .088em 0 #871D19,
    .045em .099em 0 #6E1815, .050em .110em 0 #6E1815,
    .06em .15em .16em rgba(0,0,0,.7)}

/* ---------- the category rail ---------- */
.railwrap{position:sticky; top:0; z-index:30; background:var(--cream-deep);
  border-bottom:1px solid var(--line)}
.rail{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  max-width:1120px; margin:0 auto; padding:7px var(--s3);
  scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 auto; text-decoration:none; color:var(--muted);
  font-weight:700; font-size:13.5px; letter-spacing:.02em;
  padding:9px 13px; border:1.5px solid transparent; white-space:nowrap;
  min-height:38px; display:inline-flex; align-items:center}
.rail a:hover{color:var(--ink); border-color:var(--line)}
.rail a[aria-current="true"]{background:var(--wood); color:var(--gold);
  border-color:var(--wood)}


/* ---------- the category grid, which is the menu ---------- */
/* Grouped by page of the printed menu. The group heading is a label, not a
   destination, so it reads as a rule across the page rather than competing
   with the section headings further down. */
.mpages{max-width:1120px; margin:0 auto; padding:var(--s4) var(--s3) 0}
.pg{display:flex; align-items:center; gap:14px; margin:var(--s4) 0 var(--s2);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif; font-weight:800;
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted)}
.pg::after{content:""; flex:1; height:2px; background:var(--line)}
.mpages > .pg:first-child{margin-top:0}
.catgrid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:var(--s2)}
/* Their flyers are pinned up crooked with a shadow under them, so the tiles
   are too. This block is the one the theme syncs, so it governs the WordPress
   front page as well as this one. */
.tile{position:relative; display:block; aspect-ratio:3/2; overflow:hidden;
  background:var(--wood); text-decoration:none; color:var(--cream);
  border:1px solid var(--line); box-shadow:8px 10px 0 rgba(36,26,23,.13)}
.tile:nth-child(6n+1){rotate:-1deg}
.tile:nth-child(6n+2){rotate:.7deg; margin-top:13px}
.tile:nth-child(6n+3){rotate:-.5deg; margin-top:4px}
.tile:nth-child(6n+4){rotate:.9deg}
.tile:nth-child(6n+5){rotate:-.8deg; margin-top:11px}
.tile:nth-child(6n+6){rotate:1.1deg; margin-top:3px}
.tile img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .45s ease}
.tile::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,13,11,.88) 0%,
    rgba(20,13,11,.55) 38%, rgba(20,13,11,.12) 72%, rgba(20,13,11,.05) 100%)}
.tile-plain::after{background:
    radial-gradient(120% 90% at 20% 10%, rgba(240,199,59,.16), transparent 60%),
    linear-gradient(to top, rgba(20,13,11,.9), rgba(20,13,11,.55))}
.tile-t{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 18px 15px; font-family:"Alfa Slab One",Georgia,serif;
  text-transform:uppercase; font-size:clamp(19px,2.1vw,25px); line-height:1.05;
  letter-spacing:.01em; color:var(--cream);
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
.tile:hover img{transform:scale(1.045)}
.tile:hover .tile-t{color:var(--gold)}
.tile:focus-visible{outline:3px solid var(--gold-deep); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .tile img{transition:none}
  .tile:hover img{transform:none} }

/* One category picked. The others are hidden by script, never by CSS alone,
   so a page with no JavaScript still shows every dish. */
.allback{display:none; font-weight:700; font-size:14px; text-decoration:none;
  margin-bottom:var(--s2)}
.allback::before{content:"\2190\00a0"}
body.picked .allback{display:inline-block}
body.picked .mpages, body.picked .railwrap{display:none}

/* ---------- sections ---------- */
main{padding-bottom:var(--s5)}
.ms{max-width:1120px; margin:0 auto; padding:var(--s5) var(--s3) 0;
  scroll-margin-top:calc(var(--rail) + 8px)}
.ms h2{font-family:"Alfa Slab One",Georgia,serif; text-transform:uppercase;
  font-size:clamp(25px,3.4vw,36px); line-height:1.05; margin:0 0 var(--s2);
  color:var(--ink)}
.ms h2::after{content:""; display:block; width:64px; height:4px;
  background:var(--gold); margin-top:12px}
.ms-note{margin:0 0 var(--s3); color:var(--muted); font-size:15.5px;
  max-width:44em}
/* Picking a category moves focus to that heading so a screen reader lands in
   the right place. That focus is programmatic, not the user tabbing, so the
   ring is noise: it drew a black box round the heading on every tap. Keyboard
   users still get a ring on everything they actually tab to. */
.ms h2[tabindex="-1"]:focus{outline:none}

.items{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));
  column-gap:var(--s5); row-gap:22px}

/* A dish is a grid, not a flex line with leader dots. Dots are a pseudo
   element on one line, so a name that wraps leaves them dangling on the
   wrong row. This keeps the price pinned to the top line of a tall item.
   Selectors are element based because the markup has to survive the
   WordPress block editor, which strips classes off inline tags. */
.items li{display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:14px; align-items:baseline; align-content:start; min-width:0;
  font-weight:700; font-size:17px; line-height:1.3}
/* align-content:start matters. Without it a short dish sitting beside a tall
   one is stretched to match, and the spare height is dealt out between the
   name and its description as a gap that looks like a mistake. */
.items li b{color:var(--muted); font-weight:700}
.items li strong{grid-column:2; grid-row:1; justify-self:end; align-self:start;
  font-size:16.5px; color:var(--red-text); font-variant-numeric:tabular-nums;
  white-space:nowrap; padding-top:1px}
.items li em{grid-column:1/-1; font-style:normal; font-weight:400;
  font-size:15px; line-height:1.45; color:var(--muted); margin-top:3px}
/* Multi price dishes. Never in the right hand column: four prices in a
   narrow cell wrap into a blob louder than the dish itself. */
.items li mark{grid-column:1/-1; background:none; color:var(--ink);
  margin-top:5px; font-size:14.5px; font-weight:700;
  font-variant-numeric:tabular-nums}

/* the glossary at the end reads as prose, not as a price list */
.gloss dl{margin:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));
  column-gap:var(--s5); row-gap:20px}
.gloss dt{font-weight:700}
.gloss dd{margin:3px 0 0; color:var(--muted); font-size:15px; line-height:1.45}


/* ---------- footer ---------- */
.foot{background:var(--wood); color:var(--muted-light); margin-top:var(--s5);
  padding:var(--s4) 0}
.foot .wrap{display:flex; flex-wrap:wrap; gap:var(--s3);
  justify-content:space-between; align-items:flex-start}
.foot a{color:var(--gold); display:inline-block; padding:7px 0; min-height:32px}
.foot p{margin:0 0 6px; font-size:15px}
.foot .legal{font-size:13.5px; color:#8C7864; margin-top:var(--s3);
  max-width:52em; line-height:1.5}

/* The builder's credit. Their footer, so it sits under a hairline in the
   quietest tone on the page and never competes with the phone number.
   p.byline, not .byline, so it outranks the footer's own p margin rule. */
p.byline{grid-column:1 / -1; width:100%; margin:26px 0 0;
  border-top:1px solid rgba(240,199,59,.16);
  padding-top:14px; font-size:13px; color:#A89076; letter-spacing:.02em}


@media (max-width:700px){
  .intro{padding:var(--s4) 0 var(--s3)}
  .ms{padding-top:var(--s4)}
  .items{column-gap:0; row-gap:20px}
  .mark span{letter-spacing:.24em}
  .back{display:none}
  /* Two across on a phone. One per row put five thousand pixels of tiles
     between the top of the page and the first dish, which is not an index,
     it is a slideshow. */
  .catgrid{grid-template-columns:1fr 1fr; gap:10px}
  .tile{aspect-ratio:4/3}
  /* 15px, not 16: Chimichangas and Combinations are the two longest labels
     and at 16 they ran a few pixels past the tile. */
  .tile-t{padding:11px 12px 10px; font-size:15px; line-height:1.06;
    text-wrap:balance}
  .mpages{padding-top:var(--s3)}
  .pg{font-size:11.5px; letter-spacing:.16em; margin:var(--s3) 0 12px}
}

.menu-go{margin-top:var(--s4)}