/* Hummus Kimchi — home page (concept screens 01–06; 07 footer lives in base.css). */

/* ---------- 01 hero ---------- */
.hero { overflow-x: clip; }
.hero__in { display: grid; gap: 40px; padding-top: 28px; padding-bottom: 56px; }
.hero__title { font-size: 21vw; }
.hero__title span { display: block; }
.hero__hand { font-size: 30px; margin-top: 14px; }
.hero__lead { margin-top: 18px; max-width: 540px; }
.hero__btns { margin-top: 28px; }
.hero__rating { margin-top: 20px; }
.hero__art { position: relative; width: 70%; margin-left: 20%; }
.hero__photo { aspect-ratio: 476 / 672; border-radius: 50% 50% 5% 5% / 35.4% 35.4% 3.6% 3.6%; overflow: hidden; background: #2a2622; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__st { position: absolute; width: 41.2%; }
.hero__st .tag { position: absolute; left: -15%; top: 96%; }
.hero__st--kimchi { left: 65.1%; top: 3.9%; }
.hero__st--kimchi .tag { transform: rotate(-4deg); }
.hero__st--hummus { left: -23.1%; top: 51.5%; }
.hero__st--hummus .tag { transform: rotate(4deg); }
.hero__st--bulgogi { left: 60.9%; top: 64.9%; width: 44.1%; }
.hero__st--bulgogi .tag { left: -28%; top: 98%; transform: rotate(3deg); }
@media (max-width: 767px) {
  .place__dog .tag { left: -92%; top: 40%; }
  .picks__more .link-arrow { display: inline; }
  .hero__st--hummus .tag { left: -2%; }
  .hero__st--bulgogi .tag { left: -40%; }
}
@media (min-width: 768px) {
  .hero__in { padding-top: 40px; padding-bottom: 72px; }
  .hero__title { font-size: min(17vw, 180px); }
  .hero__hand { font-size: 40px; }
  .hero__art { width: 400px; margin-left: calc(50% - 150px); }
}
@media (min-width: 1200px) {
  .hero__in { grid-template-columns: 1fr 36.3%; gap: 40px; padding-top: 32px; padding-bottom: 40px; }
  .hero__title { font-size: min(12.4vw, 180px); }
  .hero__hand { font-size: 44px; margin-top: 12px; margin-left: 8px; }
  .hero__lead { margin-top: 26px; }
  .hero__btns { margin-top: 48px; }
  .hero__rating { margin-top: 28px; }
  .hero__art { width: auto; margin: 0; }
}

/* ---------- 02 menu highlights ---------- */
.picks__head { display: grid; gap: 20px; }
.picks__intro { max-width: 476px; }
.picks__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }
.picks__bar .chips { min-width: 0; }
.picks__showing { display: none; white-space: nowrap; }
.picks__cards { display: flex; gap: var(--gap); margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); scroll-padding-inline: var(--m); padding-bottom: 4px; }
.picks__cards::-webkit-scrollbar { display: none; }
.picks__cards.is-swapping { opacity: 0; transform: translateY(8px); }
.picks__cards { transition: opacity .25s, transform .25s; }
.pcard { flex: 0 0 78%; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--r-card); padding: 24px 22px 22px; background: var(--tint); }
.pcard:nth-child(4n+2) { background: var(--peach); }
.pcard:nth-child(4n+3) { background: var(--mustard); }
.pcard:nth-child(4n+4) { background: var(--red); color: var(--cream); }
.pcard .sticker { width: 80%; margin: 0 auto; }
.pcard .t-h3 { margin-top: 24px; font-size: 26px; }
.pcard__side { font: 700 20px/1 var(--hand); margin-top: 18px; }
.pcard__desc { margin: 8px 0 32px; font-size: 16px; line-height: 1.4; }
.pcard__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-ink); font-size: 15px; font-weight: 500; }
.pcard:nth-child(4n+4) .pcard__foot { border-color: rgba(246,239,227,.4); }
.pcard .t-price { font-size: 22px; }
.picks__more { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 32px; }
.picks__more .link-arrow { font-size: 16px; }
@media (min-width: 768px) {
  .picks__bar .chips { overflow-x: auto; scrollbar-width: none; }
  .picks__bar .chip { flex: none; }
  .picks__cards { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .pcard { padding: 28px 24px 24px; }
}
@media (min-width: 1200px) {
  .picks__head { grid-template-columns: 1fr 476px; align-items: end; }
  .picks__showing { display: block; }
  .picks__intro { padding-bottom: 28px; }
  .picks__bar { margin-top: 50px; }
  .picks__cards { grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
  .pcard .t-h3 { font-size: 24px; }
  .picks__more { margin-top: 34px; }
}

/* ---------- 03 the place ---------- */
.place__grid { display: grid; gap: 48px; }
.place__visual { position: relative; }
.place__photo { aspect-ratio: 760 / 610; border-radius: var(--r-photo); overflow: hidden; }
.place__photo img { width: 100%; height: 100%; object-fit: cover; }
.place__dog { position: absolute; right: -2%; bottom: -12%; width: 30%; }
.place__dog img { object-position: 72% 50%; }
.place__dog .tag { position: absolute; left: -48%; top: 62%; transform: rotate(-5deg); }
.place__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 64px 0 0; }
.place__stats > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.place__stats dd { margin: 6px 0 0; font: 800 17px/1.2 var(--display); letter-spacing: -0.01em; }
.place__stats .t-label { color: var(--ink-2); font-size: 11px; }
.place__text .t-h2 { margin-top: 6px; }
.place__text .t-lead { margin-top: 24px; }
.place__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.place__pair figure { aspect-ratio: 236 / 366; border-radius: var(--r-photo); overflow: hidden; }
.place__pair img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .place__dog { width: 24%; right: -3%; bottom: -8%; }
  .place__dog .tag { left: -58%; top: 70%; }
  .place__stats { gap: 24px; }
  .place__stats dd { font-size: 24px; }
  .place__text .t-lead { max-width: 640px; }
}
@media (min-width: 1200px) {
  .place__grid { grid-template-columns: 760fr 492fr; gap: 60px; align-items: start; }
  .place__dog { width: 23.7%; right: -6%; bottom: -14.8%; }
  .place__dog .tag { left: -66%; top: 34%; }
  .place__stats { margin-top: 52px; }
  .place__stats dd { font-size: 26px; }
  .place__text .t-h2 { font-size: 68px; }
  .place__text .t-lead { margin-top: 44px; font-size: 17px; }
  .place__pair { margin-top: 54px; gap: 20px; }
}

/* ---------- 04 favourites + combos ---------- */
.fav__top { display: grid; gap: 32px; }
.fav__list { margin-top: 8px; }
.fav__list li { display: flex; align-items: flex-start; gap: 8px; }
.fav__list .t-display { font-size: clamp(52px, 16vw, 126px); line-height: .86; }
.fav__list .t-price { font: 700 12px/1 var(--sans); margin-top: .7em; letter-spacing: 0; }
.fav__art { position: relative; width: min(100%, 480px); aspect-ratio: 480 / 580; margin-inline: auto; }
.fav__st { position: absolute; }
.fav__st .tag { position: absolute; }
.fav__st--labneh { left: 10.4%; top: 1.9%; width: 47.9%; }
.fav__st--labneh .tag { left: 76%; top: 88%; transform: rotate(-4deg); }
.fav__st--eggplant { left: 16.7%; top: 55%; width: 39.6%; }
.fav__st--eggplant .tag { left: -32%; top: 90%; transform: rotate(4deg); }
.fav__st--skhug { left: 64.6%; top: 48%; width: 35.4%; }
.fav__st--skhug .tag { left: 30%; top: 108%; transform: rotate(-4deg); }
.fav__combos-head { display: grid; gap: 8px; margin-top: 56px; border-top: 2px solid var(--ink); padding-top: 24px; }
.fav__combos-title { font-size: 30px; }
.combos { display: flex; gap: var(--gap); margin-top: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); scroll-padding-inline: var(--m); padding-bottom: 4px; }
.combos::-webkit-scrollbar { display: none; }
.combo { position: relative; flex: 0 0 78%; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 300px; border-radius: var(--r-card); padding: 24px; }
.combo .sticker { width: 132px; }
.combo__side { position: absolute; right: 24px; top: 28px; font: 700 28px/1 var(--hand); letter-spacing: .03em; }
.combo .t-h3 { margin-top: 18px; font-size: 26px; }
.combo__desc { margin-top: 4px; font-size: 15px; line-height: 1.4; }
.combo__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 500; }
.combo .t-price { font-size: 20px; }
.fav__all { margin-top: 28px; }
@media (min-width: 768px) {
  .fav__top { grid-template-columns: 1fr 1fr; align-items: center; }
  .fav__list .t-display { font-size: 9vw; }
  .fav__list li { gap: 14px; }
  .fav__list .t-price { font-size: 14px; }
  .fav__combos-head { grid-template-columns: 1fr auto; align-items: baseline; }
  .fav__combos-title { font-size: 36px; }
  .combos { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1200px) {
  .fav__top { grid-template-columns: 1fr 480px; align-items: start; }
  .fav__list .t-display { font-size: 126px; }
  .fav__list li { gap: 20px; }
  .fav__list .t-price { font-size: 16px; margin-top: 22px; }
  .fav__art { margin-top: 30px; }
  .fav__combos-head { margin-top: 56px; padding-top: 28px; }
  .fav__combos-title { font-size: 40px; }
  .combos { grid-template-columns: repeat(4, 1fr); margin-top: 30px; }
}

/* ---------- 05 drinks & dessert ---------- */
.drinks__grid { display: grid; gap: 40px; }
.drinks__photo { aspect-ratio: 1; border-radius: var(--r-photo); overflow: hidden; }
.drinks__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.drinks__text .t-h2 { margin-top: 6px; }
.drinks__list { margin-top: 24px; border-bottom: 1.5px solid var(--line-ink); }
.drinks__list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 12px 0 13px; border-top: 1.5px solid var(--line-ink); }
.drinks__name { font-size: 15px; color: var(--ink-2); }
.drinks__name b { font: 800 22px/1.2 var(--display); color: var(--ink); margin-right: 6px; letter-spacing: -0.01em; }
.drinks__vol { grid-row: 2; font-size: 14px; color: var(--ink-2); }
.drinks__list .t-price { grid-row: 1 / span 2; align-self: center; font-size: 20px; text-align: right; }
.dessert { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 4px 16px; align-items: center; background: var(--paper); border-radius: var(--r-card); padding: 20px; margin-top: 36px; }
.dessert .sticker { width: 108px; margin: -34px 0 0 -30px; }
.dessert__text .t-hand { font-size: 22px; }
.dessert__name { font-size: 32px; margin-top: 2px; }
.dessert__desc { font-size: 15px; margin-top: 4px; }
.dessert__price { grid-column: 2; font-size: 22px; }
@media (min-width: 768px) {
  .drinks__photo { aspect-ratio: 16 / 10; }
  .drinks__list li { grid-template-columns: 1fr 80px 120px; }
  .drinks__vol { grid-row: auto; }
  .drinks__list .t-price { grid-row: auto; }
  .dessert { grid-template-columns: 136px 1fr auto; padding: 24px; }
  .dessert .sticker { width: 150px; margin: -44px 0 -20px -44px; }
  .dessert__price { grid-column: auto; }
}
@media (min-width: 1200px) {
  .drinks__grid { grid-template-columns: minmax(0, 560fr) minmax(0, 676fr); gap: 76px; align-items: start; }
  .drinks__photo { aspect-ratio: 560 / 772; }
  .drinks__text { padding-top: 0; }
  .drinks__text .t-h2 { font-size: 88px; }
  .drinks__list { margin-top: 20px; }
  .drinks__list li { grid-template-columns: 1fr 126px 140px; padding: 12px 0 13px; }
  .drinks__name b { font-size: 24px; }
  .drinks__list .t-price { font-size: 22px; }
  .dessert { grid-template-columns: 136px 1fr auto; margin-top: 42px; padding: 28px 24px 28px 28px; }
  .dessert .sticker { width: 176px; margin: -48px 0 -24px -48px; }
  .dessert__name { font-size: 40px; }
  .dessert__price { font-size: 24px; align-self: start; margin-top: 44px; }
}

/* ---------- 06 visit (layout in base.css) ---------- */
@media (min-width: 768px) and (max-width: 1199px) { .visit__head .t-display { font-size: 10vw; } }
@media (min-width: 1200px) { .visit__head .t-display { font-size: 104px; } }