:root{
  --ink:#16161A; --ground:#FFFFFF; --red:#B3202C; --red-dark:#8C1922;
  --grey:#5B5B66; --line:#E4E4E8; --wash:#F7F7F9;
}
*{box-sizing:border-box}
html,body{overflow-x:clip;margin:0;padding:0}
body{background:var(--ground);color:var(--ink);
  font:400 17px/1.65 "Crimson Pro",Georgia,serif;-webkit-font-smoothing:antialiased}
.wrap{width:min(1180px,92vw);margin:0 auto}
h1,h2,h3,.disp{font-family:"Oswald",Impact,sans-serif;font-weight:600;
  letter-spacing:.012em;text-transform:uppercase;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98}
h2{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.04}
h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}
p{margin:0 0 1rem}
a{color:var(--red)}
img{max-width:100%;display:block}
.kicker{font-family:"Oswald",sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:1rem;color:var(--red);font-weight:500;margin:0 0 .6rem}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--ground);
  border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:74px}
.brand{display:flex;align-items:center;text-decoration:none;padding:.4rem 0}
.brand img{height:46px;width:auto}
@media(max-width:520px){.brand img{height:38px}}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:1rem;
  letter-spacing:.09em;color:var(--ink);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--red)}
.nav a.btn-fill{background:var(--red);color:#fff;padding:.6rem 1.1rem;border-radius:2px}
.nav a.btn-fill:hover{background:var(--red-dark);color:#fff}
.burger{display:none;background:none;border:1px solid var(--line);
  font:500 1rem "Oswald",sans-serif;text-transform:uppercase;padding:.5rem .8rem;
  color:var(--ink);cursor:pointer}
@media(max-width:860px){
  .nav{display:none}.nav.open{display:flex;position:absolute;top:74px;left:0;right:0;
    background:var(--ground);border-bottom:1px solid var(--line);flex-direction:column;
    align-items:flex-start;padding:1.2rem 4vw;gap:1rem}
  .burger{display:block}
}

/* HERO: a SPLIT, not an overlay. Type sits on white beside the photograph
   rather than on top of it, so nothing in the picture is ever covered. The
   first build laid an h1 across a photo and the photo turned out to be a
   portrait of three teenagers. A split makes that mistake structurally
   impossible, and the food is better seen than scrimmed. */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  background:var(--ground);border-bottom:1px solid var(--line)}
.hero .copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.4rem,5vw,4.5rem) clamp(1.2rem,4vw,4rem)}
.hero .shot{position:relative;min-height:clamp(320px,52vh,600px)}
.hero .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .lede{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:42ch;color:var(--grey)}
@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero .shot{order:-1;min-height:46vh}
}
.cta{display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;
  padding:.85rem 1.5rem;margin-top:1.2rem;border-radius:2px;font-size:1rem}
.cta:hover{background:var(--red-dark);color:#fff}
.cta.ghost{background:transparent;border:2px solid #fff;margin-left:.6rem}

section{padding:clamp(3rem,6vw,5.5rem) 0}
.sec-wash{background:var(--wash)}

/* two locations */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.loc{border-top:3px solid var(--red);padding-top:1.2rem}
.loc h3{margin-bottom:.4rem}
.loc .addr{font-size:1.05rem;color:var(--grey)}
.loc .tel{font-family:"Oswald",sans-serif;font-size:1.4rem;letter-spacing:.02em;
  display:inline-block;margin-top:.5rem;color:var(--ink);text-decoration:none}
.loc .tel:hover{color:var(--red)}

/* dish strip, static rows, never a marquee */
.dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.dishes figure{margin:0}
.dishes img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:16px}
@media(max-width:820px){.dishes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dishes{grid-template-columns:1fr}}
.dishes figcaption{font-family:"Oswald",sans-serif;text-transform:uppercase;
  font-size:1rem;letter-spacing:.08em;padding-top:.5rem;color:var(--grey)}

/* MENU */
.menu-nav{position:sticky;top:74px;z-index:40;background:var(--ground);
  border-bottom:1px solid var(--line);padding:.7rem 0;overflow-x:auto}
.menu-nav ul{display:flex;gap:.5rem;list-style:none;margin:0;padding:0;white-space:nowrap}
.menu-nav a{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:1rem;
  letter-spacing:.07em;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  padding:.4rem .8rem;border-radius:2px;display:block}
.menu-nav a:hover{border-color:var(--red);color:var(--red)}
.msec{padding:clamp(2.2rem,4vw,3.4rem) 0 0}
.msec > h2{border-bottom:3px solid var(--ink);padding-bottom:.5rem;margin-bottom:.4rem}
.msub{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:1.05rem;color:var(--red);margin:1.8rem 0 .6rem;font-weight:500}
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:0 2.6rem}
.item{padding:.85rem 0;border-bottom:1px solid var(--line)}
.item .top{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.item .nm{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:1.05rem;
  letter-spacing:.03em;font-weight:500}
.item .pr{font-family:"Oswald",sans-serif;font-size:1.05rem;color:var(--red);
  white-space:nowrap;font-weight:600}
.item .ds{font-style:italic;color:var(--grey);font-size:1rem;margin:.2rem 0 0}
.item .nt{font-size:1rem;color:var(--red-dark);margin:.25rem 0 0}
.advisory{margin-top:3rem;padding:1.1rem 1.3rem;background:var(--wash);
  border-left:3px solid var(--grey);font-size:1rem;color:var(--grey)}

/* posts */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2rem}
.post a{text-decoration:none;color:var(--ink)}
.post img{aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:.7rem}
.post h3{margin-bottom:.3rem}
.post h3:hover{color:var(--red)}
.prose{max-width:68ch}
.prose p{font-size:1.1rem}

/* form */
form{max-width:620px}
label{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;
  font-size:1rem;letter-spacing:.09em;margin:1rem 0 .3rem}
input,textarea,select{width:100%;padding:.75rem;border:1px solid var(--line);
  font:400 17px/1.5 "Crimson Pro",Georgia,serif;background:#fff;color:var(--ink);
  border-radius:2px}
input:focus,textarea:focus{outline:2px solid var(--red);outline-offset:1px}
button{margin-top:1.3rem;background:var(--red);color:#fff;border:0;
  font:500 1.05rem "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;
  padding:.85rem 1.7rem;cursor:pointer;border-radius:2px}
button:hover{background:var(--red-dark)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* editorial split, used on Our Story */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.6rem);
  align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.prose .big{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.4;color:var(--ink)}
.pull{margin:2.2rem 0 0;padding:1.4rem 0 0;border-top:3px solid var(--red)}
.pull p{font-family:"Oswald",sans-serif;text-transform:uppercase;
  font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.3;letter-spacing:.01em;margin:0}
.pull cite{display:block;margin-top:.7rem;font-style:normal;color:var(--grey);
  font-size:1rem}

/* maps */
.map{width:100%;aspect-ratio:16/10;border:0;border-radius:16px;
  margin-top:1rem;filter:grayscale(.2)}

/* scroll reveal, CSS only, and safe: the default state is VISIBLE so a
   failed script can never blank the page */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* accolades */
/* The badge artwork already carries its own wording and the awarding
   publication, so nothing is captioned underneath it. Repeating the words is
   what made this section read twice. */
.awards{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:center}
.award img{width:100%;height:auto;max-height:210px;object-fit:contain;
  border:1px solid var(--line);border-radius:16px}
@media(max-width:760px){.awards{grid-template-columns:1fr}}

/* testimonials, words only, never a stranger's profile photo */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2rem}
.quote{border-left:3px solid var(--red);padding-left:1.1rem}
.quote p{font-style:italic;font-size:1.06rem;margin:0}

/* footer */
.social a{display:inline-block;margin:0 .9rem .5rem 0;color:#fff}
.ftr{background:var(--ink);color:#DDDDE2;padding:3.2rem 0 2rem;margin-top:0}
.ftr a{color:#fff}
.ftr h3{color:#fff;font-size:1.1rem;margin-bottom:.7rem}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2rem}
.fbot{border-top:1px solid #33333C;margin-top:2.2rem;padding-top:1.2rem;
  font-size:1rem;color:#9A9AA6}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}