/* ---------------- HERO (the signature) ---------------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-top: calc(var(--space-10) + var(--space-4)); padding-bottom: var(--space-9);
  padding-inline: var(--edge);
}
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 60rem; }
.hero-title { font-family: var(--font-display); line-height: 0.9; letter-spacing: -0.03em; margin-bottom: var(--space-5); display: flex; flex-direction: column; align-items: center; }
.hero-title .hg { font-style: italic; font-weight: 300; font-size: clamp(var(--ms-4), 8vw, var(--ms-6)); color: var(--on-char-muted); line-height: 1; }
.hero-title .hb { font-weight: 700; font-size: clamp(var(--ms-7), 20vw, 11rem); color: var(--on-char); line-height: 0.9; background: linear-gradient(180deg, #fff5ea, var(--gold) 55%, var(--gold-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 24px rgba(var(--ember), 0.35)); }

.hero-stage { position: relative; width: min(88vw, 34rem); margin-block: var(--space-4) var(--space-6); aspect-ratio: 4 / 3; }
.hero-dish { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); border-radius: var(--r-xl); }
.hero-stage:has(.hero-dish[src$=".webp"]) .hero-dish { object-fit: cover; }
.hero-fire { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); z-index: 1; display: flex; gap: var(--space-2); filter: blur(1px); }
.hero-fire .flame { width: 3.2rem; height: 4rem; transform-origin: bottom center; animation: flick 1.6s ease-in-out infinite; }
.hero-fire .flame:nth-child(2) { width: 4.6rem; height: 5.8rem; animation-duration: 1.3s; animation-delay: -0.4s; }
.hero-fire .flame:nth-child(3) { animation-duration: 1.9s; animation-delay: -0.8s; }
@keyframes flick { 0%,100%{ transform: translateX(-50%) scaleY(1) rotate(-1deg); opacity: 0.9; } 50%{ transform: translateX(-50%) scaleY(1.12) rotate(1.5deg); opacity: 1; } }
.steam { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.steam i { position: absolute; top: 8%; width: 12px; height: 42px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%); filter: blur(6px); opacity: 0; animation: steam 4.5s ease-in infinite; }
.steam i:nth-child(1){ left: 34%; animation-delay: 0s; } .steam i:nth-child(2){ left: 46%; animation-delay: 0.9s; }
.steam i:nth-child(3){ left: 58%; animation-delay: 1.8s; } .steam i:nth-child(4){ left: 40%; animation-delay: 2.6s; } .steam i:nth-child(5){ left: 64%; animation-delay: 3.4s; }
@keyframes steam { 0%{ opacity: 0; transform: translateY(20px) scale(0.8); } 30%{ opacity: 0.7; } 100%{ opacity: 0; transform: translateY(-90px) scale(1.5); } }

.hero-lead { max-width: 40rem; color: var(--on-char-muted); font-size: var(--ms-1); line-height: 1.55; margin-bottom: var(--space-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.hero-stamp { position: absolute; z-index: 3; right: clamp(1rem, 5vw, 5rem); bottom: clamp(1rem, 6vw, 4rem); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--gold); font-family: var(--font-display); font-style: italic; }
.hero-stamp .flame { width: 1.6rem; height: 2rem; }
.hero-stamp em { font-size: var(--ms-1); }
.scroll-cue { position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%); z-index: 3; width: 26px; height: 42px; border: 2px solid color-mix(in srgb, var(--on-char) 40%, transparent); border-radius: var(--r-pill); }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: var(--gold); border-radius: 2px; animation: cue 1.8s var(--ease-standard) infinite; }
@keyframes cue { 0%{ opacity: 0; transform: translateY(0); } 40%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(14px); } }

/* ---------------- CREED ---------------- */
.creed { background: var(--paper); padding-block: var(--section-y); text-align: center; }
.creed-line { font-family: var(--font-display); font-size: clamp(var(--ms-4), 6vw, var(--ms-6)); color: var(--ink); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--space-5); }
.creed-body { max-width: 46rem; margin-inline: auto; font-size: var(--ms-2); line-height: 1.5; color: var(--ink-2); }

/* ---------------- SIGNATURE RAIL ---------------- */
.signature { background: var(--paper-2); padding-block: var(--section-y); overflow: clip; }
.sig-head { text-align: center; margin-bottom: var(--space-7); }
.sig-head h2 { font-size: clamp(var(--ms-4), 6vw, var(--ms-6)); color: var(--ink); }
.sig-head p { color: var(--ink-muted); margin-top: var(--space-3); font-size: var(--ms-1); }
.sig-rail { cursor: grab; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.sig-rail::-webkit-scrollbar { display: none; }
.sig-rail.is-grabbing { cursor: grabbing; }
.sig-track { display: flex; gap: var(--gutter); padding-inline: max(var(--edge), calc((100% - var(--shell)) / 2 + var(--edge))); width: max-content; }
.sig { scroll-snap-align: center; width: clamp(15rem, 34vw, 20rem); flex: none; }
.sig-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e3); background: var(--ink); }
.sig-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-cinematic) var(--ease-expressive); }
.sig:hover .sig-media img { transform: scale(1.06); }
.sig-noimg { display: flex; align-items: center; justify-content: center; height: 100%; }
.sig-noimg .flame { width: 4rem; height: 5rem; }
.sig-heat { position: absolute; top: var(--space-3); right: var(--space-3); background: color-mix(in srgb, var(--char) 70%, transparent); backdrop-filter: blur(4px); border-radius: var(--r-pill); width: 34px; height: 34px; display: grid; place-items: center; }
.sig-heat .chili { width: 1rem; height: 1rem; }
.sig figcaption { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: var(--space-4); gap: var(--space-1); }
.sig-name { font-family: var(--font-display); font-size: var(--ms-2); font-weight: 600; color: var(--ink); }
.sig-kr { font-size: var(--ms-dn1); color: var(--ink-muted); }
.sig-price { font-family: var(--font-text); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); margin-top: var(--space-1); }
.sig-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); width: clamp(12rem, 24vw, 15rem); aspect-ratio: 4 / 5; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink); font-family: var(--font-display); font-size: var(--ms-2); }
.sig-more svg { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.sig-more:hover { background: var(--paper-3); }

/* ---------------- LIVING (menu in pocket) ---------------- */
.living { background: var(--paper); padding-block: var(--section-y); }
.living-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-9); align-items: center; }
.living-copy { text-align: left; }
.living-copy h2 { font-size: clamp(var(--ms-4), 5vw, var(--ms-6)); color: var(--ink); margin-bottom: var(--space-4); }
.living-copy p { font-size: var(--ms-1); color: var(--ink-2); line-height: 1.55; margin-bottom: var(--space-6); }
.living-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 24rem; }
.phone { width: 15rem; aspect-ratio: 9 / 19; background: var(--char); border-radius: var(--r-xl); padding: var(--space-3); box-shadow: var(--e4); border: 2px solid var(--char-3); }
.phone-screen { height: 100%; border-radius: calc(var(--r-xl) - var(--space-2)); background: linear-gradient(180deg, var(--char-2), var(--char)); display: flex; flex-direction: column; align-items: center; padding: var(--space-5) var(--space-4); gap: var(--space-2); }
.phone-mark { }
.phone-mark .flame { width: 2rem; height: 2.5rem; }
.phone-word { font-family: var(--font-display); color: var(--gold); font-style: italic; font-size: var(--ms-1); margin-bottom: var(--space-3); }
.phone-row { width: 100%; display: flex; justify-content: space-between; align-items: baseline; color: var(--on-char); font-size: var(--ms-dn1); padding-block: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--on-char) 12%, transparent); }
.phone-row i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--gold); }
.phone-row.phone-live { justify-content: center; border: 0; color: var(--on-char-muted); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.6rem; margin-top: auto; }
.phone-live em { color: var(--accent); font-style: normal; font-weight: 700; margin-right: 0.4em; }
.qr { position: absolute; right: 8%; bottom: 6%; width: 8rem; height: 8rem; background: var(--paper); padding: var(--space-2); border-radius: var(--r-md); box-shadow: var(--e3); }

/* ---------------- STORY TEASER ---------------- */
.story-teaser { padding-block: var(--section-y); text-align: center; }
.story-teaser h2 { font-size: clamp(var(--ms-4), 6vw, var(--ms-6)); }
.story-teaser p { max-width: 44rem; margin: var(--space-4) auto var(--space-5); color: var(--on-char-muted); font-size: var(--ms-1); line-height: 1.55; }
.story-teaser .link-arrow { color: var(--gold); }

@media (max-width: 64rem) {
  .living-grid { grid-template-columns: 1fr; gap: var(--space-7); text-align: center; }
  .living-copy { text-align: center; }
  .living-copy .btn { margin-inline: auto; }
}
@media (max-width: 48rem) {
  .hero-stamp { display: none; }
  .hero-title .hb { font-size: clamp(4rem, 22vw, 7rem); }
  .qr { position: static; margin-top: var(--space-5); }
  .living-visual { flex-direction: column; gap: var(--space-4); }
}