/* homepage */
.hero{position:relative;padding:22px 0 0;text-align:center}
.hero h1{font-size:clamp(31px,8.4vw,64px);max-width:15ch;margin:0 auto}
.hero h1 .line{display:block}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero .sub{font-size:clamp(17px,4.4vw,21px);max-width:36ch;margin:14px auto 0;color:var(--plum)}
.hero .sun{position:absolute;left:-6px;top:6px;width:64px;animation:spin 40s linear infinite}
.hero .kite-fly{position:absolute;right:-8px;top:-4px;width:86px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:760px){.hero{padding-top:40px}.hero .sun{width:96px;left:2%;top:30px}.hero .kite-fly{width:130px;right:3%;top:10px}}
@media (max-width:420px){.hero h1{padding:0 34px}}

.where{margin:26px 0 0;font:700 18px var(--sans);text-align:center}
.street{position:relative;margin-top:8px}
.pins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:1100px;margin:0 auto;padding:0 8px;position:relative;z-index:2}
.pin{display:flex;flex-direction:column;align-items:center;text-decoration:none;text-align:center;gap:6px}
.pin .tag{max-width:100%;display:inline-flex;align-items:center;gap:4px;background:var(--coral);color:#fff;font:700 13px/1.15 var(--sans);padding:7px 9px 7px 7px;border-radius:12px;position:relative;box-shadow:0 4px 0 var(--coral-dark);transition:transform .15s}
.pin .tag::after{content:"";position:absolute;bottom:-7px;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--coral);border-bottom:0}
.pin .tag svg{width:14px;height:14px;flex:none}
.pin .hook{font-size:12.5px;line-height:1.25;color:var(--plum);font-weight:600;max-width:13ch}
.pin:hover .tag{transform:translateY(-3px)}
.pin.boing .tag{animation:boing .45s}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.15,.85)}60%{transform:scale(.92,1.08)}100%{transform:scale(1)}}
.street-img{display:block;width:100%;height:auto;margin-top:-8px}
.street-hit{position:absolute;inset:auto 0 0 0;height:72%;display:grid;grid-template-columns:22% 26% 27% 25%}
.street-hit a{display:block}
@media (min-width:760px){.pin .tag{font-size:16px;padding:9px 14px 9px 10px}.pin .hook{font-size:15px;max-width:none}.pins{gap:14px}}

/* dinner card */
.dinner{margin:22px 0 0}
.dinner-card{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;position:relative}
.dinner-card .photo{border-radius:var(--radius) var(--radius) 0 0;aspect-ratio:4/3}
.dinner-card .body{padding:18px 18px 22px}
.dinner-card .eyebrow{font-size:15px;color:var(--plum-soft);margin:0 0 4px}
.dinner-card h2{font-size:clamp(30px,7.4vw,40px);margin-bottom:12px}
.dinner-card .chips{margin-bottom:18px}
.dinner-card .acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dinner-card .garlic{position:absolute;right:10px;bottom:10px;width:84px;transform-origin:bottom center;animation:wiggle 3.4s ease-in-out infinite}
.dinner-card.swap{animation:pop .45s ease}
@media (min-width:760px){.dinner-card{grid-template-columns:1.05fr 1fr;align-items:center}.dinner-card .photo{border-radius:var(--radius) 0 0 var(--radius);height:100%;aspect-ratio:auto}.dinner-card .body{padding:30px}.dinner-card .garlic{width:110px}}

/* value row */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 22px}
.value{padding:14px 8px 16px;text-align:center}
.value img{width:100%;max-width:120px;aspect-ratio:1;object-fit:contain;margin:0 auto 6px}
.value b{display:block;font:650 15px/1.2 var(--serif)}
@media (min-width:760px){.values{gap:18px}.value b{font-size:20px}.value{padding:20px}}

@media (max-width:520px){
  .pin .tag{font-size:12px;padding:7px 7px;justify-content:center;text-align:center;line-height:1.12;border-radius:11px}
  .pin .tag svg{display:none}
  .pin .hook{font-size:11.5px}
  .pins{gap:5px;padding:0 6px}
}
@media (min-width:760px){.hero h1{max-width:none;font-size:clamp(44px,5.2vw,64px)}}
@media (min-width:760px){.hero h1{font-size:clamp(42px,4.4vw,58px)}.hero .kite-fly{top:-26px;right:1%;width:118px}.hero .sun{top:18px}}