:root {
  color-scheme: light;
  --wall-width: min(190vw, 1120px);
  --wall-top: calc(var(--wall-width) * -.285);
  --exit-top: calc(var(--wall-width) * .289);
  --slot-width: calc(var(--wall-width) * .408);
  --paper-width: min(calc(100vw - 40px), 500px);
  --reading-top: max(24px, env(safe-area-inset-top));
  --release-y: calc(var(--exit-top) + var(--wall-width) * .092 - var(--reading-top));
  --mouth-y: calc(var(--exit-top) - var(--reading-top));
}
* { box-sizing: border-box; }
html { background: #b7a286; }
body { position: relative; margin: 0; color: #29231b; font: 14px/1.5 system-ui, -apple-system, sans-serif; }
.hotel-wall {
  position: fixed; inset: -14px; overflow: hidden; pointer-events: none; background: #393022;
  filter: blur(10px) brightness(.68); transform: scale(1.025);
}
.hotel-wall::before {
  content: ''; position: absolute; inset: -50px;
  background: url('/assets/client/post/lunch/hotel-post-mailbox.png') center bottom / cover;
  filter: blur(28px); opacity: .65;
}
.hotel-wall::after {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/client/post/lunch/hotel-post-mailbox.png') center calc(var(--wall-top) + 14px) / var(--wall-width) auto no-repeat;
  mask-image: linear-gradient(to bottom, #000 calc(var(--wall-width) * 1.08), transparent calc(var(--wall-width) * 1.215));
}
.mailbox-page { position: relative; min-height: 100svh; padding-top: var(--reading-top); padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.mail-slot { position: absolute; z-index: 2; left: 50%; top: var(--exit-top); width: var(--slot-width); height: calc(var(--wall-width) * .074); transform: translateX(-50%); perspective: 700px; pointer-events: none; opacity: 0; }
.mail-slot-dark {
  position: absolute; inset: -2px 0 0; border-radius: 8px;
  background: linear-gradient(#100d08f5, #20190ee6 35%, #392b18b3 80%, transparent);
  backdrop-filter: blur(8px); filter: blur(6px);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.mail-flap {
  position: absolute; z-index: 3; inset: 0; transform-origin: center top;
  background: url('/assets/client/post/lunch/hotel-post-mailbox.png') 50.33% 40.22% / calc(var(--wall-width)) auto no-repeat;
  border-radius: 2px; backface-visibility: hidden;
}
.paper-exit { position: relative; z-index: 3; padding: 0 20px 24px; }
.paper-travel { width: var(--paper-width); margin: 0 auto; perspective: 1200px; }
.menu-paper { position: relative; display: block; width: 100%; background: #fbf7ee; transform-origin: center top; box-shadow: 0 4px 8px #17100b33, 0 24px 70px #17100b66; }
.menu-paper::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, #bba6790a, transparent 28%, #fff3 47%, transparent 65%, #6b4c1a08); }
.menu { display: block; width: 100%; height: auto; }
.menu-paper:focus-visible, .credit:focus-visible, .instagram-link:focus-visible { outline: 3px solid #1c1b1a; outline-offset: 6px; }
.mailbox-footer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 20px; }
.credit { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 9px 16px; border-radius: 30px; background: #f9f3e8c9; color: #3d3328; text-decoration: none; backdrop-filter: blur(8px); font-size: 11px; letter-spacing: .01em; }
.credit img { width: 67px; height: auto; opacity: .85; }
.instagram-link { min-height: 44px; padding: 12px 16px; color: #29231b; background: #f9f3e8dc; border-radius: 30px; text-underline-offset: 4px; }
.menu-error { position: relative; width: var(--paper-width); margin: 20px auto; padding: 20px; background: #fbf7ee; }
.menu-error a { color: inherit; }

/* Content is visible by default: no script, failed assets and reduced motion
   all retain the ordinary document. Only the short enhancement hides it. */
html[data-mail='waiting'] .paper-travel { transform: translateY(calc(var(--mouth-y) - 100% - 10px)); }
html[data-mail='waiting'] .paper-exit { z-index: 1; clip-path: inset(var(--mouth-y) 0 -100px); }
html[data-mail='waiting'] .hotel-wall { filter: none; transform: none; }
html[data-mail='waiting'] .mail-slot { opacity: 1; }
html[data-mail='waiting'] .mailbox-footer { opacity: 0; }
html[data-mail='feeding'] .paper-travel { animation: deliver-menu 2600ms both; }
html[data-mail='feeding'] .paper-exit { animation: release-paper 2600ms both; }
html[data-mail='feeding'] .menu-paper { animation: paper-flex 2600ms both; }
html[data-mail='feeding'] .mail-flap { animation: open-flap 2600ms both; }
html[data-mail='feeding'] .mail-slot { animation: slot-recede 2600ms both; }
html[data-mail='feeding'] .hotel-wall { animation: wall-recede 2600ms both; }
html[data-mail='feeding'] .mailbox-footer { animation: footer-arrive 2600ms both; }
@keyframes deliver-menu {
  0%, 8% { transform: translateY(calc(var(--mouth-y) - 100% - 10px)); animation-timing-function: ease-out; }
  24% { transform: translateY(calc(var(--mouth-y) - 90%)); animation-timing-function: cubic-bezier(.4,0,.7,1); }
  60% { transform: translateY(var(--release-y)); animation-timing-function: cubic-bezier(.22,.75,.18,1); }
  94% { transform: translateY(-3px); animation-timing-function: ease-out; }
  100% { transform: translateY(0); }
}
@keyframes paper-flex {
  0%, 24% { transform: scaleX(.82) rotateX(-5deg); }
  60% { transform: scale(.86) rotateX(5deg) rotateZ(-.8deg); }
  86% { transform: scale(1.012) rotateX(-1deg) rotateZ(.15deg); }
  100% { transform: none; }
}
@keyframes release-paper {
  0%, 59.9% { z-index: 1; clip-path: inset(var(--mouth-y) 0 -1000px); }
  60%, 100% { z-index: 3; clip-path: inset(-100px 0 -1000px); }
}
@keyframes wall-recede {
  0%, 59% { filter: blur(0) brightness(1); transform: scale(1); }
  94%, 100% { filter: blur(10px) brightness(.68); transform: scale(1.025); }
}
@keyframes slot-recede {
  0%, 59% { opacity: 1; filter: blur(0); }
  86%, 100% { opacity: 0; filter: blur(10px); }
}
@keyframes open-flap {
  0%, 5% { transform: rotateX(0); filter: brightness(1); }
  12% { transform: rotateX(-30deg); filter: brightness(.9); }
  24%, 60% { transform: rotateX(-72deg); filter: brightness(.75); }
  74% { transform: rotateX(-6deg); filter: brightness(1.05); }
  82% { transform: rotateX(-12deg); }
  100% { transform: rotateX(0); filter: brightness(1); }
}
@keyframes footer-arrive { 0%, 80% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .paper-exit, .paper-travel, .menu-paper, .mail-flap, .mailbox-footer, .hotel-wall, .mail-slot { animation: none !important; }
  .paper-exit { clip-path: none !important; z-index: 3 !important; }
  .paper-travel, .menu-paper { transform: none !important; }
  .mailbox-footer { opacity: 1 !important; }
}

/* A plain, optional text alternative to the approved menu image. */
.menu-text { position: relative; width: var(--paper-width); margin: 0 auto 24px; background: #fbf7ee; }
.menu-text summary { padding: 12px 16px; min-height: 44px; cursor: pointer; }
.menu-text summary:focus-visible, .menu-error a:focus-visible, .menu-status a:focus-visible { outline: 3px solid #1c1b1a; outline-offset: 3px; }
.menu-text-content { padding: 0 20px 20px; overflow-wrap: anywhere; }
.menu-text-content h2 { font-size: 1em; margin: 24px 0 4px; }
.menu-text-content p { margin: 0 0 12px; }
.menu-text-content dt { font-weight: 700; }
.menu-text-content dd { margin: 0 0 12px; }
.menu-status { min-height: 100svh; display: grid; place-content: center; padding: 24px; background: #fbf7ee; text-align: center; }
.menu-status main { max-width: 500px; }
.menu-status h1 { font-size: 1.4em; }
.menu-status a { display: inline-block; min-height: 44px; padding: 12px; color: inherit; }