/* HOME — page layout only (components live in style.css) */

/* Japanese copy: break at phrase boundaries instead of mid-word */
.visit__note { word-break: auto-phrase; text-wrap: pretty; }
.nobr { display: inline-block; }


/* ---------- hero ---------- */
.hero { padding-block: 88px 118px; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 48px;
  grid-template-areas: "text media" "actions media"; align-content: center;
}
.hero__text { grid-area: text; align-self: end; }
.hero__pills { --cluster: 6px 8px; }
.hero__title { margin-top: 26px; }
.hero__lead { margin-top: 30px; }
.hero__actions { grid-area: actions; margin-top: 29px; }
.hero__btns { --cluster: 14px 16px; }
.hero__info { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 34px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.hero__info li { display: flex; align-items: center; gap: 8px; }
.hero__info .icon { width: 18px; height: 18px; }
.hero__hours { font-family: var(--font-label); font-weight: 800; font-size: 13px; letter-spacing: 0.05em; }
.hero__media { grid-area: media; align-self: center; justify-self: end; position: relative; width: min(100%, 540px); margin: 0 18px 24px 0; }
.hero__photo { aspect-ratio: 540 / 468; }
.hero__sticker { --size: 168px; --rot: -12deg; position: absolute; top: -84px; right: -52px; }
.hero__badge { position: absolute; left: -45px; bottom: -64px; width: 158px; }

@media (max-width: 899px) {
  .hero { padding-block: 28px 48px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "media" "actions"; }
  .hero__title, .hero__lead { margin-top: 20px; }
  .hero__lead { font-weight: 500; }
  .hero__media { justify-self: start; width: auto; max-width: 600px; margin: 46px 12px 0 8px; }
  .hero__photo { aspect-ratio: 332 / 270; box-shadow: 10px 10px 0 var(--ink); }
  .hero__sticker { --size: 100px; top: -41px; right: -10px; }
  .hero__badge { left: -11px; bottom: -32px; width: 100px; }
  .hero__actions { margin-top: 52px; }
  .hero__info { flex-direction: column; margin-top: 20px; }
}
@media (max-width: 767px) {
  .hero__lead br { display: none; }
  .hero__pills .pill { padding: 6px 12px; font-size: 11px; }
}

/* ---------- section head + button + body (button drops below the body on phones) ---------- */
.split__body { flex-basis: 100%; margin-top: 32px; }
@media (min-width: 768px) {
  .order__cards, .ig__tiles { margin-top: 24px; }
}
/* the sub line was removed in Figma but its space kept: the title sits above the button like the other sections.
   Only while title and button share a row (container ≥ 1216px); below that the button wraps under the title. */
@media (min-width: 1360px) { .ig .sec-head { padding-bottom: 49px; } }
@media (max-width: 767px) {
  .split { row-gap: 30px; }
  .split__body { order: 1; margin-top: 2px; }
  .split__btn { order: 2; }
}

/* ---------- 01 lineup ---------- */
/* photo labels: four across (two on phones) so the lineup stays a compact row */
.lineup__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px clamp(16px, 2vw, 28px); }
.lineup__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; }
.lineup__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; line-height: 1.4; white-space: nowrap; }
.lineup__price { font-family: var(--font-label); font-weight: 800; font-size: 19px; line-height: 1; white-space: nowrap; }
.lineup__note { margin-top: 64px; }
@media (min-width: 768px) {
  /* Figma stretches each label 32px wider than its 600px content (632 × 375 at 1440): content scales from 600/632 of the cell */
  .lineup .label-card { width: calc(100% * 600 / 632); margin-inline: auto; }
  .lineup .label-card__body { margin-inline: -2.67cqi; }
}
@media (min-width: 1100px) {
  .lineup__name { font-size: 16px; }
  .lineup__price { font-size: 22px; }
}
@media (max-width: 767px) {
  .lineup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .lineup__meta { margin-top: 12px; gap: 8px; }
  .lineup__note { margin-top: 30px; }
}
@media (max-width: 359px) {
  .lineup__name { font-size: 11px; }
}

/* ---------- 02 what's inside (stage + list; motion in js/burger.js) ---------- */
.inside__grid {
  display: grid; grid-template-columns: 544px minmax(0, 1fr); column-gap: 88px;
  grid-template-areas: "pin head" "pin list" "pin btn"; align-content: center;
}
.inside .sec-head { grid-area: head; }
.inside__pin { grid-area: pin; align-self: center; }
.inside__btn { grid-area: btn; justify-self: start; margin-top: 38px; }

.stage {
  position: relative; width: min(100%, 544px); aspect-ratio: 544 / 680; container-type: inline-size;
  background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 24px; overflow: hidden;
}
.stage__pec { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 42cqi; line-height: 1; color: var(--cream-deep); user-select: none; }
.stage__counter { position: absolute; top: 5.6cqi; left: 5.4cqi; font-family: var(--font-label); font-weight: 800; font-size: max(11px, 2.4cqi); line-height: 1.2; letter-spacing: 0.12em; }
.burger { position: absolute; left: 5.9%; top: 6.8%; width: 88.2%; aspect-ratio: 480 / 580; }
.burger > * { position: absolute; }
.burger__plate { left: 6.25%; top: 90%; width: 87.5%; height: 6.9%; border-radius: 50%; background: rgba(27, 15, 12, 0.14); }
/* final (assembled) rects from the 480 × 580 design box */
.burger__layer:nth-of-type(1) { left: 15.63%; top: 74.83%; width: 75%; }
.burger__layer:nth-of-type(2) { left: 8.96%; top: 60.69%; width: 85.83%; }
.burger__layer:nth-of-type(3) { left: 4.17%; top: 45.69%; width: 91.88%; }
.burger__layer:nth-of-type(4) { left: 14.38%; top: 38.62%; width: 77.29%; }
.burger__layer:nth-of-type(5) { left: 13.75%; top: 31.72%; width: 75.63%; }
.burger__layer:nth-of-type(6) { left: 18.13%; top: 26.03%; width: 68.96%; }
.burger__layer:nth-of-type(7) { left: 14.38%; top: 5.17%; width: 78.54%; }
.stage__bar { position: absolute; left: 5.4cqi; right: 5.4cqi; bottom: 5.9cqi; display: flex; gap: 1.1cqi; }
.stage__bar li { flex: 1; height: 1.5cqi; border-radius: 1cqi; background: var(--ink); }
.stage__bar li.is-todo { background: rgba(27, 15, 12, 0.15); }
.stage__ready { --size: 24.6cqi; --rot: -10deg; position: absolute; top: 1cqi; right: 4.4cqi; }

.layers { grid-area: list; margin-top: 40px; border-bottom: 1px solid var(--cream); }
.layers li { display: flex; align-items: center; gap: 20px; min-height: 63px; padding-block: 8px; border-top: 1px solid var(--cream); }
.layers li.is-todo { opacity: 0.3; }
.layers__num { font-family: var(--font-label); font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: 0.06em; color: var(--pec-bg); white-space: nowrap; }
.layers__name { flex: 1; font-family: var(--font-display); font-size: 28px; line-height: 1.1; }
.layers__jp { font-size: 13px; line-height: 1.5; letter-spacing: 0.06em; text-align: right; color: rgba(251, 245, 232, 0.72); }
.layers li.is-current .layers__name { color: var(--pec-bg); }
.layers li.is-current .layers__num::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--pec-bg); }

.inside__caption { display: none; }
/* while pinned the whole grid (837px) must fit under the header: tighten the rows on ~900px-tall screens */
@media (min-width: 900px) and (max-height: 940px) { .layers li { min-height: 57px; } }

@media (max-width: 899px) {
  .inside__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "pin" "btn"; }
  .inside__pin { margin-top: 36px; }
  .inside__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 26px; color: var(--pec-bg); }
  .inside__caption::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pec-bg); }
  .inside__cap-num { font-family: var(--font-label); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; }
  .inside__cap-name { font-family: var(--font-display); font-size: 30px; line-height: 1.1; }
  .inside__cap-jp { font-size: 13px; color: rgba(251, 245, 232, 0.85); }
  .inside__btn { margin-top: 40px; }
  /* the 7-row list stays for screen readers; the caption replaces it visually */
  .layers { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- 03 order ---------- */
.order__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.order__cards .phrase-card { height: 100%; }
@media (max-width: 899px) { .order__cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 04 instagram ---------- */
.ig .sec-head__title { font-size: clamp(30px, 9.4vw, 96px); }
.ig__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ig__tile { aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--cream-deep); }
.ig__tile img { width: 100%; height: 100%; object-fit: cover; }
.ig__tile--hot { container-type: inline-size; display: grid; place-content: center; justify-items: center; background: var(--hot-bg); color: var(--hot-ink); }
.ig__hot { font-family: var(--font-display); font-size: 40cqi; line-height: 0.9; }
.ig__flavor { margin-top: 3cqi; font-family: var(--font-label); font-weight: 800; font-size: max(10px, 4.3cqi); line-height: 1.2; letter-spacing: 0.14em; }
.ig__tile--mascot { background: var(--kindai-bg); }
.ig__tile--mascot img { mix-blend-mode: multiply; }
/* live posts (js/instagram.js) */
.ig__link { position: relative; display: block; width: 100%; height: 100%; }
.ig__link img { transition: transform 300ms ease; }
.ig__link:hover img { transform: scale(1.04); }
.ig__link:focus-visible { outline-offset: -5px; }
.ig__badge { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: 2px solid var(--ink); font-size: 12px; padding-left: 2px; }
@media (max-width: 767px) { .ig__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 29px 16px; } }

/* ---------- 05 visit ---------- */
.visit__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: 72px;
  grid-template-areas: "head map" "info map" "btn map"; align-content: center;
}
.visit__grid .sec-head { grid-area: head; }
.visit__sup { font-size: 0.5em; vertical-align: 0; position: relative; top: -0.78em; margin-left: 0.04em; }
.visit__info { grid-area: info; margin-top: 36px; }
.visit__hours { font-size: clamp(40px, 3.9vw, 56px); line-height: 1.02; }
.visit__note { margin-top: 28px; }
.visit__addr { display: flex; align-items: flex-start; gap: 10px; margin-top: 34px; line-height: 1.7; }
.visit__addr .icon { width: 20px; height: 20px; margin-top: 3px; }
.visit__map { grid-area: map; align-self: center; height: 440px; border: var(--border); border-radius: 24px; overflow: hidden; background: var(--cream); }
.visit__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.visit__btn { grid-area: btn; justify-self: start; margin-top: 32px; }
@media (max-width: 899px) {
  .visit__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "info" "map" "btn"; }
  .visit__addr { margin-top: 30px; }
  .visit__map { height: 360px; margin-top: 28px; }
  .visit__btn { margin-top: 30px; }
}
@media (max-width: 767px) {
  .visit__info { margin-top: 32px; }
  .visit__note, .visit__addr { font-size: 14px; }
  .visit__sep { display: none; }
  .visit__line { display: block; }
  .visit__map { height: 220px; }
}