/* A paper menu with ink edges and marker highlights. Food stays photographic. */
.menu{background-color:#DCECF6;background-image:radial-gradient(rgba(21,54,90,.055) .7px,transparent .7px);background-size:9px 9px}
.menu__bar{padding:12px 0;background:#DCECF6}
.menu__bar::after{display:none}
.menu__tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:stretch;overflow:visible;padding:0 3px 4px 0;margin:0;scroll-snap-type:none}
.menu__tab,.menu__tab:hover,.menu__tab.is-active{min-width:0;min-height:62px;justify-content:center;gap:9px;padding:9px 12px;border:1.7px solid var(--ink);border-radius:13px 8px 12px 7px / 8px 13px 8px 12px;transform:none;white-space:normal;font-size:.84rem;line-height:1.25;background:var(--paper);box-shadow:2px 3px 0 rgba(21,54,90,.17);transition:background .15s,color .15s;scroll-snap-align:none}
.menu__tab:hover{background:#FFF0C5}
.menu__tab.is-active{background:var(--ice);color:#fff;box-shadow:2px 3px 0 var(--ink)}
.menu__tab::before,.menu__tab::after,.menu__tab.is-active::before,.menu__tab.is-active::after{content:none}
.menu__tab-label{min-width:0}
.menu__tabic{width:36px;height:36px;box-shadow:none;border-radius:9px 7px 8px 6px}
.menu__tab:hover .menu__tabic{transform:none}
.menu__tab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.menu__board{margin-top:20px;padding:42px clamp(22px,3.6vw,46px) 38px;border:1.8px solid var(--ink);border-radius:21px 12px 24px 14px / 13px 22px 15px 20px;background-color:var(--paper);background-image:radial-gradient(rgba(154,115,71,.055) .6px,transparent .6px);background-size:6px 6px;box-shadow:5px 6px 0 #B7CDDF}
.menu__board::before{display:block;content:'';position:absolute;inset:6px;border:1px solid rgba(21,54,90,.2);border-radius:17px 9px 19px 11px / 11px 17px 12px 17px;pointer-events:none}
.menu__board::after{content:'';position:absolute;top:-10px;left:calc(50% - 43px);width:86px;height:23px;background:repeating-linear-gradient(110deg,#F4D77DAA 0 5px,#F8DEA099 5px 10px);transform:rotate(-3deg);clip-path:polygon(2% 0,98% 0,96% 18%,100% 35%,97% 51%,100% 70%,97% 100%,1% 100%,3% 77%,0 56%,3% 30%);pointer-events:none}
.menu__head{grid-template-columns:128px minmax(0,1fr);gap:26px;border:0;padding-bottom:0;margin-bottom:35px}
.menu__category-shot{width:128px;height:128px;border:5px solid #fff;border-bottom-width:13px;border-radius:5px 8px 5px 7px;transform:rotate(-4deg);box-shadow:2px 3px 0 rgba(21,54,90,.2)}
.menu__where{font-family:var(--font-hand);font-size:1.4rem;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.05;color:#AB3860}
.menu__name{font-size:clamp(2rem,3.5vw,2.9rem);margin:7px 0 10px}
.menu__blurb{font-size:.93rem;line-height:1.6}
.menu__panel:focus-visible{outline:2px solid var(--ice);outline-offset:9px;border-radius:8px}
.board__head{gap:7px 14px;margin-bottom:18px}
.board__head h3{color:var(--ink)}
.board__head .sub{font-size:1.35rem}
.board__rule{display:none}
.board__head .tagpill{margin-left:auto;border-radius:42% 48% 44% 46% / 40% 47% 44% 51%;background:#fff9;border-width:1.3px;letter-spacing:.05em;font-size:.72rem}
.menu .col>h4{position:relative;isolation:isolate;width:max-content;max-width:100%;padding:7px 10px 8px 4px;margin:0 0 10px;background:none!important;border-radius:0;font-family:var(--font-hand);font-size:1.45rem;letter-spacing:0;text-transform:none;font-weight:700;line-height:1.1}
.menu .col>h4::before{content:'';position:absolute;z-index:-1;left:-3px;right:0;top:40%;bottom:2px;background:#C5E8F5;transform:rotate(-1deg);border-radius:13% 3% 9% 4% / 20% 10% 25% 15%;pointer-events:none}
.menu .col:nth-child(3n+2)>h4::before{background:#F7CEDB;transform:rotate(1deg)}
.menu .col:nth-child(3n)>h4::before{background:#F6E3A3}
.menu .row{border-radius:0;border-bottom:1px solid rgba(21,54,90,.12);padding-inline:2px}
.menu .row:hover,.menu .row:focus-visible{padding-inline:2px}
.menu .row__ic,.menu .row:hover .row__ic{border-radius:10px 7px 9px 6px;background:#FFF9EF;transform:none;box-shadow:1px 2px 0 rgba(21,54,90,.08)}
.menu .row .p{background:transparent;font-size:.85rem;padding:3px 0 3px 5px}
.menu .dish{border:1.3px solid rgba(21,54,90,.45);border-radius:17px 10px 15px 9px / 10px 16px 9px 15px;box-shadow:2px 3px 0 rgba(21,54,90,.1);background:#FFFCF5}
.menu .dish:nth-child(3n+2){background:#FCEAF0}.menu .dish:nth-child(3n){background:#FBF0CF}
.menu .dish__glyph{border-radius:9px 6px 8px 6px}
.menu .dish .p{background:none;padding:0;color:var(--ice-deep)}
@media(max-width:1050px){.menu__tab,.menu__tab:hover,.menu__tab.is-active{font-size:.77rem;padding:9px 7px;gap:6px}.menu__tabic{width:30px;height:32px}}
@media(max-width:700px){
 .menu__bar{padding:9px 0 10px}
 .menu__tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding-right:2px}
 .menu__tab,.menu__tab:hover,.menu__tab.is-active{grid-column:span 2;min-height:45px;padding:7px 5px;font-size:.76rem;line-height:1.2;border-width:1.4px;border-radius:9px 6px 8px 5px;box-shadow:1px 2px 0 rgba(21,54,90,.2)}
 .menu__tab:nth-child(n+4){grid-column:span 3}
 .menu__tabic{display:none}
 .menu__tab-label{max-width:13ch}
 .menu__board{padding:27px 17px 28px;margin-top:17px;box-shadow:3px 4px 0 #B7CDDF}
 .menu__board::before{inset:4px}
 .menu__head{grid-template-columns:77px minmax(0,1fr);gap:15px;margin-bottom:27px}
 .menu__category-shot{width:77px;height:92px;border-width:3px;border-bottom-width:9px;transform:rotate(-3deg)}
 .menu__where{font-size:1.2rem}
 .menu__name{font-size:1.8rem;line-height:1.02;margin:5px 0 8px}
 .menu__blurb{font-size:.81rem;line-height:1.5}
 .board__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 9px}
 .board__head h3{font-size:1.45rem;grid-column:1;grid-row:1}
 .board__head .sub{font-size:1.18rem;grid-column:1/-1;grid-row:2}
 .board__head .tagpill{grid-column:2;grid-row:1;font-size:.69rem;padding:5px 9px;max-width:118px;white-space:normal;line-height:1.25;text-align:center}
 .menu .col>h4{font-size:1.42rem}
 .menu .row{padding-block:8px;gap:10px;font-size:.84rem;min-height:71px}
 .menu .row:hover{padding-block:8px}
 .menu .row__ic,.menu .row:hover .row__ic{width:55px;height:51px}
 .menu .row .p{font-size:.83rem}
 .menu .dish{padding:12px 8px;gap:7px}
 .menu .dish__k h4{font-size:1.12rem}
 .menu .dish .p{font-size:.85rem}
 .menu__panel:not(#panel-froyo) .dishes{grid-template-columns:1fr;gap:12px}
 .menu__panel:not(#panel-froyo) .dish{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;text-align:left;padding:13px;gap:5px 13px;align-content:center}
 .menu__panel:not(#panel-froyo) .dish__glyph{grid-column:1;grid-row:1/3;width:72px;height:72px}
 .menu__panel:not(#panel-froyo) .dish__k{grid-column:2;grid-row:1;justify-content:flex-start}
 .menu__panel:not(#panel-froyo) .dish p.d{grid-column:2;grid-row:2;font-size:.8rem}
}
/* Items with nothing to describe (the boba) sit as one tight row of small cards
   instead of wide cards that are mostly empty. Four described items make two
   even rows instead of three and a stray. */
.menu .dishes--plain{grid-template-columns:repeat(6,minmax(0,1fr))}
.menu .dishes--plain .dish{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;align-content:start;text-align:center;row-gap:10px;padding:13px 9px 14px;min-height:0}
.menu .dishes--plain .dish__glyph{grid-column:1;grid-row:1;width:100%;max-width:118px;height:auto;aspect-ratio:11/10}
.menu .dishes--plain .dish__k{grid-column:1;grid-row:2;flex-direction:column;align-self:start;gap:6px}
.menu .dishes--plain .dish__k h4{flex:none}
@media(min-width:1051px){.menu .dishes[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){.menu .dishes--plain{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.menu .dishes--plain{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){
 .menu__board{padding-inline:14px}
 .menu__head{grid-template-columns:62px minmax(0,1fr);gap:12px}
 .menu__category-shot{width:62px;height:82px}
 .menu__name{font-size:1.6rem}
 .menu .row{gap:8px;font-size:.8rem}
 .menu .row__ic,.menu .row:hover .row__ic{width:49px;height:48px}
}