/* Kumo Ramen — this build's sections, composed from the Fenzo DNA (tokens, type scale, square cards, buttons, bands).
   Load after fenzo.css. Tokens only. */

.logo .mark { width: 38px; height: 30px; }

/* Sticker badges (art group: sticker-badge) — flat one-colour marks, a little rotated, a word on top */
.k-badge { position: absolute; z-index: 3; display: grid; place-items: center; width: 120px; aspect-ratio: 1; color: var(--accent); pointer-events: none; }
.k-badge__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-badge__txt { position: relative; font: 500 17px/1.05 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; text-align: center; color: var(--on-accent); }

/* HERO (hero-b): centred photo hero, copy at the bottom, a scalloped badge on the photo's quiet corner */
.k-hero.phero { height: clamp(640px, 62.5vw, 900px); }
.k-hero > img { object-position: 50% 0%; }
.k-hero .phero__copy { max-width: 1040px; gap: 24px; padding-bottom: 56px; }
.k-hero__lead { color: var(--on-dark); max-width: 560px; }
.k-hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.k-badge--hero { right: max(20px, (100% - var(--wide)) / 2); top: 132px; transform: rotate(12deg); }

/* BROTH CLOCK [new]: copy + an 18-hour timeline left, the tall pot photo right */
.k-broth__in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.k-broth__copy { display: flex; flex-direction: column; gap: 28px; }
.k-eyebrow { color: var(--accent); }
.k-broth__copy .t-lead { max-width: 520px; }
.k-clock { display: grid; }
.k-clock__row { display: grid; grid-template-columns: 148px 1fr; gap: 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line-2); }
.k-clock__row:last-child { border-bottom: 1px solid var(--line-2); }
.k-clock__time { font: 500 28px/1.2 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.k-clock__what { font: 400 16px/1.52 var(--font); color: var(--text-2); }
.k-clock__row.is-on .k-clock__time { color: var(--accent); }
.k-clock__row.is-on .k-clock__what { color: var(--text); font-weight: 500; }
.k-broth__pair { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 4px; }
.k-broth__pair img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.k-broth__big { position: relative; min-height: 640px; overflow: hidden; }
.k-broth__big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-badge--broth { left: 28px; bottom: 28px; color: var(--zest); transform: rotate(-10deg); }
.k-badge--broth .k-badge__txt { color: var(--text); font-size: 22px; }

/* MENU STAGE (signature, sig-1): the tilted bowls on the olive band; a cloud sticker replaces the squiggle */
.k-stage .stage__band { background: var(--band-2); }
.k-badge--stage { left: 43cqw; top: 15.4cqw; width: 15cqw; aspect-ratio: 124 / 96; color: var(--zest); transform: rotate(9deg); }
.k-badge--stage .k-badge__txt { color: var(--text); font-size: max(14px, 1.55cqw); padding-top: 1.2cqw; }

/* TWO BROTHS [new]: centred head, two white bowl cards with the facts as hairline rows */
.k-duo__head { width: min(600px, 100%); margin: 0 auto var(--head-gap); display: grid; gap: 24px; text-align: center; justify-items: center; }
.k-duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); }
.k-bowl { background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 28px; }
.k-bowl__ph { overflow: hidden; }
.k-bowl__ph img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform .9s var(--ease); }
.k-bowl:hover .k-bowl__ph img { transform: scale(1.04); }
.k-bowl__body { display: grid; gap: 20px; padding: 0 8px 8px; }
.k-bowl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.k-bowl__facts { margin: 0; display: grid; }
.k-bowl__facts > div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.k-bowl__facts dt { font: 600 16px/1.52 var(--font); color: var(--text); }
.k-bowl__facts dd { margin: 0; font: 400 16px/1.52 var(--font); color: var(--text-2); }

/* LATE NIGHT [new]: full-bleed night photo, a local shade behind the copy, a white hours card */
.k-late { position: relative; min-height: 820px; display: flex; align-items: flex-end; overflow: hidden; background: var(--shade); }
.k-late__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.k-late::before { content: ""; position: absolute; inset: 0 30% 0 0; background: linear-gradient(90deg, rgba(29, 29, 29, .82) 0%, rgba(29, 29, 29, .5) 50%, rgba(29, 29, 29, 0) 100%); mix-blend-mode: multiply; z-index: 1; pointer-events: none; }
.k-late__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 413px; gap: 64px; align-items: end; padding-block: 96px; }
.k-late__copy { display: grid; gap: 24px; max-width: 560px; }
.k-late__copy .t-h2 { color: var(--on-dark); }
.k-late__copy .t-lead { color: var(--on-dark); }
.k-late__card { background: var(--surface); padding: 32px; display: grid; gap: 20px; }
.k-late__ph { overflow: hidden; margin: -32px -32px 4px; }
.k-late__ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.k-late__list { display: grid; }
.k-late__list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-2); font: 400 16px/1.52 var(--font); color: var(--text-2); }
.k-late__list li:last-child { border-bottom: 1px solid var(--line-2); }
.k-late__list span { display: inline-flex; align-items: center; gap: 10px; }
.k-late__list .ic { width: 18px; height: 18px; color: var(--accent); }
.k-late__list strong { font-weight: 600; color: var(--text); white-space: nowrap; }

/* HOW TO GET A SEAT [new]: photo left, three numbered steps right on hairlines */
.k-seats__in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.k-seats__ph { position: relative; min-height: 560px; overflow: hidden; }
.k-seats__main { position: absolute; inset: 0 18% 14% 0; width: 82%; height: 86%; object-fit: cover; }
.k-seats__inset { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5; object-fit: cover; border: 10px solid var(--bg); }
.k-seats__copy { display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.k-steps { display: grid; margin-top: 8px; }
.k-step { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line-2); }
.k-step:last-child { border-bottom: 1px solid var(--line-2); }
.k-step__n { font: 500 36px/1 var(--font-display); letter-spacing: -.02em; color: var(--accent); }
.k-step > div { display: grid; gap: 8px; }

/* GUESTS: the notebook notes on the deep wine band */
.k-guests__head { display: grid; gap: 16px; }
.k-guests__count { display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1.52 var(--font); color: var(--on-dark-2); }
.k-guests .k-guests__count .stars { color: var(--zest); }

/* BOOK (cta-c): photo left, form on a white panel right */
.k-book__in > img { object-position: 50% 30%; }

/* FOOTER (footer-c): the counter photo melting into the olive band */
.k-foot { margin-top: var(--section); }
.k-foot .v-fc__ph::after { background: linear-gradient(180deg, transparent 30%, var(--band-2) 100%); }
.k-foot .logo .mark { color: var(--zest); }
.k-foot__line { color: var(--on-dark); margin-top: 20px; max-width: 360px; }

@media (max-width: 1100px) {
  .k-stage .menu-card::before { background: radial-gradient(circle at 0 50%, var(--band-2) 13px, transparent 14px) 0 0 / 28px 72px repeat-y; }
  .k-badge--stage { display: none; }
  .k-late__in { grid-template-columns: 1fr 360px; gap: 40px; }
}
@media (max-width: 900px) {
  .k-broth__in, .k-seats__in { grid-template-columns: 1fr; gap: 40px; }
  .k-broth__big { min-height: 0; aspect-ratio: 4 / 5; order: -1; }
  .k-seats__ph { min-height: 0; aspect-ratio: 1; }
  .k-late__in { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .k-badge { width: 84px; }
  .k-badge__txt { font-size: 13px; }
  .k-badge--hero { top: 92px; right: 20px; }
  .k-badge--broth { left: 16px; bottom: 16px; }
  .k-badge--broth .k-badge__txt { font-size: 16px; }
  .k-hero .phero__copy { gap: 20px; padding-bottom: 40px; }
  .k-hero__btns { flex-direction: column; align-items: stretch; width: 100%; }
  .k-hero__btns .btn { width: 100%; }
  .k-clock__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .k-clock__time { font-size: 22px; }
  .k-broth__pair { gap: 10px; }
  .k-duo__grid { grid-template-columns: 1fr; }
  .k-bowl { padding: 16px; gap: 20px; }
  .k-bowl__body { padding: 0; }
  .k-bowl__facts > div { grid-template-columns: 88px 1fr; }
  .k-late { min-height: 0; }
  .k-late::before { inset: 0; background: linear-gradient(0deg, rgba(29, 29, 29, .92) 0%, rgba(29, 29, 29, .82) 45%, rgba(29, 29, 29, .2) 85%); }
  .k-late__in { padding-block: 280px 40px; gap: 28px; }
  .k-late__card { padding: 24px 20px; }
  .k-late__ph { margin: -24px -20px 4px; }
  .k-step { grid-template-columns: 52px 1fr; gap: 14px; padding: 20px 0; }
  .k-step__n { font-size: 28px; }
  .rail-head { flex-wrap: wrap; }
}

/* Guests sit on the deep wine band so the olive stays with the menu stage and the footer */
.k-guests { background: var(--band); }