/* Koko's menu page — recreates the printed dinner menu */
@font-face{font-family:Overlock;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/overlock-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Overlock;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/overlock-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Overlock;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/overlock-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:"PT Sans Narrow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pt-sans-narrow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:"PT Sans Narrow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/pt-sans-narrow-latin-700-normal.woff2) format('woff2')}

.menu-page{--m-ink:#231f20;--m-pink:#ec148a;--m-green:#cce310;--m-blue:#6ecfe2;--m-sea:#d1eff4;--m-orange:#f0921e;--m-yellow:#f3ee22;--m-cream:#f9f6e0;--m-gray:#f2ecea;--m-navy:#2b3990;
  background:#e9e9e9;padding:40px 0 70px;color:var(--m-ink)}
.sheet{width:min(1180px,100% - 32px);margin:0 auto 40px;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);overflow:hidden}
.sheet img{display:block;height:auto}
.bunting{width:100%}
.m-cols{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:34px;padding:0 34px}
.m-col{min-width:0}
.m-head{margin:28px 0 14px}
.m-head img{max-width:100%}
.m-item{margin:0 0 12px}
.m-item h3{font-family:Overlock,sans-serif;font-weight:900;font-size:24px;line-height:1.1;letter-spacing:-.2px;color:var(--m-ink);margin:0}
.m-item h3 small{font-size:.72em;font-weight:900}
.m-item p{font-family:"PT Sans Narrow",sans-serif;font-size:17px;line-height:1.3;color:var(--m-ink);margin:2px 0 0}
.m-item .note{font-style:italic;color:#555}
.m-item.hl h3{color:var(--m-pink)}
.m-list{list-style:none;margin:0;padding:0}
.m-list li{font-family:Overlock,sans-serif;font-weight:900;font-size:24px;line-height:1.45}
.m-list li small{font-size:.72em}

/* Colored blocks */
.box{margin:18px -34px;padding:16px 34px 20px}
.m-col:first-child .box{margin-left:-34px}
.box.green{background:var(--m-green)}
.box.blue{background:var(--m-blue)}
.box.cream{background:var(--m-cream)}
.box .m-head{margin-top:0}
.molca{display:flex;gap:10px;align-items:flex-end}
.molca p{font-family:"PT Sans Narrow",sans-serif;font-size:18px;line-height:1.3;margin:6px 0 0;color:var(--m-ink)}
.molca img{width:90px;flex:0 0 auto}
.bar{margin:14px -34px 14px -14px;padding:10px 14px 12px}
.bar.orange{background:var(--m-orange)}
.bar.pink{background:var(--m-pink)}
.bar.pink h3{color:var(--m-yellow)}
.bar.pink p,.bar.pink .note{color:#fff}
.service{width:62%;margin:16px auto 0}
.logo-block{padding-top:6px}
.logo-block img{width:92%}

/* Bands */
.band{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;padding:20px 24px;text-align:center;font-family:Oswald,sans-serif;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.band.gray{background:var(--m-gray);margin-top:34px}
.band.gray .a{color:var(--m-ink);font-size:30px}
.band.gray .b{color:var(--m-pink);font-size:30px}
.band.top{background:var(--m-blue);color:var(--m-navy);font-size:32px}
.band.top img{width:50px}
.band a{color:inherit}
.band a:hover{text-decoration:underline}

/* Page 2 */
.p2{display:grid;grid-template-columns:1fr 2fr;column-gap:34px;padding:0 34px}
.p2 .left .box{margin-left:-34px;margin-right:-34px;padding-left:34px}
.mijo{margin:18px -34px 18px -34px}
.mijo img{width:100%}
.sides{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;margin-top:24px}
.sides .label img{width:44px}
.sides ul{list-style:none;margin:0;padding:0;columns:3;column-gap:24px}
.sides li{font-family:Overlock,sans-serif;font-weight:900;font-size:22px;line-height:1.6;break-inside:avoid}
.sea{position:relative;background:var(--m-sea);margin:28px -34px 0 0;padding:22px 34px 70px}
.sea::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:linear-gradient(135deg,transparent 50%,#f7a823 50%) 0 0/24px 14px repeat-x,linear-gradient(225deg,transparent 50%,#f7a823 50%) 0 0/24px 14px repeat-x}
.sea::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:
  conic-gradient(from 150deg at 50% 0,#ee3f57 0 60deg,transparent 0) 0 0/96px 44px repeat-x,
  conic-gradient(from 150deg at 50% 0,#f5e21e 0 60deg,transparent 0) 24px 0/96px 44px repeat-x,
  conic-gradient(from 150deg at 50% 0,#5fb946 0 60deg,transparent 0) 48px 0/96px 44px repeat-x,
  conic-gradient(from 150deg at 50% 0,#ee3f57 0 60deg,transparent 0) 72px 0/96px 44px repeat-x;background-color:#fff;border-top:2px solid #c8b99a}
.sea .head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.sea .head img:first-child{width:60%}
.sea .head img:last-child{width:34%}
.sea .cols{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
.drinks{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:20px;margin-top:20px;text-align:center}
.drinks .m-head{margin:4px auto 10px;display:flex;justify-content:center}
.drinks .m-head img{max-height:84px;width:auto}
.drinks ul{list-style:none;margin:0;padding:0}
.drinks li{font-family:Overlock,sans-serif;font-size:22px;line-height:1.5}
.drinks li.pk{color:var(--m-pink)}
.drinks h4{font-family:Overlock,sans-serif;font-weight:900;font-size:24px;margin:14px 0 0;line-height:1}
.drinks h4 small{display:block;font-size:15px}
.catering-box{position:relative;background:var(--m-cream);margin:26px -34px 0 0;padding:24px 34px 26px}
.catering-box .logo{width:200px}
.catering-box h2{font-family:Oswald,sans-serif;font-size:32px;font-weight:700;line-height:1.1;margin:10px 0 8px;color:var(--m-ink)}
.catering-box p{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.45;margin:0;max-width:78%}
.catering-box .call{margin-top:8px;font-family:Georgia,serif;font-size:20px}
.catering-box .cactus{position:absolute;right:20px;bottom:10px;width:120px}
.foot{background:var(--m-gray);padding:18px 30px 22px;text-align:center;font-family:"PT Sans Narrow",sans-serif;font-size:16px;line-height:1.4;margin-top:30px}
.foot strong{display:block;font-size:17px}
.foot small{display:block;font-size:13px;margin-top:4px;color:#555}
.menu-cta{text-align:center;margin-top:10px}
.menu-cta .btn{margin:6px}

@media (max-width:1024px){
  .m-cols{grid-template-columns:1fr 1fr}
  .p2{grid-template-columns:1fr}
  .sea,.catering-box{margin-left:-34px}
  .band.gray .a,.band.gray .b{font-size:24px}
  .band.top{font-size:24px}
}
@media (max-width:700px){
  .menu-page{padding:16px 0 40px}
  .sheet{width:100%;box-shadow:none;margin-bottom:16px}
  .m-cols,.p2{grid-template-columns:1fr;padding:0 18px}
  .box,.m-col:first-child .box,.p2 .left .box{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .bar{margin-left:-18px;margin-right:-18px;padding-left:18px}
  .mijo{margin-left:-18px;margin-right:-18px}
  .sea,.catering-box{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .sea .cols{grid-template-columns:1fr}
  .sides ul{columns:2}
  .drinks{grid-template-columns:1fr;row-gap:20px}
  .catering-box p{max-width:100%}
  .catering-box .cactus{position:static;margin:12px 0 0 auto;width:90px}
  .m-item h3,.m-list li{font-size:21px}
  .band.gray .a,.band.gray .b,.band.top{font-size:20px}
  .service{width:70%}
}