/* BestDishMKE — shared styles for list pages.
   index.html still has its CSS inline; this stylesheet matches its design tokens
   so list pages feel like part of the same site. */

:root{
  --cream:#f5ecd9;
  --cream-2:#faf3e3;
  --card:#fbf6ea;
  --paper-line:#e6d9bd;
  --ink:#2b1d12;
  --ink-soft:#5a4632;
  --ink-mute:#8a7657;
  --brick:#8a3a2a;
  --brick-dark:#6e2c1f;
  --mustard:#c89033;
  --mustard-dark:#a87014;
  --olive:#5a6b3d;
  --shadow: 0 8px 30px rgba(43,29,18,.10), 0 2px 8px rgba(43,29,18,.06);
  --shadow-lg: 0 22px 60px rgba(43,29,18,.18), 0 6px 18px rgba(43,29,18,.10);
  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(200,144,51,.07), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(138,58,42,.06), transparent 42%);
}
img{max-width:100%;display:block}
a{color:var(--brick);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--brick-dark)}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin:0}
p{margin:0 0 1em}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* NAV (matches index.html) */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(245,236,217,.85);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(43,29,18,.08);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{height:44px;width:auto;mix-blend-mode:multiply}
.brand-name{font-family:"Fraunces",serif;font-weight:700;font-size:20px;letter-spacing:.02em;line-height:1}
.brand-tag{font-family:"Caveat",cursive;color:var(--brick);font-size:15px;line-height:1;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{
  color:var(--ink-soft);font-weight:500;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;position:relative;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--mustard);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-ig{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--cream);padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  min-height:44px;
}
.nav-ig:hover{background:var(--brick);color:var(--cream-2)}
.nav-toggle{
  display:none;background:none;border:0;color:var(--ink);font-size:24px;cursor:pointer;
  min-width:44px;min-height:44px;padding:0 8px;align-items:center;justify-content:center;
}

/* PAGE HERO (for list pages) */
.page-hero{padding:64px 0 28px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brick);font-weight:700;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--brick)}
.page-hero h1{
  font-size:clamp(38px, 5.6vw, 64px);
  line-height:1.05;
  font-weight:700;
  font-variation-settings:"opsz" 120;
  margin:18px 0 18px;
  max-width:920px;
}
.page-hero h1 em{font-style:italic;color:var(--brick);font-weight:600}
.page-hero .lead{
  font-size:18px;color:var(--ink-soft);max-width:780px;margin:0 0 22px;
}
.page-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;
}
.page-meta .updated{
  background:var(--mustard);color:#3a2a10;
  padding:5px 12px;border-radius:999px;letter-spacing:.08em;
}
.page-share{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  padding:8px 16px;border-radius:999px;
  font:600 12px/1 "Inter",sans-serif;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;min-height:36px;
  transition:background .2s ease, color .2s ease;
}
.page-share:hover{background:var(--ink);color:var(--cream)}
.page-share.is-copied{background:var(--mustard);border-color:var(--mustard);color:#3a2a10}
@media (max-width: 720px){
  .page-share{margin-left:0;width:100%;justify-content:center;margin-top:8px;min-height:44px}
}
.disclaimer{
  margin:28px 0 0;
  padding:16px 20px;
  background:var(--cream-2);
  border-left:3px solid var(--mustard);
  border-radius:var(--radius-sm);
  font-size:14.5px;color:var(--ink-soft);
}
.disclaimer strong{color:var(--ink)}

/* RULE */
.rule{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--mustard-dark);margin:36px auto 12px;
}
.rule::before,.rule::after{
  content:"";height:1px;background:var(--paper-line);flex:1;max-width:240px;
}
.rule span{font-family:"Fraunces",serif;font-style:italic;font-size:15px;color:var(--ink-mute)}

/* ENTRY (a single restaurant in the list) */
.entries{padding:24px 0 64px}
.entry{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:36px;
  align-items:center;
  background:var(--card);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin:0 0 28px;
  position:relative;
}
.entry:nth-of-type(even){background:var(--cream-2)}
.entry-photo{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#e9dcc1;
}
.entry-photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.entry-photo:hover img{transform:scale(1.04)}
.entry-rank{
  position:absolute;top:12px;left:12px;z-index:2;
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brick);color:#fff7e6;
  font-family:"Fraunces",serif;font-style:italic;font-weight:700;font-size:26px;
  border-radius:50%;box-shadow:0 6px 18px rgba(138,58,42,.35);
}
.entry-rank.is-honor{
  width:auto;height:auto;
  padding:6px 14px;
  border-radius:999px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  background:var(--mustard);color:#3a2a10;
  font-style:normal;
}
.entry-body{min-width:0}
.entry-name{
  font-family:"Fraunces",serif;
  font-size:clamp(24px, 2.4vw, 32px);
  font-weight:600;
  line-height:1.15;
  margin:0 0 8px;
  font-variation-settings:"opsz" 48;
}
.entry-name a{color:var(--ink)}
.entry-name a:hover{color:var(--brick)}
.entry-name .ext-link{
  display:inline-block;
  width:14px;height:14px;
  margin-left:6px;
  vertical-align:0;
  color:var(--ink-mute);
  transition:color .2s ease, transform .2s ease;
}
.entry-name a:hover .ext-link{color:var(--brick);transform:translate(2px,-2px)}
.entry-addr{
  font-size:14px;font-style:italic;color:var(--ink-mute);
  margin:0 0 14px;
}
.entry-addr a{
  color:inherit;
  border-bottom:1px dotted currentColor;
  padding:2px 0;
  display:inline-block;
  min-height:32px;
}
.entry-addr a:hover{color:var(--brick);border-bottom-color:var(--brick)}
.entry-desc{
  color:var(--ink-soft);
  font-size:16px;line-height:1.65;
  margin:0 0 14px;
}
.entry-style{
  display:inline-flex;align-items:baseline;gap:10px;
  margin:0;
  font-size:13px;color:var(--ink-soft);
}
.entry-style .kicker{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700;
}
.entry-style b{color:var(--ink);font-weight:600;letter-spacing:.02em}

/* GALLERY STRIP (lightbox pages: extra photos shown as thumbnails) */
.entry-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));
  gap:8px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px dashed var(--paper-line);
}
.gallery-thumb{
  display:block;
  aspect-ratio:1/1;
  border-radius:6px;
  overflow:hidden;
  background:#e9dcc1;
  border:1px solid var(--paper-line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gallery-thumb img{
  width:100%;height:100%;object-fit:cover;
}
.gallery-thumb:hover{transform:scale(1.04);box-shadow:var(--shadow)}

/* EMBEDDED MAP (FishFry, Patios, BestDishMap) */
.map-embed{padding:24px 0 56px}
.map-open-cta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;
}
.map-open-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brick);color:#fff7e6;
  padding:12px 22px;border-radius:999px;
  font-weight:600;font-size:15px;letter-spacing:.02em;
  min-height:44px;
  transition:background .2s ease, transform .15s ease;
}
.map-open-btn:hover{background:var(--brick-dark);color:#fff;transform:translateY(-1px)}
.map-open-hint{font-size:13px;color:var(--ink-mute);font-style:italic}
.embedded-map{
  width:100%;height:520px;
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--cream-2);
}
@media (max-width: 720px){
  .embedded-map{height:380px}
  .map-open-hint{display:none}
}

/* FOOTER */
footer.site-footer{
  background:var(--ink);color:var(--cream-2);
  padding:56px 0 28px;margin-top:48px;
}
.site-footer .container{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.site-footer h3{
  font-family:"Fraunces",serif;font-size:26px;color:var(--cream);
  font-weight:600;margin:0 0 12px;font-style:italic;
}
.site-footer h4{
  color:var(--cream);font-family:"Fraunces",serif;font-weight:600;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 14px;
}
.site-footer p{color:rgba(245,236,217,.7);font-size:15px;margin:0 0 10px}
.site-footer a{color:var(--mustard)}
.site-footer a:hover{color:#e7b85b}
.site-footer .footer-list{list-style:none;padding:0;margin:0}
.site-footer .footer-list li{margin-bottom:10px}
.site-footer .footer-email{margin-top:14px}
.social{display:flex;gap:10px;margin-top:14px}
.social a{
  width:44px;height:44px;border-radius:50%;
  background:rgba(245,236,217,.08);display:inline-flex;align-items:center;justify-content:center;
  color:var(--cream-2);transition:background .2s ease;
}
.social a:hover{background:var(--mustard);color:#2a1c0a}
.colophon{
  margin-top:32px;padding-top:22px;border-top:1px solid rgba(245,236,217,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:rgba(245,236,217,.5);
}
.colophon .heart{color:var(--brick)}

/* RESPONSIVE */
@media (max-width: 900px){
  .entry{grid-template-columns:1fr;gap:18px}
  .entry-photo{max-width:none}
  .site-footer .container{grid-template-columns:1fr;gap:32px}
}
@media (max-width: 720px){
  body{font-size:16px}
  .nav-inner{padding:8px 16px;gap:8px}
  .brand img{height:38px}
  .brand-name{font-size:17px}
  .brand-tag{display:none}
  .nav-ig{padding:10px 14px;font-size:12px}
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-links.open{
    display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream-2);border-bottom:1px solid var(--paper-line);
    padding:8px 16px 18px;
  }
  .nav-links.open a{padding:14px 0;width:100%;min-height:44px;display:flex;align-items:center}
  .page-hero{padding:40px 0 20px}
  .entries{padding:8px 0 40px}
  .entry{padding:18px}
}
@media (max-width: 440px){
  .nav-ig span{display:none}
  .nav-ig{padding:11px;min-width:44px}
}

/* SCROLL TO TOP (injected by partials.js on every page) */
.to-top{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;font-family:inherit;
  box-shadow:0 8px 24px rgba(43,29,18,.35);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.to-top.is-visible{opacity:.92;pointer-events:auto;transform:translateY(0)}
.to-top:hover{background:var(--brick);opacity:1}
.to-top:focus-visible{outline:2px solid var(--mustard);outline-offset:3px}

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