/* Hallmark · macrostructure: Marquee Hero / layered photographic collage · theme: studied-DNA (user image)
 * faithful reference overrides theme rotation: pink dry-brush, neon Manila, tilted photographs.
 * genre: atmospheric · nav: N9 edge-aligned · footer: Ft2 inline · pre-emit critique: P5 H5 E4 S5 R4 V5 */
@import url("tokens.css");
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 30px; }
body { margin: 0; background: var(--color-km-paper); color: var(--color-km-ink); font: var(--text-km-body)/1.7 var(--font-km-body); overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: inherit; font: inherit; cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-km-cyan); outline-offset: 5px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:active { translate: 0 1px; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { font-style: normal; min-width: 0; overflow-wrap: anywhere; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 1rem; padding: 1rem; background: var(--color-km-paper); z-index: 100; }
.skip-link:focus { top: 1rem; }
.poster { width: min(100%,1440px); margin: 0 auto; position: relative; aspect-ratio: 941/1580; container-type: inline-size; isolation: isolate; overflow: clip; }
.poster-art { position: absolute; inset: 0; z-index: -3; background: url("assets/kissme/manila-background.webp") center top/100% 100% no-repeat, var(--color-km-paper); }
.poster::after { content: ""; position: absolute; pointer-events: none; inset: 0; z-index: 15; opacity: .1; background: url("assets/kissme/grain.svg") repeat; mix-blend-mode: screen; }
.site-header { position: absolute; top: 2.2cqw; left: 2.8%; right: 2.7%; z-index: 25; display: flex; align-items: flex-start; justify-content: space-between; }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; white-space: nowrap; }
.brand-name { color: var(--color-km-pink); font: 700 3.5cqw/1.1 var(--font-km-script); text-transform: uppercase; }
.brand-sub { font-size: .84cqw; margin-top: .55cqw; }
.header-actions { display: flex; align-items: flex-start; gap: 2cqw; }
.reserve-ticket { position: relative; display: flex; align-items: center; gap: 1cqw; padding: 1.6cqw 1.4cqw; margin-top: .8cqw; background: var(--color-km-blackout); border: 2px solid var(--color-km-pink); border-radius: 1cqw; color: var(--color-km-pink); transform: rotate(-5deg); box-shadow: 0 0 0 3px var(--color-km-paper),0 0 12px var(--color-km-pink); font: 600 1.35cqw/1.3 var(--font-km-display); letter-spacing: .04em; white-space: nowrap; }
.reserve-ticket::before { content: ""; position: absolute; inset: -.8cqw .7cqw; border: 1px solid var(--color-km-pink); border-radius: .4cqw; z-index: -1; }
.reserve-ticket small { display: block; font: 600 .85cqw/1.8 var(--font-km-body); }
.reserve-ticket svg { width: 2.7cqw; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle { width: 7.3cqw; height: 7.3cqw; min-width: 54px; min-height: 54px; padding: 0; background: var(--color-km-blackout); border: 1px solid var(--color-km-rule); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1cqw; box-shadow: 0 0 3px var(--color-km-muted); }
.menu-lines { width: 2.65cqw; height: 1.1cqw; border-block: 1px solid var(--color-km-ink); position: relative; }
.menu-caption { font: 500 1cqw/1 var(--font-km-display); letter-spacing: .1em; }
.menu-toggle[aria-expanded="true"] .menu-lines { rotate: 45deg; border-bottom: 0; height: 0; }
.menu-toggle[aria-expanded="true"] .menu-lines::after { content: ""; position: absolute; width: 100%; border-top: 1px solid var(--color-km-ink); rotate: 90deg; }
.site-menu { max-height: calc(100svh - 13cqw); overflow-y: auto; position: absolute; right: 0; top: 9cqw; width: min(340px,84vw); padding: 1rem 1.5rem; background: var(--color-km-blackout); border: 1px solid var(--color-km-pink); box-shadow: 0 12px 36px var(--color-km-shadow); }
.site-menu a,.site-menu button { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; width: 100%; background: none; border-bottom: 1px solid var(--color-km-rule); text-align: left; font: 600 1.1rem var(--font-km-display); color: var(--color-km-pink-light); }
.site-menu :last-child { border: 0; }
.site-menu span { color: var(--color-km-muted); font: .75rem var(--font-km-body); }
.hero { position: absolute; top: 0; left: 0; width: 100%; height: 89cqw; }
.vertical-copy { position: absolute; top: 14cqw; left: 2.5cqw; writing-mode: vertical-rl; letter-spacing: .17em; font: 600 2.8cqw/1.4 var(--font-km-japanese); color: var(--color-km-pink); transform: rotate(-3deg); }
.hero-wordmark { position: absolute; left: 4.5cqw; top: 6.7cqw; width: 43cqw; line-height: .8; mix-blend-mode: screen; }
.hero-wordmark img { width: 100%; height: 40cqw; object-fit: fill; }
.hero-script { position: absolute; top: 43cqw; left: 9.5cqw; color: var(--color-km-ink); font: 500 5cqw/.86 var(--font-km-script); text-shadow: 2px 2px 3px var(--color-km-paper); rotate: -10deg; }
.hero-script>span { display: inline-block; margin-left: 4.2cqw; }
.hero-script b { position: absolute; font: 500 6cqw/1 var(--font-km-script); right: -5cqw; top: 1.6cqw; rotate: 20deg; color: var(--color-km-ink); text-shadow: 0 0 3px var(--color-km-pink),0 0 11px var(--color-km-pink),0 0 18px var(--color-km-pink); }
.hero-note { position: absolute; top: 53.6cqw; left: 18.3cqw; padding: 1.2cqw 2.1cqw 1.8cqw; text-align: center; font-size: 1.8cqw; line-height: 1.55; letter-spacing: .02em; rotate: -5deg; background: var(--color-km-blackout); clip-path: polygon(4% 0,96% 3%,95% 13%,100% 20%,96% 33%,99% 49%,94% 54%,100% 77%,95% 85%,97% 100%,4% 97%,6% 86%,0 76%,4% 65%,1% 42%,4% 28%,0 20%); }
.hero-note strong { font-weight: 500; color: var(--color-km-pink); font-size: 2.2cqw; }
.open-sign { position: absolute; top: 10.5cqw; right: 2.5cqw; width: 18.5cqw; height: 18.5cqw; rotate: 6deg; border-radius: 50%; overflow: clip; background: var(--color-km-paper); }
.open-sign img { width: 100%; height: 100%; object-fit: cover; scale: 1.05; }
.open-palm { position: absolute; color: var(--color-km-cyan); font-size: 7.5cqw; left: 1.6cqw; top: -.4cqw; text-shadow: 0 0 1cqw var(--color-km-cyan); }
.open-small { font-size: 1.2cqw; color: var(--color-km-pink-light); margin-left: 4cqw; }
.open-sign strong { font-size: 4.1cqw; font-weight: 500; color: var(--color-km-pink-light); text-shadow: 0 0 .3cqw var(--color-km-pink),0 0 1cqw var(--color-km-pink); }
.open-time { font-size: 1.5cqw; color: var(--color-km-cyan); }
.open-sign small { font-size: 1.05cqw; margin-top: .35cqw; color: var(--color-km-cyan); }
.polaroid { padding: 1.4cqw 1.3cqw 1.5cqw; color: var(--color-km-paper); background: var(--color-km-polaroid) url("assets/kissme/grain.svg"); box-shadow: .6cqw 1cqw 1.5cqw var(--color-km-shadow); }
.entrance-polaroid { position: absolute; top: 28.4cqw; right: -.8cqw; width: 23cqw; height: 35cqw; rotate: -10deg; }
.polaroid::before,.photo-card::before,.reservation-paper::before { content: ""; position: absolute; top: -1.9cqw; width: 8cqw; height: 3.9cqw; left: 37%; background: var(--color-km-tape) url("assets/kissme/grain.svg"); z-index: 4; clip-path: polygon(3% 0,96% 7%,94% 23%,100% 36%,96% 61%,99% 83%,95% 100%,0 96%,5% 78%,1% 63%,3% 41%,0 30%); rotate: 6deg; }
.entrance-polaroid img { width: 100%; height: 25cqw; object-fit: cover; object-position: 47% center; }
.entrance-polaroid figcaption { font: 500 2.1cqw/1.35 var(--font-km-script); padding: 1cqw .4cqw 0; }
.entrance-polaroid figcaption span { color: var(--color-km-pink); padding-left: 2cqw; font-size: 3cqw; }
.scroll-sign { position: absolute; right: 5.7cqw; top: 65.6cqw; width: 7cqw; height: 18cqw; display: flex; flex-direction: column; align-items: center; color: var(--color-km-pink-light); background: var(--color-km-blackout); border: .25cqw solid var(--color-km-cyan); border-radius: .6cqw .6cqw 2cqw 2cqw; box-shadow: 0 0 0 .45cqw var(--color-km-blue),inset 0 0 .8cqw var(--color-km-pink),0 0 1cqw var(--color-km-pink); rotate: 19deg; padding: 1cqw 0; }
.scroll-sign span { writing-mode: vertical-rl; text-orientation: upright; font: 600 1.1cqw/1 var(--font-km-display); letter-spacing: -.08em; white-space: nowrap; }
.scroll-sign b { font: 500 4.5cqw/.6 var(--font-km-display); text-shadow: 0 0 .8cqw var(--color-km-pink); }
/* Video occupies the open space above MENU / DRINKS; existing cards keep their positions. */
.video-card { position: absolute; z-index: 7; left: 49.5cqw; top: 85.4cqw; width: 30cqw; transform: translateY(-100%); background: var(--color-km-blackout); border: 2px solid var(--color-km-cyan); box-shadow: .25cqw .25cqw 0 var(--color-km-pink),0 .5cqw 1.4cqw var(--color-km-shadow); scroll-margin-top: 24px; }
.video-heading { display: flex; align-items: center; justify-content: space-between; gap: .8cqw; padding: .55cqw .75cqw; }
.video-heading h2 { color: var(--color-km-cyan); font: 600 clamp(15px,1.65cqw,24px)/1.1 var(--font-km-display); letter-spacing: .065em; }
.video-heading p { color: var(--color-km-muted); font: 500 clamp(10px,.82cqw,12px)/1.4 var(--font-km-body); white-space: nowrap; }
.video-player { position: relative; width: 100%; aspect-ratio: 16/9; min-height: 200px; background: var(--color-km-paper); border-block: 1px solid var(--color-km-rule); }
.video-player iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-youtube { display: flex; justify-content: flex-end; align-items: center; gap: .7em; min-height: 32px; padding: .6cqw .75cqw; color: var(--color-km-pink-light); font: 500 clamp(11px,.92cqw,14px)/1.4 var(--font-km-body); white-space: nowrap; }
.video-youtube span { color: var(--color-km-cyan); font-size: 1.25em; }
@media (hover:hover) { .video-youtube:hover { color: var(--color-km-ink); } }
.photo-card { position: absolute; border: .28cqw solid var(--card-accent,var(--color-km-pink)); background: var(--color-km-paper); box-shadow: 0 .5cqw 1.3cqw var(--color-km-shadow); transform: rotate(var(--tilt)); transition: transform var(--dur-km-hover) var(--ease-km-out); isolation: isolate; }
.card-photo { position: absolute; height: 100%; width: 100%; object-fit: cover; z-index: -2; }
.card-copy { position: relative; height: 100%; padding: 2.1cqw 2.3cqw; }
.card-copy h2 { display: flex; align-items: flex-start; flex-direction: column; font-weight: 500; line-height: 1.3; }
.card-copy h2>span { font: 500 2.7cqw/1.12 var(--font-km-display); letter-spacing: .065em; white-space: nowrap; padding: .45cqw .65cqw; margin-left: -.65cqw; background: var(--card-accent,var(--color-km-pink)); box-shadow: -.5cqw .2cqw 0 var(--card-accent,var(--color-km-pink)); }
.card-copy h2 small { display: block; font: 500 1.38cqw/1.4 var(--font-km-body); margin-top: 1cqw; }
.card-copy p { font-size: 1.31cqw; line-height: 1.65; margin-top: 2cqw; text-shadow: 0 1px 2px var(--color-km-paper); }
.view-more { display: flex; gap: 1cqw; align-items: center; padding: 1cqw 0; margin-top: 1.2cqw; background: none; text-align: left; font: 500 1.25cqw/1.3 var(--font-km-display); letter-spacing: .06em; white-space: nowrap; }
.view-more::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.view-more span { font-size: 2cqw; line-height: .7; transition: transform var(--dur-km-hover) var(--ease-km-out); }
.hostess-card { left: 2.3cqw; top: 64.9cqw; width: 40.6cqw; height: 25.5cqw; --tilt: -4deg; --card-accent: var(--color-km-pink); z-index: 4; }
.hostess-card .card-photo { right: 0; width: 57%; object-position: 67% center; }
.hostess-card .card-copy { width: 100%; padding-top: 1.4cqw; background: linear-gradient(90deg,var(--color-km-blackout) 0%,var(--color-km-blackout) 42%,transparent 64%); }
.hostess-card h2,.hostess-card p,.hostess-card .view-more { rotate: 4deg; transform-origin: left center; }
.hostess-card .card-copy p { font-size: 1.2cqw; margin-top: 1.4cqw; line-height: 1.55; }
.hostess-card .view-more { color: var(--color-km-pink-light); position: absolute; bottom: 5cqw; left: 2.3cqw; margin: 0; padding-block: .6cqw; }
.polaroid::before,.photo-card::before,.reservation-paper::before { pointer-events: none; }
.floor-card { left: -1.3cqw; top: 88.6cqw; width: 53.5cqw; height: 23.1cqw; --tilt: 5deg; --card-accent: var(--color-km-violet); z-index: 5; }
.floor-card::before { left: 2%; background-color: var(--color-km-pink-light); width: 17cqw; height: 4.2cqw; top: -1cqw; rotate: -15deg; }
.floor-card .card-photo { width: 69%; object-position: center; }
.floor-card .card-copy { margin-left: 64%; padding: 1.3cqw 1.7cqw; background: var(--color-km-purple-paper) url("assets/kissme/grain.svg"); }
.floor-card h2,.floor-card p,.floor-card .view-more { rotate: -5deg; }
.floor-card .card-copy p { margin-top: 1.6cqw; font-size: 1.22cqw; }
.floor-card .view-more { margin-top: .9cqw; }
.drinks-card { left: 53.6cqw; top: 86.8cqw; width: 45.6cqw; height: 24.8cqw; --tilt: -3deg; --card-accent: var(--color-km-red); z-index: 6; }
.drinks-card::before { left: auto; right: 2%; top: -2.5cqw; width: 8cqw; rotate: -17deg; }
.drinks-card .card-copy { background: linear-gradient(90deg,var(--color-km-blue-paper) 0%,var(--color-km-blue-paper) 26%,transparent 68%); }
.drinks-card h2,.drinks-card p,.drinks-card .view-more { rotate: 3deg; }
.drinks-card h2 span { font-size: 2.65cqw; }
.drinks-card .card-copy p { margin-top: 2cqw; font-size: 1.25cqw; }
.cheers-sign { position: absolute; z-index: 10; left: 61cqw; top: 109cqw; width: 17cqw; height: 10cqw; rotate: -9deg; pointer-events: none; filter: drop-shadow(0 0 .4cqw var(--color-km-red)); }
.cheers-sign span { position: absolute; left: 0; top: 1cqw; font: 600 2.7cqw/1 var(--font-km-script); color: var(--color-km-polaroid); background: var(--color-km-blackout); border: 2px solid var(--color-km-red); border-radius: 50%; padding: .8cqw; rotate: -7deg; }
.cheers-sign svg { position: absolute; width: 10cqw; height: 9cqw; right: -.8cqw; top: 1cqw; stroke: var(--color-km-ink); stroke-width: 2.3; stroke-linecap: round; background: var(--color-km-blackout); border: 2px solid var(--color-km-red); border-radius: 50%; }
.access-card { left: 2.4cqw; top: 113.3cqw; width: 40.5cqw; height: 29.4cqw; --tilt: -4deg; --card-accent: var(--color-km-blue); z-index: 4; overflow: clip; }
.access-card::before { display: none; }
.access-card .card-copy { background: linear-gradient(90deg,var(--color-km-blue-paper) 0%,transparent 80%); }
.access-card h2,.access-card p,.access-card .view-more { rotate: 4deg; }
.access-card .card-copy p { margin-top: 1.8cqw; font-size: 1.25cqw; }
.access-card .view-more { margin-top: .4cqw; }
.map-art { position: absolute; inset: 0; z-index: -1; background: var(--color-km-blue-paper); }
.map-art img { width: 100%; height: 100%; object-fit: cover; }
.jeepney-sticker { position: absolute; z-index: 8; left: .8cqw; top: 133cqw; width: 26cqw; height: 17cqw; rotate: 4deg; pointer-events: none; }
.jeepney-cutout { width: 100%; height: 13.5cqw; background: url("assets/generated/kissme-neon-bg.png") -.6cqw -130cqw/94.1cqw 167.2cqw; clip-path: polygon(4% 32%,11% 22%,43% 17%,45% 9%,69% 12%,80% 41%,89% 53%,99% 71%,92% 90%,22% 98%,9% 75%,1% 67%); }
.jeepney-sticker>span { display: block; font: 600 2.1cqw/1 var(--font-km-display); text-align: center; color: var(--color-km-pink); text-shadow: 1px 2px 2px var(--color-km-paper); rotate: -5deg; }
.jeepney-sticker small { display: block; color: var(--color-km-cyan); font-size: 1.75cqw; }
.reservation-paper { position: absolute; left: 43.6cqw; top: 118.3cqw; width: 21.5cqw; min-height: 26.5cqw; padding: 3.8cqw 2.7cqw 2.4cqw; background: var(--color-km-note) url("assets/kissme/grain.svg"); color: var(--color-km-paper); z-index: 5; rotate: 5deg; box-shadow: .6cqw .8cqw 1.5cqw var(--color-km-shadow); }
.reservation-paper::before { left: 53%; width: 6.5cqw; top: -1.8cqw; }
.reservation-paper h2 { font: 500 2.55cqw/1 var(--font-km-script); white-space: nowrap; }
.reservation-paper h2 small { display: block; width: fit-content; margin-top: 1.1cqw; padding-bottom: .3cqw; font: 500 1.3cqw/1.3 var(--font-km-body); border-bottom: 1px solid var(--color-km-paper); }
.reservation-paper p { font-size: 1.3cqw; line-height: 1.65; margin-top: 2cqw; }
.book-button { display: flex; align-items: center; justify-content: center; gap: 1cqw; white-space: nowrap; width: 100%; padding: 1.1cqw .6cqw; margin-top: 2.1cqw; border-radius: var(--radius-km-button); font: 500 1.5cqw/1.2 var(--font-km-display); letter-spacing: .02em; color: var(--color-km-ink); background: var(--color-km-paper); }
.book-button span { font-size: 2cqw; }
.heart-neon { position: absolute; left: 67cqw; top: 119cqw; font: 400 8.6cqw/1 var(--font-km-script); color: var(--color-km-ink); text-shadow: 0 0 .25cqw var(--color-km-pink),0 0 .8cqw var(--color-km-pink),0 0 1.4cqw var(--color-km-pink); rotate: 16deg; }
.reservation-arrow { position: absolute; left: 61.7cqw; top: 137cqw; font: 400 8.5cqw/1 var(--font-km-script); color: var(--color-km-ink); text-shadow: 0 0 .3cqw var(--color-km-cyan),0 0 .8cqw var(--color-km-cyan); rotate: 21deg; z-index: 8; }
.system-sign { position: absolute; left: 79cqw; top: 113cqw; width: 15cqw; min-height: 30cqw; padding: 1.4cqw 1.1cqw; display: flex; flex-direction: column; text-align: left; background: var(--color-km-blackout); border: .26cqw solid var(--color-km-pink); border-radius: 1cqw; box-shadow: 0 0 0 .45cqw var(--color-km-purple-paper),0 0 0 .65cqw var(--color-km-blue),0 0 1.2cqw var(--color-km-pink),inset 0 0 .6cqw var(--color-km-pink); rotate: 6deg; z-index: 5; font-family: var(--font-km-display); }
.system-brand { font-size: 2.95cqw; font-weight: 600; line-height: 1.35; color: var(--color-km-pink-light); text-shadow: 0 0 .3cqw var(--color-km-pink),0 0 .8cqw var(--color-km-pink); white-space: nowrap; }
.system-sub { font-size: 1.6cqw; line-height: 1.25; color: var(--color-km-cyan); text-align: center; padding: .8cqw 0; border-block: 1px solid var(--color-km-rule); }
.system-facts { display: flex; flex-direction: column; font-size: 1.25cqw; padding: 1.2cqw 0; gap: .25cqw; line-height: 1.6; }
.system-facts b { color: var(--color-km-pink-light); font-weight: 500; margin-bottom: .3cqw; }
.system-facts strong { font-size: 1.8cqw; line-height: 1; margin-bottom: .7cqw; }
.system-thanks { width: 100%; text-align: center; padding-top: 1cqw; border-top: 1px solid var(--color-km-rule); font-size: 1.3cqw; line-height: 1.5; color: var(--color-km-cyan); }
.night-footer { position: absolute; left: 0; right: 0; top: 147cqw; height: 21cqw; overflow: clip; border-top: .15cqw solid var(--color-km-pink-light); transform: skewY(-1.5deg); background: var(--color-km-footer); }
.night-photo { position: absolute; right: 0; width: 43%; height: 100%; z-index: -1; }
.night-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.night-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,var(--color-km-footer),transparent 45%); }
.social-note { position: absolute; left: 3.5cqw; top: 5.8cqw; width: 24cqw; height: 12cqw; background: none; padding: 0; }
.social-script { position: absolute; left: 0; top: 0; text-align: left; font: 500 2.35cqw/.95 var(--font-km-script); rotate: -10deg; border-block: 1px solid var(--color-km-ink); padding: .9cqw 0; }
.social-square { position: absolute; right: 1cqw; top: -.3cqw; width: 8.1cqw; height: 8.1cqw; padding: .45cqw; border: .18cqw solid var(--color-km-pink-light); border-radius: .3cqw; box-shadow: 0 0 1.2cqw var(--color-km-pink),inset 0 0 1cqw var(--color-km-pink); background: var(--color-km-paper); }
.social-square img { width: 100%; height: 100%; }
.social-handle { position: absolute; right: 0; top: 9cqw; font: 500 1.6cqw/1 var(--font-km-display); color: var(--color-km-pink); }
.manila-stamp { position: absolute; top: 0; left: 29cqw; width: 15.2cqw; height: 14cqw; padding: 1.4cqw 1cqw; background: var(--color-km-stamp) url("assets/kissme/grain.svg"); color: var(--color-km-paper); border-radius: 50%; text-align: center; rotate: -15deg; font: 600 2cqw/1.15 var(--font-km-display); }
.manila-stamp b { display: block; margin-top: .5cqw; font-weight: 600; font-size: 2.8cqw; }
.manila-stamp small { display: block; font-size: 1.25cqw; margin-top: .4cqw; }
.night-message { position: absolute; top: 4.5cqw; left: 47cqw; }
.night-message h2 { color: var(--color-km-pink); font: 600 3.5cqw/1.35 var(--font-km-japanese); letter-spacing: .03em; rotate: -3deg; }
.night-message p { font: 400 3cqw/1.4 var(--font-km-script); margin-top: .7cqw; }
.night-message p span { color: var(--color-km-pink); }
.stay-sticker { position: absolute; right: 3cqw; bottom: 2cqw; width: 6.5cqw; height: 8.7cqw; text-align: center; padding: .5cqw; font: 500 1.7cqw/1 var(--font-km-display); background: var(--color-km-tape); border: .15cqw solid var(--color-km-polaroid); border-radius: 1.5cqw; rotate: -8deg; }
.stay-sticker b { font-size: 3.8cqw; font-weight: 400; }
.stay-sticker small { display: block; color: var(--color-km-paper); font-size: 1.4cqw; }
.site-footer { position: relative; width: min(100%,1440px); margin-inline: auto; min-height: 100px; padding: 2.3% 2.8% 2%; background: var(--color-km-footer); display: flex; align-items: flex-start; gap: 6%; }
.site-footer .brand { flex: 0 0 16%; }
.site-footer .brand-name { font-size: clamp(26px,3vw,43px); }
.site-footer .brand-sub { font-size: clamp(8px,.84vw,12px); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: clamp(16px,3.3vw,48px); padding-top: .6%; }
.site-footer nav a { color: var(--color-km-pink); font: 500 clamp(11px,1.18vw,17px)/1.4 var(--font-km-display); white-space: nowrap; }
.site-footer nav small { display: block; color: var(--color-km-muted); font: clamp(8px,.82vw,12px)/2 var(--font-km-body); margin-top: .2rem; }
.copyright { position: absolute; bottom: 1rem; right: 3%; font-size: clamp(8px,.82vw,12px); color: var(--color-km-faint); }
@media (hover:hover) {
 .photo-card:hover { transform: rotate(var(--tilt)) translateY(-3px); }
 .photo-card:hover .view-more span { transform: translateX(4px); }
 .book-button:hover,.dialog-action:hover { color: var(--color-km-pink-light); }
 .site-menu a:hover,.site-menu button:hover,.site-footer a:hover,.reserve-ticket:hover { color: var(--color-km-ink); }
}
/* Modal content remains normal-sized and readable at every viewport. */
.detail-dialog { padding: 0; border: 1px solid var(--color-km-pink); max-width: min(850px,calc(100vw - 32px)); width: 850px; max-height: 90dvh; color: var(--color-km-ink); background: var(--color-km-surface); box-shadow: 0 8px 70px var(--color-km-shadow); overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--color-km-pink) var(--color-km-surface); }
.detail-dialog::backdrop { background: var(--color-km-shadow); backdrop-filter: blur(7px); }
.dialog-shell { position: relative; }
.dialog-close { position: sticky; top: 12px; margin: 12px 12px -54px auto; display: flex; align-items: center; justify-content: center; height: 44px; width: 44px; border: 1px solid var(--color-km-pink); background: var(--color-km-paper); color: var(--color-km-ink); border-radius: 50%; font-size: 32px; line-height: 1; z-index: 5; }
.dialog-content { padding: clamp(24px,5vw,48px); }
.dialog-kicker { color: var(--color-km-pink-light); font: 500 .9rem var(--font-km-display); letter-spacing: .13em; padding-right: 36px; }
.dialog-content h2 { font: 500 clamp(2.1rem,6vw,3.6rem)/1.1 var(--font-km-display); margin: 8px 40px 24px 0; }
.dialog-content h2 small { display: block; font: 500 .95rem/1.5 var(--font-km-body); margin-top: 12px; color: var(--color-km-pink-light); }
.dialog-content p { margin-block: 20px; font-size: 1rem; }
.dialog-content .dialog-intro { margin-block: 24px; }
.dialog-content .dialog-kicker { font-size: .875rem; margin: 0; }
.dialog-content .detail-note { font-size: .8rem; color: var(--color-km-muted); }
.dialog-hero,.reservation-photo { width: 100%; height: auto; max-height: 500px; object-fit: cover; }
.reservation-photo { max-height: 260px; object-position: center 38%; }
.dialog-action { padding: 14px 18px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; font: 500 .95rem/1.5 var(--font-km-body); background: var(--color-km-paper); color: var(--color-km-ink); border: 1px solid var(--color-km-pink); margin-top: 12px; white-space: nowrap; }
.secondary-action { border-color: var(--color-km-rule); }
.shop-facts { margin-block: 24px; }
.shop-facts>div { display: grid; grid-template-columns: 100px minmax(0,1fr); padding: 14px 0; border-bottom: 1px solid var(--color-km-rule); gap: 16px; }
.shop-facts dt { color: var(--color-km-pink-light); font-size: .875rem; }
.shop-facts dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.gallery-main img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gallery-main figcaption { font-size: .875rem; padding-block: 12px; color: var(--color-km-muted); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.gallery-thumbs button { padding: 0; background: none; border: 2px solid transparent; opacity: .65; }
.gallery-thumbs button[aria-pressed="true"] { opacity: 1; border-color: var(--color-km-pink); }
.gallery-thumbs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.menu-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--color-km-rule); margin-block: 24px; }
.menu-tabs button { padding: 12px 16px; background: none; color: var(--color-km-muted); border-bottom: 3px solid transparent; font-size: .9rem; white-space: nowrap; }
.menu-tabs button[aria-selected="true"] { color: var(--color-km-pink-light); border-bottom-color: var(--color-km-pink); }
.menu-sheet { display: block; }
.menu-sheet img { width: 100%; height: auto; }
.price-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.price-summary>div { padding: 16px; background: var(--color-km-paper); border-bottom: 1px solid var(--color-km-pink); }
.price-summary dt { font-size: .875rem; }
.price-summary dd { margin: 8px 0 0; color: var(--color-km-pink-light); font: 500 2rem/1 var(--font-km-display); }
.noscript-info { padding: 32px; text-align: center; }
body.dialog-open { overflow-y: hidden; }
@media (min-width:700px) and (max-width:1199px) {
 .video-card { left: 46.5cqw; }
}
@media (max-width:699px) {
 .video-card { position: relative; left: auto; top: auto; transform: none; width: 89%; flex-shrink: 0; margin-block: 4px; box-shadow: 3px 3px 0 var(--color-km-pink),0 8px 22px var(--color-km-shadow); }
 .video-heading { padding: 10px 13px; gap: 12px; }.video-heading h2 { font-size: 21px; }.video-heading p { font-size: 11px; }
 .video-youtube { min-height: 44px; padding: 10px 13px; font-size: 12px; }
 .site-menu { max-height: calc(100svh - 108px); }
}
@media (max-width:699px) {
 .poster { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 26px; }
 .poster-art { background-size: auto 1120px; background-position: 57% top; }
 .poster::after { opacity: .07; }
 .site-header { top: 18px; left: 18px; right: 18px; }
 .brand-name { font-size: 30px; }.brand-sub { font-size: 8px; margin-top: 5px; }
 .header-actions { gap: 14px; }
 .reserve-ticket { margin-top: 5px; padding: 8px 9px; font-size: 11px; gap: 7px; border-width: 1px; border-radius: 5px; }
 .reserve-ticket::before { inset: -5px 6px; }.reserve-ticket svg { width: 21px; }.reserve-ticket small { font-size: 8px; }
 .menu-toggle { width: 52px; height: 52px; min-width: 52px; min-height: 52px; gap: 9px; }
 .menu-lines { width: 23px; height: 8px; }.menu-caption { font-size: 9px; }.site-menu { top: 70px; }
 .hero { position: relative; height: 146cqw; min-height: 500px; margin-bottom: -20px; }
 .vertical-copy { top: 110px; left: 16px; font-size: 21px; letter-spacing: .15em; }
 .hero-wordmark { top: 82px; left: 8%; width: 62%; }.hero-wordmark img { height: 58cqw; }
 .hero-script { top: calc(88px + 56cqw); left: 12%; font-size: 8cqw; }.hero-script b { font-size: 10cqw; right: -7cqw; top: 2cqw; }
 .hero-note { top: calc(97px + 72cqw); left: 17%; font-size: 13px; padding: 12px 18px; }.hero-note strong { font-size: 16px; }
 .open-sign { top: 108px; right: 3%; width: 31cqw; height: 31cqw; }
 .open-palm { font-size: 12cqw; left: 3cqw; top: -1cqw; }.open-small { font-size: 2.1cqw; margin-left: 7cqw; }.open-sign strong { font-size: 7.5cqw; }.open-time { font-size: 2.6cqw; }.open-sign small { font-size: 2cqw; }
 .entrance-polaroid { top: 73cqw; right: -3%; width: 33%; height: 48cqw; padding: 8px; }.entrance-polaroid img { height: 33cqw; }
 .entrance-polaroid figcaption { font-size: 3cqw; padding: 5px 2px 0; }.entrance-polaroid figcaption span { font-size: 5cqw; }
 .polaroid::before { width: 48px; height: 22px; top: -11px; }
 .scroll-sign { right: 12%; top: 124cqw; width: 33px; height: 78px; border-radius: 4px; padding: 6px 0; }.scroll-sign span { font-size: 6px; }.scroll-sign b { font-size: 25px; }
 .photo-card { position: relative; top: auto; left: auto; width: 89%; height: 255px; flex-shrink: 0; border-width: 2px; }
 .photo-card::before { width: 65px; height: 27px; top: -15px; }.card-copy { padding: 20px; }
 .card-copy h2>span { font-size: 28px; padding: 4px 7px; margin-left: -7px; }.card-copy h2 small { font-size: 13px; margin-top: 7px; }
 .card-copy p,.hostess-card .card-copy p,.floor-card .card-copy p,.drinks-card .card-copy p,.access-card .card-copy p { font-size: 13px; line-height: 1.7; margin-top: 20px; }
 .view-more { font-size: 13px; margin-top: 14px; padding: 10px 0; gap: 9px; min-height: 40px; }.view-more span { font-size: 22px; }
 .hostess-card { align-self: flex-start; margin-left: 4%; --tilt: -3deg; }.hostess-card .card-photo { width: 56%; object-position: 60%; }
 .hostess-card .card-copy { padding-top: 20px; }
 .hostess-card h2,.hostess-card p,.hostess-card .view-more { rotate: 3deg; }
 .hostess-card .view-more { bottom: 12px; left: 20px; }
 .floor-card { width: 94%; height: 250px; --tilt: 3deg; }.floor-card::before { width: 90px; height: 28px; }
 .floor-card .card-photo { width: 62%; object-position: 47% center; }.floor-card .card-copy { margin-left: 57%; padding: 16px 12px; }
 .floor-card h2,.floor-card p,.floor-card .view-more { rotate: -3deg; }.floor-card .view-more { margin-top: 10px; }
 .drinks-card { align-self: flex-end; margin-right: 3%; width: 92%; height: 264px; --tilt: -3deg; }.drinks-card h2 span { font-size: 29px; }
 .drinks-card .card-copy { background: linear-gradient(90deg,var(--color-km-blue-paper) 0%,transparent 95%); }
 .cheers-sign { position: relative; left: auto; top: auto; width: 110px; height: 40px; align-self: flex-end; margin-right: 20%; margin-top: -60px; margin-bottom: -3px; }
 .cheers-sign span { font-size: 21px; padding: 7px; }.cheers-sign svg { width: 68px; height: 58px; right: -44px; }
 .access-card { height: 270px; width: 89%; margin-top: 15px; align-self: flex-start; margin-left: 4%; }.access-card .card-copy { background: linear-gradient(90deg,var(--color-km-blue-paper),transparent); }
 .jeepney-sticker { position: relative; left: auto; top: auto; width: 170px; height: 104px; align-self: flex-start; margin-left: 1%; margin-top: -77px; margin-bottom: -17px; }
 .jeepney-cutout { width: 170px; height: 86px; background-size: 615px 1093px; background-position: -4px -849px; }.jeepney-sticker>span { font-size: 16px; }.jeepney-sticker small { font-size: 13px; }
 .reservation-paper { position: relative; left: auto; top: auto; width: 56%; min-height: 260px; padding: 32px 23px 25px; margin-top: 12px; align-self: flex-start; margin-left: 7%; rotate: 4deg; }
 .reservation-paper::before { width: 53px; height: 28px; top: -16px; }.reservation-paper h2 { font-size: 24px; }
 .reservation-paper h2 small { font-size: 13px; margin-top: 12px; padding-bottom: 3px; }.reservation-paper p { font-size: 13px; margin-top: 20px; }
 .book-button { font-size: 15px; margin-top: 22px; padding: 12px 6px; gap: 10px; }.book-button span { font-size: 22px; }
 .heart-neon { left: 69%; top: auto; bottom: 435px; font-size: 78px; }.reservation-arrow { left: 59%; top: auto; bottom: 284px; font-size: 65px; }
 .system-sign { position: relative; left: auto; top: auto; width: 27%; min-height: 205px; align-self: flex-end; margin-right: 5%; margin-top: -238px; margin-bottom: 26px; padding: 12px 8px; border-width: 2px; border-radius: 7px; rotate: 6deg; }
 .system-brand { font-size: 22px; }.system-sub { font-size: 12px; padding: 8px 0; }.system-facts { font-size: 10px; padding: 11px 0; gap: 2px; }
 .system-facts b { margin-bottom: 4px; }.system-facts strong { font-size: 18px; margin-bottom: 7px; }.system-thanks { font-size: 10px; padding-top: 10px; }
 .night-footer { position: relative; top: auto; width: 100%; height: 236px; margin-top: 16px; border-top-width: 1px; }.night-photo { width: 69%; }
 .social-note { left: 6%; top: 143px; width: 190px; height: 62px; }.social-script { font-size: 20px; padding: 7px 0; }
 .social-square { width: 47px; height: 47px; top: -4px; right: 16px; border-width: 1px; border-radius: 4px; padding: 3px; }.social-handle { font-size: 13px; top: 52px; }
 .manila-stamp { left: 4%; top: 8px; width: 93px; height: 89px; padding: 10px 8px; font-size: 14px; }.manila-stamp b { font-size: 18px; margin-top: 3px; }.manila-stamp small { font-size: 9px; margin-top: 3px; }
 .night-message { left: 37%; top: 32px; }.night-message h2 { font-size: 28px; }.night-message p { font-size: 21px; margin-top: 12px; white-space: nowrap; }
 .stay-sticker { right: 6%; bottom: 17px; width: 45px; height: 61px; font-size: 13px; border-width: 1px; border-radius: 10px; padding: 5px; }.stay-sticker b { font-size: 25px; }.stay-sticker small { font-size: 10px; }
 .site-footer { display: block; min-height: 220px; padding: 25px 24px 45px; }.site-footer .brand-name { font-size: 30px; }.site-footer .brand-sub { font-size: 9px; }
 .site-footer nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 18px; column-gap: 12px; padding: 24px 0 20px; }.site-footer nav a { font-size: 12px; }.site-footer nav small { font-size: 8px; }
 .copyright { font-size: 9px; right: 24px; bottom: 20px; }.dialog-content { padding: 28px 20px; }.detail-dialog { max-width: calc(100vw - 20px); max-height: 93dvh; }
 .menu-tabs button { padding: 12px 10px; font-size: 13px; }.shop-facts>div { grid-template-columns: 73px minmax(0,1fr); gap: 12px; }.dialog-action { gap: 14px; font-size: 13px; padding: 14px; }
}
@media (max-width:360px) {
 .site-header { left: 12px; right: 12px; }.brand-name { font-size: 27px; }.brand-sub { font-size: 7px; }.header-actions { gap: 10px; }
 .reserve-ticket { padding: 8px 6px; gap: 5px; font-size: 10px; }.reserve-ticket svg { width: 17px; }.hero { min-height: 490px; }
 .card-copy { padding: 18px 16px; }.card-copy h2>span,.drinks-card h2 span { font-size: 25px; }.floor-card .card-copy { margin-left: 53%; }
 .reservation-paper { width: 57%; padding-inline: 17px; }.reservation-paper h2 { font-size: 22px; }.system-brand { font-size: 19px; }.system-sub { font-size: 10px; }.system-facts { font-size: 9px; }
 .night-message { left: 34%; }.night-message h2 { font-size: 25px; }.night-message p { font-size: 20px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior: auto; }
 *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Crawlable store information, following the poster without changing its composition. */
.store-guide { width: min(100%,1440px); margin-inline: auto; padding: 34px clamp(24px,4vw,58px); background: var(--color-km-paper); border-top: 1px solid var(--color-km-rule); }
.store-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; color: var(--color-km-muted); font-size: 12px; }
.store-breadcrumb a,.store-facts a,.store-video-source a { color: var(--color-km-pink-light); text-decoration: underline; text-underline-offset: 4px; }
.store-guide-label { color: var(--color-km-cyan); font: 500 18px/1.2 var(--font-km-display); letter-spacing: .1em; }
.store-guide h2 { margin-top: 8px; font: 600 clamp(22px,2.2vw,30px)/1.4 var(--font-km-body); }
.store-guide-intro { max-width: 900px; margin-top: 14px; font-size: 16px; line-height: 1.85; }
.store-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 40px; margin: 24px 0; }
.store-facts>div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--color-km-rule); }
.store-facts dt { color: var(--color-km-muted); font-size: 14px; }.store-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 15px; line-height: 1.8; }
.store-facts address { font-style: normal; }.store-facts dd span { display: block; color: var(--color-km-muted); font-size: 14px; }.store-facts dd a { display: inline-block; margin-right: 8px; }
.store-faq { border-block: 1px solid var(--color-km-rule); }.store-faq summary { cursor: pointer; padding: 17px 0; color: var(--color-km-pink-light); font-size: 16px; }
.store-faq summary:focus-visible { outline: 3px solid var(--color-km-cyan); outline-offset: 4px; }
.store-faq-answers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 40px; padding: 8px 0 26px; }.store-faq h3 { margin-bottom: 8px; font-size: 16px; line-height: 1.6; }.store-faq p { color: var(--color-km-muted); font-size: 15px; line-height: 1.85; }
.store-video-source,.store-guide-note { margin-top: 18px; color: var(--color-km-muted); font-size: 13px; line-height: 1.8; }.store-guide-note { margin-top: 8px; }
@media (max-width:760px) { .store-facts,.store-faq-answers { grid-template-columns: minmax(0,1fr); }.store-guide { padding-block: 30px; }.store-facts>div { grid-template-columns: 72px minmax(0,1fr); gap: 12px; } }