/* Rosemary Bakery menu: lines off the board (Hero kit). One simple list going down, Add on each line.
   Condensed caps for the headings, condensed prices lined up on the right, hairlines only, no leaders or pills. */
:root{--o-accent:#C9302C;--o-on-accent:#fff;--o-ink:#16130F;--o-muted:rgba(22,19,15,.72);--o-bg:#fff;--o-line:rgba(22,19,15,.13);--o-font:"Barlow Condensed",sans-serif}
.menu-head{padding-block:40px 34px}
.menu-head h1{font-size:clamp(64px,17vw,132px)}
.menu-head .lede{margin-top:14px;max-width:32em}
.menu-head .guide{margin-top:8px;color:rgba(255,255,255,.78)}
.jump-bar{position:sticky;top:64px;z-index:15;background:#fff;border-bottom:1px solid var(--line)}
.jump{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding-block:12px}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;text-decoration:none;font:700 18px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:8px 0;color:var(--muted)}
.jump a:hover,.jump a:focus-visible{color:var(--ink)}
.menu{padding-top:28px}
.menu .wrap{max-width:820px;display:grid;gap:36px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#mcount{font-size:14px;color:var(--muted)}
#menu{display:grid;gap:48px}
.mcat{scroll-margin-top:130px}
.mcat h2,.mcat h3{font:800 clamp(44px,10vw,68px)/.9 var(--display);text-transform:uppercase}
.mph{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;margin-top:16px}
.mnote{color:var(--muted);font-size:15.5px;margin:10px 0 0}
.mlist{list-style:none;margin:10px 0 0;padding:0}
.mlist li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.mlist li div{min-width:0;flex:1 1 auto}
.mlist b{font:700 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.idesc{display:block;font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:3px}
.sz{font-size:13px;color:var(--muted);font-weight:600}
.dots{display:none}
.mlist .p{font:800 26px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.mlist .p.ask{font-size:16px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mnone{padding:18px 0;color:var(--muted)}
/* Add: an ink outline; the red stays for the one main button (Hero kit) */
.o-add{border:1.5px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);min-height:40px;padding:0 14px;font:700 16px/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
.o-add:hover{background:var(--ink);color:#fff}
.o-q{border-color:var(--ink);color:var(--ink)}
/* Desktop: its own layout, each category's heading and photo held on the left while its list runs down the right */
@media (min-width:900px){
  .menu .wrap{max-width:var(--max)}
  #mcount,.menu>.wrap>.small{max-width:none}
  #mcount{padding-left:calc(38% + 56px)}
  .mcat{display:grid;grid-template-columns:38% 1fr;column-gap:56px;align-items:start}
  .mcat>h2,.mcat>h3,.mcat>.mfig,.mcat>.mnote{grid-column:1}
  .mcat>h2,.mcat>h3{grid-row:1}
  .mcat>.mfig{grid-row:2}
  .mcat>.mnote{grid-row:3}
  .mcat>.mlist{grid-column:2;grid-row:1/span 4;margin-top:0}
  .mph{aspect-ratio:4/3}
  .menu>.wrap>.small{padding-left:calc(38% + 56px)}
}
.o-q{border-radius:2px}