@import url('https://fonts.googleapis.com/css2?family=Geo&family=Open+Sans:wght@400;600;700;800&display=swap');

:root{
  --ink:#141414; --paper:#ffffff; --soft:#f6f5f2;
  --red:#d81e27; --navy:#14395f; --muted:#5d6166;
  --line:rgba(0,0,0,.10); --max:1180px;
  --display:"Geo","Arial Narrow",sans-serif;
  --sans:"Open Sans",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
a{color:inherit}
img{max-width:100%;display:block}

/* ── top bar: socials + the one promo ─────────────────────────── */
.topbar{background:var(--ink);color:#fff;font-size:13px}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:38px}
.topbar a{color:#fff;text-decoration:none;opacity:.85}
.topbar a:hover{opacity:1;color:var(--red)}
.social{display:flex;gap:14px;align-items:center;font-size:15px}
.promo{margin-left:auto;font-family:var(--display);letter-spacing:.06em;color:var(--red);font-size:15px}
.tel{font-weight:700}

/* Gift Cards: the Order Online pill, shrunk to live in a 38px bar. Same red,
   same display face, same pill - smaller padding and type, a lighter shadow.
   The two overrides are not optional: .topbar a sets opacity .85, which would
   wash the red out, and .topbar a:hover turns text red, which on a red pill
   means the label disappears on hover. */
.gift{background:var(--red);color:#fff!important;opacity:1;font-family:var(--display);
  letter-spacing:.07em;padding:5px 14px;border-radius:999px;font-size:13px;
  line-height:1.25;white-space:nowrap;box-shadow:0 3px 10px rgba(216,30,39,.30)}
.gift:hover{background:#b8161e;color:#fff!important;opacity:1}

/* ── header: logo, nav, and an Order button you cannot miss ───── */
header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:26px;min-height:86px;padding:10px 0}
.logo img{height:58px;width:auto}
nav{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
nav a{text-decoration:none;font-size:15.5px;color:var(--ink)}
nav a:hover,nav a[aria-current]{color:var(--red)}
.order{background:var(--red);color:#fff!important;font-family:var(--display);letter-spacing:.07em;
  padding:13px 24px;border-radius:999px;font-size:16px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(216,30,39,.28)}
.order:hover{background:#b8161e}

/* ── printed menu: the PDF link at the top of the menu ────────── */
.pdfrow{display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap}
.pdfrow h2{font-family:var(--display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(24px,3.4vw,38px); line-height:1.02; margin:.12em 0 .34em}
.pdfrow p{margin:0; color:var(--muted); max-width:52ch}
.pdfrow .btn{white-space:nowrap}
/* no opacity on .size: white at 75% over the red button lands near 3.3:1,
   under the 4.5:1 floor. The brackets already do the de-emphasis. */

/* ── hero ─────────────────────────────────────────────────────── */
.hero{position:relative;color:#fff;text-align:center;padding:110px 0 96px;
  background:#222 center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.52)}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-family:var(--display);font-size:clamp(34px,6vw,70px);line-height:1.02;
  letter-spacing:.01em;margin:0 0 16px;text-transform:uppercase}
.hero p{font-size:clamp(16px,2vw,20px);max-width:62ch;margin:0 auto 28px}
.kicker{font-family:var(--display);color:var(--red);letter-spacing:.16em;font-size:15px;margin:0 0 14px}

/* ── buttons ──────────────────────────────────────────────────── */
.btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-family:var(--display);
  letter-spacing:.07em;padding:15px 30px;border-radius:999px;font-size:17px}
.btn:hover{background:#b8161e}
.btn.navy{background:var(--navy)} .btn.navy:hover{background:#0e2b48}
.btn.ghost{background:transparent;border:2px solid #fff;color:#fff}

/* ── section furniture ────────────────────────────────────────── */
section{padding:72px 0}
section.alt{background:var(--soft)}
.sect-head{text-align:center;margin:0 0 44px}
h2{font-family:var(--display);font-size:clamp(26px,4vw,44px);letter-spacing:.02em;margin:0 0 10px;text-transform:uppercase}
h2 .kanji{color:var(--red);margin-right:10px;font-family:var(--sans);font-weight:700;font-size:.62em;vertical-align:.18em}
.sect-head p{color:var(--muted);margin:0 auto;max-width:60ch}
h3{font-family:var(--display);font-size:21px;letter-spacing:.03em;margin:0 0 6px;text-transform:uppercase}

/* ── the category grid: round plates that move on hover ───────── */
.cats{display:grid;gap:44px 28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cat{text-align:center;text-decoration:none;display:block}
.cat .shot{width:224px;height:224px;margin:0 auto 20px;border-radius:50%;overflow:hidden;background:var(--soft);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.cat .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cat:hover .shot{transform:translateY(-10px);box-shadow:0 22px 40px rgba(0,0,0,.16)}
.cat:hover .shot img{transform:scale(1.09)}
.cat h3{transition:color .2s}
.cat:hover h3{color:var(--red)}
.cat p{color:var(--muted);font-size:14.5px;margin:0;padding:0 10px}

/* ── menu rows with a thumbnail ───────────────────────────────── */
.item{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .thumb{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:0 0 84px;background:var(--soft)}
.item .thumb img{width:100%;height:100%;object-fit:cover}
.item .body{flex:1}
.item .nm{font-family:var(--display);font-size:19px;letter-spacing:.02em;text-transform:uppercase}
.item .ds{color:var(--muted);font-size:14.5px;margin-top:4px}
.item .pr{font-family:var(--display);font-size:19px;margin-left:auto;white-space:nowrap;color:var(--navy)}
.row{display:flex;align-items:baseline;gap:10px;width:100%;flex-wrap:wrap}
.g{background:var(--red);color:#fff;font-family:var(--sans);font-weight:700;font-size:12.5px;
  padding:2px 9px;border-radius:999px}
.tagk{background:#eceae5;color:#4a4a4a;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:4px}

/* ── stats ────────────────────────────────────────────────────── */
.stats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(32px,5vw,52px);color:var(--navy);line-height:1}
.stat span{font-size:14px;color:var(--muted)}

/* ── picker ───────────────────────────────────────────────────── */
.picker{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.05)}
.picker label{font-family:var(--display);font-size:19px;letter-spacing:.03em;text-transform:uppercase}
.picker input[type=range]{width:100%;margin:18px 0 6px;accent-color:var(--red)}
.scale{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.count{font-family:var(--display);color:var(--red);font-size:17px;letter-spacing:.04em}

/* ── quote ────────────────────────────────────────────────────── */
.quote{font-family:var(--display);font-size:clamp(22px,3.4vw,38px);line-height:1.18;text-transform:uppercase;
  max-width:24ch;margin:0 auto;text-align:center}

/* ── footer ───────────────────────────────────────────────────── */
footer{background:var(--navy);color:#fff;padding:54px 0 40px;font-size:14.5px}
footer a{color:#cfe0f3}
footer b{font-family:var(--display);letter-spacing:.04em;display:block;margin-bottom:8px;font-size:16px;color:#fff}
.fgrid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fbar{border-top:1px solid rgba(255,255,255,.18);margin-top:34px;padding-top:18px;color:#9fb6cd;font-size:13px}

/* Six nav items, one of them the full "Luck's Wagyu Burger Shoppe", need about
   1160px to sit on one row beside the logo and the Order button. Below that the
   nav drops to its own full-width row and stays right-aligned, so Contact keeps
   its place at the right-hand end instead of orphaning onto a second line. */
@media(min-width:821px) and (max-width:1160px){
  .bar{flex-wrap:wrap}
  nav{order:3;width:100%;margin-left:0;gap:20px;justify-content:flex-end}
  .order{margin-left:auto}
}

@media(max-width:820px){
  .bar{min-height:auto;flex-wrap:wrap;gap:14px}
  nav{order:3;width:100%;margin-left:0;gap:18px;font-size:15px}
  .order{margin-left:auto}
  .hero{padding:78px 0 64px}
  .cat .shot{width:190px;height:190px}
  .topbar .promo{display:none}
}

/* ── menu: photo grid with a hover card ───────────────────────── */
.legend{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin:0 0 38px}
.legend b{color:var(--navy);font-family:var(--display);letter-spacing:.04em}
.dishes{display:grid;gap:40px 22px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dish{position:relative;text-align:center;padding:14px 10px 10px;border-radius:16px;border:1px solid transparent;
  transition:border-color .25s,box-shadow .25s,background .25s}
.dish .shot{width:150px;height:150px;margin:0 auto 16px;border-radius:50%;overflow:hidden;background:var(--soft);
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.dish .shot img{width:100%;height:100%;object-fit:cover}
.dish h3{font-size:16.5px;color:var(--navy);margin:0;line-height:1.25}
.dish .g{position:absolute;top:8px;right:14px}
.dish .card{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .25s ease;
  color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:0}
.dish .card .pr{display:block;margin:8px 0 0;font-family:var(--display);font-size:18px;color:var(--navy)}
.dish:hover,.dish:focus-within{border-color:var(--line);background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.09)}
.dish:hover .shot,.dish:focus-within .shot{transform:translateY(-6px)}
.dish:hover .card,.dish:focus-within .card{max-height:340px;opacity:1;margin-top:10px}
.dish.noimg .shot{display:flex;align-items:center;justify-content:center;color:#b9b9b9;font-family:var(--display);font-size:13px}
@media(hover:none){ .dish .card{max-height:340px;opacity:1;margin-top:10px} }
@media(max-width:820px){ .dish .shot{width:128px;height:128px} }
h3.step{font-size:20px;color:var(--navy);text-align:center;margin:46px 0 26px;
  padding-top:26px;border-top:1px solid var(--line)}
h3.step:first-of-type{border-top:0;padding-top:0;margin-top:0}
h3.step em{font-style:normal;font-family:var(--sans);font-weight:400;font-size:13px;
  text-transform:none;color:var(--muted);letter-spacing:0}

/* ── blog: the thirteen protein guides ─────────────────────────────
   The posts are copied from eatzen.com, where every element carried its own
   inline style - a different blue, a different face, a different scale from
   this site. tools/import_blog.py strips those and keeps the class names;
   this is where they get their looks, so a post reads like the rest of the
   site and a design change reaches it. The semantic names are the source's:
   zen-quick-answer, zen-formula, zen-house-box, zen-faq, zen-related,
   zen-sources, zen-disclaimer. zen-house-links is ours. */

/* the index */
.post-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.post-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:26px 24px 22px;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.post-card:hover{border-color:transparent;box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-3px)}
.post-date{margin:0 0 10px;font-family:var(--display);letter-spacing:.06em;
  font-size:13px;color:var(--red);text-transform:uppercase}
.post-card h2{font-size:21px;line-height:1.25;margin:0 0 12px;text-align:left}
.post-card p{margin:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.55}
.post-card .more{margin-top:auto;font-family:var(--display);letter-spacing:.04em;
  font-size:15px;color:var(--navy)}

/* a post */
.zen-article{padding:52px 0 64px}
.zen-article .wrap{max-width:760px}
.zen-article h1{font-family:var(--display);font-size:clamp(32px,5vw,50px);line-height:1.08;
  letter-spacing:.01em;margin:0 0 14px;color:var(--ink)}
.zen-article .kicker a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.zen-article .byline{margin:0 0 40px;color:var(--muted);font-size:14px}
.zen-article h2{font-size:26px;line-height:1.25;margin:46px 0 14px;text-align:left}
.zen-article h3{font-size:18.5px;color:var(--navy);margin:0 0 10px}
.zen-article p{margin:0 0 20px}
.zen-article ul,.zen-article ol{padding-left:22px;margin:0 0 22px}
.zen-article li{margin-bottom:10px}
.zen-article strong{font-weight:700}
.zen-article a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.zen-article a:hover{text-decoration-thickness:2px}

/* QUICK ANSWER - the block AI search engines quote. Carried across intact. */
.zen-quick-answer{background:#eef2f7;border-left:5px solid var(--navy);border-radius:6px;
  padding:24px 26px;margin:0 0 42px}
.zen-quick-answer .label{display:block;font-family:var(--display);letter-spacing:.1em;
  text-transform:uppercase;font-size:14px;color:var(--navy);margin-bottom:8px}
.zen-quick-answer p{margin:0;font-size:18px;line-height:1.6}

.zen-formula{background:var(--soft);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;margin:26px 0}
.zen-formula p:last-child{margin-bottom:0}
.zen-formula strong{color:var(--navy)}

.zen-house-box,.zen-house-links{background:var(--soft);border-radius:16px;
  padding:30px 28px;margin:44px 0}
.zen-house-box h2,.zen-house-links h2{margin:0 0 14px;font-size:23px}
.zen-house-box p:last-child,.zen-house-links p:last-child{margin-bottom:0}
.zen-house-links .btns{margin-top:22px}

/* FAQ - already FAQPage schema on the page, built from these pairs */
.zen-faq{border-top:1px solid var(--line);padding-top:20px;margin-bottom:22px}
.zen-faq p:last-child{margin-bottom:0}

.zen-related{margin:48px 0}
.zen-related h2{margin-top:0}
.zen-related-card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 20px;margin-bottom:12px;text-decoration:none;color:var(--navy);
  font-weight:600;transition:border-color .2s,box-shadow .2s}
.zen-article .zen-related-card{text-decoration:none}
.zen-related-card:hover{border-color:transparent;box-shadow:0 10px 24px rgba(0,0,0,.08)}

.zen-sources{margin-top:48px;padding-top:25px;border-top:2px solid var(--line)}
.zen-sources h2{margin-top:0;font-size:21px}
.zen-sources li{font-size:14.5px;line-height:1.5;margin-bottom:12px}
.zen-disclaimer{margin-top:34px;font-size:13.5px;line-height:1.6;color:var(--muted)}

@media(max-width:820px){
  .zen-article{padding:36px 0 48px}
  .zen-article h2{font-size:23px;margin-top:38px}
  .zen-quick-answer{padding:20px 20px}
  .zen-quick-answer p{font-size:17px}
}