/* Shared food interactions, reviews and Instagram; direction styles override the palette. */
/* Stack ("Two thighs. One bun."): the burger rests assembled. With JS and motion allowed (.is-live) the stage pins
   and site.js writes one 0→1 track per layer (--t) as the page scrolls; each layer comes in from its side and lands,
   bottom bun first. Layer sizes and resting positions are in stack.css (tools/stack.py). */
:is(.dir-b-night, .dir-c-sauce) .stack { background: var(--page); }
:is(.dir-b-night, .dir-c-sauce) .stack .stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; column-gap: clamp(24px, 5vw, 96px); padding: clamp(72px, 9vw, 140px) var(--gutter); overflow: hidden; overflow: clip; }
:is(.dir-b-night, .dir-c-sauce) .pile-wrap { display: grid; justify-items: center; }
:is(.dir-b-night, .dir-c-sauce) .pile { position: relative; width: min(34vw, calc(72vh * var(--pile-ar)), 520px); }
/* the pendant's glow behind the burger and its shadow on the dark below */
:is(.dir-b-night, .dir-c-sauce) .pile::before { content: ""; position: absolute; inset: -22% -34% -10%; background: radial-gradient(closest-side, rgb(226 128 38 / .34) 0, rgb(176 86 30 / .15) 48%, rgb(5 18 35 / 0) 100%); pointer-events: none; }
:is(.dir-b-night, .dir-c-sauce) .pile::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -3.5%; height: 9%; border-radius: 50%; background: rgb(1 5 12 / .78); filter: blur(18px); pointer-events: none; }
:is(.dir-b-night, .dir-c-sauce) .layer { position: absolute; height: auto; max-width: none; }
:is(.dir-b-night, .dir-c-sauce) .call { position: absolute; right: calc(100% + clamp(10px, 1.6vw, 26px)); z-index: 9; transform: translateY(-50%); white-space: nowrap; font: 600 .78rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
:is(.dir-b-night, .dir-c-sauce) .stack .copy { max-width: 560px; }

@media (max-width: 1023px) {
  :is(.dir-b-night, .dir-c-sauce) .stack .stage { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: calc(var(--header-h) + 28px) var(--gutter) 48px; }
  /* the pile gives way on short screens so the words and the link under it stay on the pinned stage */
  :is(.dir-b-night, .dir-c-sauce) .pile { width: min(56vw, calc(54vh * var(--pile-ar)), calc((100vh - 330px) * var(--pile-ar)), 420px); margin-left: 14vw; }
  :is(.dir-b-night, .dir-c-sauce) .call { font-size: .7rem; letter-spacing: .12em; right: calc(100% + 10px); }
}

@media (max-width: 700px) {
  :is(.dir-b-night, .dir-c-sauce) .stack .stage { row-gap: 20px; }
  :is(.dir-b-night, .dir-c-sauce) .pile { width: min(56vw, calc(46vh * var(--pile-ar)), calc((100vh - 440px) * var(--pile-ar))); }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  /* A link to #burgers must land on the finished burger: the negative scroll margin makes the browser's own
     anchor scroll stop at the end of the pinned travel (no script race with the browser's scroll). */
  :is(.dir-b-night, .dir-c-sauce) .stack.is-live { --travel: 85vh; height: calc(100vh + var(--travel)); scroll-margin-top: calc(-1 * var(--travel)); }
  :is(.dir-b-night, .dir-c-sauce) .stack.is-live .stage { position: sticky; top: 0; height: 100vh; padding-top: var(--header-h); padding-bottom: 0; }
  :is(.dir-b-night, .dir-c-sauce) .stack.is-live .layer {
    --k: calc(1 - var(--t, 1));
    opacity: var(--o, 1);
    transform: translate3d(calc(var(--k) * var(--dx)), calc(var(--k) * var(--dy, -3vh)), 0) rotate(calc(var(--k) * var(--rot)));
    will-change: transform, opacity;
  }
  /* Each layer starts just beside the burger, inside its own width (준 09-30: not from far away), and fades in. */
  :is(.dir-b-night, .dir-c-sauce) .stack .layer:nth-of-type(odd) { --dx: -42%; --rot: -6deg; }
  :is(.dir-b-night, .dir-c-sauce) .stack .layer:nth-of-type(even) { --dx: 42%; --rot: 6deg; }
  :is(.dir-b-night, .dir-c-sauce) .stack.is-live .pile::before { opacity: calc(.35 + .65 * var(--glow, 1)); }
  :is(.dir-b-night, .dir-c-sauce) .stack.is-live .pile::after { opacity: var(--glow, 1); transform: scaleX(calc(.55 + .45 * var(--glow, 1))); }
  :is(.dir-b-night, .dir-c-sauce) .stack.is-live .call-1 { opacity: var(--c1, 1); }
  :is(.dir-b-night, .dir-c-sauce) .stack.is-live .call-2 { opacity: var(--c2, 1); }
  @media (max-width: 1023px) {
    :is(.dir-b-night, .dir-c-sauce) .stack.is-live { --travel: 72vh; }
    :is(.dir-b-night, .dir-c-sauce) .stack.is-live .stage { height: 100vh; height: 100svh; align-content: center; padding-top: calc(var(--header-h) + 12px); }
  }
}

/* Wings spotlight ("Honey Soy. Red Pepper. Snowing Cheese."): the restaurant's photos cut out and set on their own
   backdrop orange (--spot, sampled by tools/optimize.py). The middle wing is large, the others smaller either side;
   site.js moves the next one to the middle every 1.5 s and on hover. data-pos 0 | 1 | 2 = left | middle | right. */
:is(.dir-b-night, .dir-c-sauce) .spot { --spot-ink: #0B1424; background: var(--spot, #EB8645); color: var(--spot-ink); padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(48px, 6vw, 88px); display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 34px); overflow: hidden; overflow: clip; }
:is(.dir-b-night, .dir-c-sauce) .spot .copy { justify-items: center; text-align: center; max-width: 1000px; }
:is(.dir-b-night, .dir-c-sauce) .spot .label, :is(.dir-b-night, .dir-c-sauce) .spot .h2, :is(.dir-b-night, .dir-c-sauce) .spot .line, :is(.dir-b-night, .dir-c-sauce) .spot .link { color: var(--spot-ink); }
:is(.dir-b-night, .dir-c-sauce) .spot .label { color: rgb(11 20 36 / .78); }  /* softer ink by colour, not opacity, so the words count as fully shown */
:is(.dir-b-night, .dir-c-sauce) .spot .line { color: rgb(11 20 36 / .86); max-width: 40em; }
:is(.dir-b-night, .dir-c-sauce) .spot .band-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 24px; }
:is(.dir-b-night, .dir-c-sauce) .spot-row { display: grid; width: min(100%, 1280px); }
:is(.dir-b-night, .dir-c-sauce) .spot-item { grid-area: 1 / 1; justify-self: center; width: 40%; transform-origin: 50% 45%; transition: transform 1.4s var(--ease), opacity .9s var(--ease); } /* 준 09-30: half the speed */
:is(.dir-b-night, .dir-c-sauce) .spot-item a { display: grid; justify-items: center; text-decoration: none; color: inherit; }
:is(.dir-b-night, .dir-c-sauce) .spot-item img { width: 100%; filter: drop-shadow(0 22px 24px rgb(110 40 0 / .28)); }
:is(.dir-b-night, .dir-c-sauce) .spot-item .big { font: 400 clamp(1.7rem, 1.2rem + 1.7vw, 2.8rem)/1 var(--display); letter-spacing: var(--h-track, 0); text-transform: uppercase; margin-top: -1%; }
:is(.dir-b-night, .dir-c-sauce) .spot-item .small { font-family: var(--ko); font-size: 1.05rem; opacity: .72; }
:is(.dir-b-night, .dir-c-sauce) .spot-item[data-pos="1"] { z-index: 3; transform: none; }
:is(.dir-b-night, .dir-c-sauce) .spot-item[data-pos="0"] { z-index: 2; transform: translateX(-86%) scale(.62); }
:is(.dir-b-night, .dir-c-sauce) .spot-item[data-pos="2"] { z-index: 2; transform: translateX(86%) scale(.62); }
:is(.dir-b-night, .dir-c-sauce) .spot-item.is-out { opacity: 0; transition: opacity .4s linear; }   /* the one that wraps from one side to the other */
:is(.dir-b-night, .dir-c-sauce) .spot-item.is-jump { transition: none; }
:is(.dir-b-night, .dir-c-sauce) .spot-toggle { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--spot-ink); font: 600 .95rem var(--body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; cursor: pointer; opacity: .8; }
:is(.dir-b-night, .dir-c-sauce) .spot-toggle:hover { opacity: 1; }
:is(.dir-b-night, .dir-c-sauce) .spot :focus-visible { outline-color: var(--spot-ink); }
@media (max-width: 700px) {
  :is(.dir-b-night, .dir-c-sauce) .spot-item { width: 62%; }
  :is(.dir-b-night, .dir-c-sauce) .spot-item[data-pos="0"] { transform: translateX(-72%) scale(.5); }
  :is(.dir-b-night, .dir-c-sauce) .spot-item[data-pos="2"] { transform: translateX(72%) scale(.5); }
}
@media (prefers-reduced-motion: reduce) { :is(.dir-b-night, .dir-c-sauce) .spot-item { transition: none; } }

/* Instagram ("From our feed."): the restaurant's posts as instant-film prints, clothespinned to twine that sags
   between the walls (a row is a .strand; .line is the body-text class). --drop is how far down the rope is at a print's position (fraction of --rope-h). */
:is(.dir-b-night, .dir-c-sauce) .insta { padding: clamp(64px, 8vw, 120px) 0 clamp(64px, 8vw, 120px); display: grid; gap: clamp(22px, 3vw, 40px); overflow: hidden; overflow: clip; }
:is(.dir-b-night, .dir-c-sauce) .insta > .copy { padding-inline: var(--gutter); justify-items: center; text-align: center; }
:is(.dir-b-night, .dir-c-sauce) .lines { display: grid; gap: clamp(26px, 4vw, 56px); }
:is(.dir-b-night, .dir-c-sauce) .strand { --rope-h: clamp(44px, 5vw, 66px); --row-gap: 36px; position: relative; }
:is(.dir-b-night, .dir-c-sauce) .rope { position: absolute; left: -2%; width: 104%; top: 0; height: var(--rope-h); overflow: visible; pointer-events: none; }
:is(.dir-b-night, .dir-c-sauce) .rope-b { display: none; }
:is(.dir-b-night, .dir-c-sauce) .rope .twine { fill: none; stroke: #C4A06D; stroke-width: 3px; vector-effect: non-scaling-stroke; }
:is(.dir-b-night, .dir-c-sauce) .rope .twist { fill: none; stroke: #7F5F36; stroke-width: 3px; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
:is(.dir-b-night, .dir-c-sauce) .strand ul { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(14px, 3vw, 48px); max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }
:is(.dir-b-night, .dir-c-sauce) .strand-3 ul { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
:is(.dir-b-night, .dir-c-sauce) .print { --r: 0deg; justify-self: center; width: min(100%, 244px); margin-top: calc(var(--rope-h) * var(--drop, .4) + 6px); transform: rotate(var(--r)); transform-origin: 50% 0; }
:is(.dir-b-night, .dir-c-sauce) .strand-4 .print:nth-child(1), :is(.dir-b-night, .dir-c-sauce) .strand-4 .print:nth-child(4) { --drop: .3; }
:is(.dir-b-night, .dir-c-sauce) .strand-4 .print:nth-child(2), :is(.dir-b-night, .dir-c-sauce) .strand-4 .print:nth-child(3) { --drop: .52; }
:is(.dir-b-night, .dir-c-sauce) .strand-3 .print:nth-child(1), :is(.dir-b-night, .dir-c-sauce) .strand-3 .print:nth-child(3) { --drop: .35; }
:is(.dir-b-night, .dir-c-sauce) .strand-3 .print:nth-child(2) { --drop: .55; }
:is(.dir-b-night, .dir-c-sauce) .print:nth-child(4n + 1) { --r: -3deg; }
:is(.dir-b-night, .dir-c-sauce) .print:nth-child(4n + 2) { --r: 2.4deg; }
:is(.dir-b-night, .dir-c-sauce) .print:nth-child(4n + 3) { --r: -1.6deg; }
:is(.dir-b-night, .dir-c-sauce) .print:nth-child(4n + 4) { --r: 3deg; }
:is(.dir-b-night, .dir-c-sauce) .print a { position: relative; display: block; padding: 7% 7% 0; background: #F6F2E9; color: #2A2520; text-decoration: none; box-shadow: 0 16px 28px rgb(0 0 0 / .5), 0 2px 5px rgb(0 0 0 / .35); transition: transform .3s var(--ease); }
:is(.dir-b-night, .dir-c-sauce) .print a:hover, :is(.dir-b-night, .dir-c-sauce) .print a:focus-visible { transform: translateY(3px) rotate(calc(var(--r) * -.5)); }
:is(.dir-b-night, .dir-c-sauce) .print img { width: 100%; aspect-ratio: 1; object-fit: cover; }
:is(.dir-b-night, .dir-c-sauce) .print-cap { display: block; min-height: 3.1em; padding: 8% 2% 11%; font: 600 clamp(1.05rem, .9rem + .45vw, 1.3rem)/1.12 "Caveat", "Bradley Hand", "Segoe Print", cursive; text-align: center; }
/* a wooden clothespin with a steel spring, over the twine and the top edge of the print */
:is(.dir-b-night, .dir-c-sauce) .pin { position: absolute; left: 50%; top: -24px; z-index: 2; width: 14px; height: 40px; margin-left: -7px; border-radius: 3px; background: linear-gradient(90deg, #A97C48, #E3BF8A 42%, #C49660 58%, #93693B); box-shadow: 0 3px 6px rgb(0 0 0 / .5); }
:is(.dir-b-night, .dir-c-sauce) .pin::after { content: ""; position: absolute; left: -2px; right: -2px; top: 42%; height: 4px; border-radius: 2px; background: linear-gradient(#E4E7EB, #8B9199); }
@media (max-width: 700px) {
  :is(.dir-b-night, .dir-c-sauce) .strand ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--row-gap); column-gap: 18px; }
  :is(.dir-b-night, .dir-c-sauce) .strand-3 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.dir-b-night, .dir-c-sauce) .rope-b { display: block; top: calc(50% + var(--row-gap) / 2); }
  :is(.dir-b-night, .dir-c-sauce) .strand .print { --drop: .44; }
  :is(.dir-b-night, .dir-c-sauce) .print-cap { font-size: 1.02rem; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  /* once, as the section comes into view: each print swings on its pin and settles */
  :is(.dir-b-night, .dir-c-sauce) .insta.is-in .print { animation: print-swing 1.3s var(--ease) both; }
  :is(.dir-b-night, .dir-c-sauce) .insta.is-in .print:nth-child(2) { animation-delay: .08s; }
  :is(.dir-b-night, .dir-c-sauce) .insta.is-in .print:nth-child(3) { animation-delay: .16s; }
  :is(.dir-b-night, .dir-c-sauce) .insta.is-in .print:nth-child(4) { animation-delay: .24s; }
  :is(.dir-b-night, .dir-c-sauce) .insta.is-in .strand-3 .print { animation-delay: calc(.3s + .08s * var(--n, 0)); }
  :is(.dir-b-night, .dir-c-sauce) .insta.is-in .strand-3 .print:nth-child(2) { --n: 1; }
  :is(.dir-b-night, .dir-c-sauce) .insta.is-in .strand-3 .print:nth-child(3) { --n: 2; }
  @keyframes print-swing {
    0% { transform: rotate(calc(var(--r) - 8deg)); }
    40% { transform: rotate(calc(var(--r) + 4deg)); }
    70% { transform: rotate(calc(var(--r) - 1.5deg)); }
    100% { transform: rotate(var(--r)); }
  }
}

/* Menu page: black-and-white illustrations (drinks, trays, sides) sit on their own paper tile beside the orange
   photo tiles; composed dishes without a photo carry their ingredients as small line icons over the name. */
:is(.dir-b-night, .dir-c-sauce) .card-illo img { background: #F4EFE4; }
:is(.dir-b-night, .dir-c-sauce) .ings { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; color: var(--label); }
:is(.dir-b-night, .dir-c-sauce) .ing { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px rgb(228 166 60 / .45); }
:is(.dir-b-night, .dir-c-sauce) .ing .ico { width: 20px; height: 20px; }
@media (max-width: 700px) { :is(.dir-b-night, .dir-c-sauce) .ing { width: 30px; height: 30px; } :is(.dir-b-night, .dir-c-sauce) .ing .ico { width: 18px; height: 18px; } }
:is(.dir-b-night, .dir-c-sauce) .card-name .ko, :is(.dir-b-night, .dir-c-sauce) .mp-cat-head .ko { white-space: nowrap; } /* a Korean word never breaks in the middle ("치/킨무") */

/* Facts strip: one line of plain facts on the logo orange, running sideways. It pauses under the pointer and
   stands still (wrapped) with reduced motion. */
:is(.dir-b-night, .dir-c-sauce) .strip { background: #F15922; color: #0B1424; overflow: hidden; overflow: clip; }
:is(.dir-b-night, .dir-c-sauce) .strip-track { display: flex; width: max-content; animation: cib-strip 42s linear infinite; }
:is(.dir-b-night, .dir-c-sauce) .strip:hover .strip-track { animation-play-state: paused; }
:is(.dir-b-night, .dir-c-sauce) .strip-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
:is(.dir-b-night, .dir-c-sauce) .strip-list li { display: inline-flex; align-items: center; gap: 26px; padding: 15px 0 13px 26px; font: 400 clamp(1.3rem, 1rem + .9vw, 1.85rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
:is(.dir-b-night, .dir-c-sauce) .strip .ing { width: auto; height: auto; box-shadow: none; }
:is(.dir-b-night, .dir-c-sauce) .strip .ico { width: 20px; height: 20px; opacity: .85; }
@keyframes cib-strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  :is(.dir-b-night, .dir-c-sauce) .strip-track { animation: none; width: auto; justify-content: center; }
  :is(.dir-b-night, .dir-c-sauce) .strip-list { flex-wrap: wrap; justify-content: center; padding: 6px var(--gutter); }
  :is(.dir-b-night, .dir-c-sauce) .strip-list[aria-hidden] { display: none; }
}

/* Reviews: real Google reviews as cards in a row that swipes; the buttons step through it. */
:is(.dir-b-night, .dir-c-sauce) .reviews { padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 104px); display: grid; gap: clamp(24px, 3vw, 40px); }
:is(.dir-b-night, .dir-c-sauce) .rv-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; padding-inline: var(--gutter); }
:is(.dir-b-night, .dir-c-sauce) .rv-head .copy { max-width: 760px; }
:is(.dir-b-night, .dir-c-sauce) .rv-nav { display: flex; gap: 10px; }
:is(.dir-b-night, .dir-c-sauce) .rv-btn { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(243 233 214 / .1); color: var(--text); font: 600 1.2rem/1 var(--body); cursor: pointer; transition: background-color .2s; }
:is(.dir-b-night, .dir-c-sauce) .rv-btn:hover { background: rgb(243 233 214 / .2); }
:is(.dir-b-night, .dir-c-sauce) .rv-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(372px, 84vw); gap: 18px; margin: 0; padding: 4px var(--gutter) 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
:is(.dir-b-night, .dir-c-sauce) .rv-track::-webkit-scrollbar { display: none; }
:is(.dir-b-night, .dir-c-sauce) .rv-track:focus-visible { outline-offset: -3px; }
:is(.dir-b-night, .dir-c-sauce) .rv-card { scroll-snap-align: start; min-width: 0; }
:is(.dir-b-night, .dir-c-sauce) .rv-card figure { position: relative; height: 100%; margin: 0; display: grid; align-content: space-between; gap: 18px; padding: 26px 24px 22px; border-radius: 10px; background: #0B1A2D; box-shadow: inset 0 0 0 1px rgb(243 233 214 / .08); }
:is(.dir-b-night, .dir-c-sauce) .rv-stars { margin: 0; color: #F2B84B; letter-spacing: .14em; font-size: 1rem; }
:is(.dir-b-night, .dir-c-sauce) .rv-stars span { color: rgb(243 233 214 / .22); }
:is(.dir-b-night, .dir-c-sauce) .rv-card blockquote { margin: 0; }
:is(.dir-b-night, .dir-c-sauce) .rv-card blockquote p { font-size: 1.06rem; line-height: 1.55; color: var(--text); }
:is(.dir-b-night, .dir-c-sauce) .rv-card blockquote::before { content: "“"; display: block; height: .5em; margin-bottom: 4px; font: 400 3.4rem/1 var(--display); color: var(--label); }
:is(.dir-b-night, .dir-c-sauce) .rv-card figcaption { font-size: .88rem; color: var(--muted); }