.restaurant-page {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.restaurant-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(40, 42, 43, 0.1) 0.55px, transparent 0.7px);
  background-size: 8px 8px;
  content: "";
  opacity: 0.18;
  pointer-events: none;
}

.restaurant-hero__grid,
.restaurant-events__grid,
.restaurant-address__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(26.25rem, 5fr) minmax(28.75rem, 7fr);
  align-items: center;
  gap: var(--space-7);
}

.restaurant-hero__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.restaurant-hero__copy > * { margin: 0; }
.restaurant-hero__eyebrow { color: var(--color-graphite); background: var(--color-blue); padding: var(--space-2) var(--space-3); }
.restaurant-hero h1 { max-width: 10.7ch; font-size: clamp(2.75rem, 6vw, 4.75rem); }
.restaurant-hero__lead { max-width: 35rem; font-size: var(--text-lg); line-height: 1.4; }
.restaurant-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.restaurant-hero__actions > * { min-width: 0; }
.restaurant-hero__note { max-width: 23ch; color: var(--color-graphite-muted); }

.restaurant-hero__photo {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  transform: rotate(1.5deg) translateX(0.5rem);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.restaurant-hero__photo:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px) rotate(1deg) translateX(0.5rem); }
.restaurant-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.restaurant-hero__photo figcaption { margin: var(--space-3) var(--space-2) 0; }
.restaurant-hero__tape { position: absolute; z-index: 1; top: -0.65rem; left: 12%; width: 6rem; transform: rotate(-6deg); }

.restaurant-gathering__intro,
.restaurant-flavours__intro,
.restaurant-interiors__intro,
.restaurant-games__intro,
.restaurant-faq__intro { width: 58.333%; min-width: 0; }
.restaurant-gathering__intro p { max-width: 42.5rem; }
.restaurant-gathering__cards,
.restaurant-games__cards { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.restaurant-gathering__cards > *,
.restaurant-games__cards > * { min-width: 0; width: 100%; }
.restaurant-note { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.restaurant-note > * { margin: 0; }
.restaurant-note p { max-width: 34ch; }
.restaurant-note:nth-child(2) { margin-top: var(--space-4); }
.restaurant-note:nth-child(3) { margin-top: var(--space-2); }
.restaurant-note--warm { background: var(--color-paper-white); }
.restaurant-note__stamp { color: var(--color-graphite); background: var(--color-yellow); border-color: var(--color-graphite); }
.restaurant-note__margin-note { color: var(--color-graphite-muted); }

.restaurant-flavours__intro p { max-width: 38.75rem; }
.restaurant-flavours__cards { display: grid; min-width: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); align-items: start; gap: var(--space-5); margin-top: var(--space-7); }
.restaurant-flavours__cards > * { min-width: 0; width: 100%; }
.restaurant-flavour { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.restaurant-flavour > * { margin: 0; }
.restaurant-flavour p { max-width: 32ch; }
.restaurant-flavour--photo { background: var(--color-paper-white); }
.restaurant-flavour__figure { width: 100%; min-width: 0; }
.restaurant-flavour__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.restaurant-flavour__stamp { align-self: flex-start; }
.restaurant-flavour--sketch { margin-top: var(--space-4); }
.restaurant-flavour__card-mark { position: absolute; top: var(--space-4); right: var(--space-5); color: var(--color-blue); font-family: var(--font-heading); font-size: 2.25rem; line-height: 1; }
.restaurant-flavours__action { display: flex; min-width: 0; justify-content: flex-start; margin-top: var(--space-6); }

.restaurant-interiors__intro p { max-width: 38.75rem; }
.restaurant-gallery { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 14rem)); gap: var(--space-5); margin-top: var(--space-7); }
.restaurant-gallery__item { position: relative; width: 100%; min-width: 0; padding: var(--space-2); border: var(--border-subtle); background: var(--color-paper-white); box-shadow: var(--shadow-card); text-align: left; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.restaurant-gallery__item:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px) rotate(0.5deg); }
.restaurant-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.restaurant-gallery__item--main { grid-column: 1 / span 7; grid-row: 1 / span 2; transform: rotate(-1deg); }
.restaurant-gallery__item--detail { grid-column: 8 / span 5; grid-row: 1; transform: rotate(1deg); }
.restaurant-gallery__item--table { grid-column: 8 / span 5; grid-row: 2; transform: rotate(-0.6deg); }
.restaurant-gallery__caption { position: absolute; right: var(--space-3); bottom: calc(var(--space-3) + 0.1rem); left: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-paper-warm); color: var(--color-graphite); font-size: var(--text-sm); font-weight: 700; line-height: var(--leading-small); }
.restaurant-gallery__caption--note { right: auto; max-width: 20ch; transform: rotate(-1.5deg); }

.restaurant-games__rule { display: grid; min-width: 0; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; gap: var(--space-5); width: 66.667%; margin-top: var(--space-6); background: var(--color-blue); }
.restaurant-games__rule > * { min-width: 0; }
.restaurant-games__rule-icon { position: relative; width: 4.5rem; height: 3.2rem; border: var(--border-heavy); border-radius: 50%; }
.restaurant-games__rule-icon span { position: absolute; width: 0.7rem; height: 0.7rem; border: 1px solid var(--color-graphite); border-radius: 50%; background: var(--color-paper-warm); }
.restaurant-games__rule-icon span:nth-child(1) { top: 0.45rem; left: 0.7rem; }
.restaurant-games__rule-icon span:nth-child(2) { right: 0.8rem; bottom: 0.4rem; }
.restaurant-games__rule-icon span:nth-child(3) { top: 1.25rem; left: 1.9rem; background: var(--color-yellow); }
.restaurant-games__rule-copy { min-width: 0; }
.restaurant-games__rule-copy > :last-child { margin-bottom: 0; }
.restaurant-game-card { position: relative; display: flex; min-width: 0; min-height: 16rem; flex-direction: column; align-items: flex-start; gap: var(--space-4); overflow: hidden; }
.restaurant-game-card > * { margin: 0; }
.restaurant-game-card p { max-width: 32ch; }
.restaurant-game-card__symbol { position: absolute; top: var(--space-3); right: var(--space-4); color: var(--color-blue); font-family: var(--font-heading); font-size: 2.5rem; line-height: 1; }
.restaurant-game-card__roulette { position: absolute; top: var(--space-4); right: var(--space-4); width: 2.5rem; height: 2.5rem; border: 2px solid var(--color-blue); border-radius: 50%; background: repeating-conic-gradient(var(--color-blue) 0 15deg, transparent 15deg 30deg); }
.restaurant-games__links { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.restaurant-games__links > * { min-width: 0; }

.restaurant-events__grid { grid-template-columns: repeat(2, minmax(22.5rem, 1fr)); align-items: start; }
.restaurant-events__main { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-5); width: 100%; }
.restaurant-events__main > * { margin: 0; }
.restaurant-events__main p { max-width: 38ch; }
.restaurant-events__actions { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.restaurant-events__contact-links { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.restaurant-events__scenarios { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: var(--space-4); width: 100%; }
.restaurant-events__scenarios > * { min-width: 0; width: 100%; }
.restaurant-scenario { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.restaurant-scenario > * { margin: 0; }
.restaurant-scenario p { max-width: 30ch; }
.restaurant-scenario__blue-label { color: var(--color-graphite); background: var(--color-blue); padding: var(--space-1) var(--space-2); }

.restaurant-faq__intro p { max-width: 42.5rem; }
.restaurant-faq__card { position: relative; width: 75%; margin-top: var(--space-6); background: var(--color-paper-white); }
.restaurant-faq__stamp { margin-bottom: var(--space-5); }
.restaurant-faq__items { display: flex; min-width: 0; flex-direction: column; align-items: stretch; }
.restaurant-faq__item { width: 100%; min-width: 0; border-top: var(--border-subtle); }
.restaurant-faq__item h3 { margin: 0; font-family: var(--font-body); font-size: var(--text-base); letter-spacing: 0; }
.restaurant-faq__item button { display: flex; width: 100%; min-width: 0; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; background: transparent; color: var(--color-graphite); font-weight: 700; text-align: left; }
.restaurant-faq__item button span { flex: 0 0 auto; font-size: 1.5rem; font-weight: 400; }
.restaurant-faq__answer { max-width: 42.5rem; padding-bottom: var(--space-5); }
.restaurant-faq__answer p { margin: 0; }

.restaurant-address__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; }
.restaurant-address__card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-5); width: 100%; background: var(--color-blue); }
.restaurant-address__card > * { margin: 0; }
.restaurant-address__card p { max-width: 30rem; }
.restaurant-address__location { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.25; }
.restaurant-address__note { width: 100%; min-width: 0; margin: 0; color: var(--color-graphite-muted); text-align: center; transform: rotate(3deg); }

.restaurant-closing__card { display: flex; min-width: 0; justify-content: center; padding: clamp(2rem, 5vw, 4rem) var(--space-5); }
.restaurant-closing__content { display: flex; width: 100%; max-width: 38.75rem; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-5); margin-inline: auto; text-align: center; }
.restaurant-closing__content > * { margin: 0; }
.restaurant-closing__content h2 { position: relative; }
.restaurant-closing__content h2::after { display: block; width: 5rem; height: 0.55rem; margin: var(--space-2) auto 0; background: var(--color-yellow); content: ""; transform: rotate(-1deg); }
.restaurant-closing__content p { max-width: 28.75rem; }
.restaurant-closing__actions { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.restaurant-closing__actions > * { min-width: 0; }

.restaurant-lightbox[hidden] { display: none; }
.restaurant-lightbox { position: fixed; z-index: 1200; inset: 0; display: grid; min-width: 0; place-items: center; padding: var(--space-5); }
.restaurant-lightbox__backdrop { position: absolute; inset: 0; background: rgba(40, 42, 43, 0.88); }
.restaurant-lightbox__dialog { position: relative; z-index: 1; display: flex; width: min(100%, 62rem); max-height: calc(100vh - 3rem); min-width: 0; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-3); border: var(--border-heavy); background: var(--color-paper-white); box-shadow: var(--shadow-card-hover); }
.restaurant-lightbox__dialog img { width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; }
.restaurant-lightbox__dialog p { margin: 0; padding-right: 3rem; font-size: var(--text-sm); font-weight: 700; }
.restaurant-lightbox__close { position: absolute; z-index: 2; top: var(--space-4); right: var(--space-4); display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: var(--border-heavy); border-radius: var(--radius-md); background: var(--color-paper-warm); color: var(--color-graphite); font-size: 2rem; line-height: 1; }

@media (max-width: 68rem) {
  .restaurant-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); }
  .restaurant-gathering__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restaurant-gathering__cards > :last-child { grid-column: 1 / span 2; }
  .restaurant-flavours__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restaurant-flavour--photo { grid-column: 1; }
  .restaurant-flavour--sketch { margin-top: 0; }
  .restaurant-games__rule { width: 75%; }
  .restaurant-games__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restaurant-games__cards > :last-child { grid-column: 1 / span 2; }
  .restaurant-events__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

@media (max-width: 56rem) {
  .restaurant-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .restaurant-hero__copy, .restaurant-hero__photo { width: 100%; min-width: 0; }
  .restaurant-hero__copy { max-width: 35rem; }
  .restaurant-hero__photo { max-width: 46rem; transform: rotate(1deg); }
  .restaurant-interiors__intro, .restaurant-gathering__intro, .restaurant-flavours__intro, .restaurant-games__intro, .restaurant-faq__intro { width: 75%; }
  .restaurant-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 15rem)); }
  .restaurant-gallery__item--main { grid-column: 1; grid-row: 1 / span 2; }
  .restaurant-gallery__item--detail { grid-column: 2; grid-row: 1; }
  .restaurant-gallery__item--table { grid-column: 2; grid-row: 2; }
  .restaurant-events__grid { grid-template-columns: minmax(0, 1fr); }
  .restaurant-faq__card { width: 100%; }
  .restaurant-address__grid { grid-template-columns: minmax(0, 1fr); }
  .restaurant-address__note { display: none; }
}

@media (max-width: 40rem) {
  .restaurant-hero__grid, .restaurant-events__grid, .restaurant-address__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .restaurant-hero__copy { gap: var(--space-4); padding: var(--space-5); }
  .restaurant-hero h1 { max-width: 12ch; }
  .restaurant-hero__lead { max-width: 34ch; font-size: 1.125rem; }
  .restaurant-hero__photo { transform: rotate(0.8deg); }
  .restaurant-hero__tape { width: 4rem; }
  .restaurant-gathering__intro, .restaurant-flavours__intro, .restaurant-interiors__intro, .restaurant-games__intro, .restaurant-faq__intro { width: 100%; }
  .restaurant-gathering__cards, .restaurant-games__cards, .restaurant-flavours__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .restaurant-gathering__cards > :last-child, .restaurant-games__cards > :last-child { grid-column: auto; }
  .restaurant-note:nth-child(2), .restaurant-note:nth-child(3) { margin-top: 0; }
  .restaurant-flavour--photo { grid-column: auto; }
  .restaurant-note, .restaurant-flavour, .restaurant-game-card { width: 100%; min-width: 0; }
  .restaurant-gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-5); }
  .restaurant-gallery__item--main, .restaurant-gallery__item--detail, .restaurant-gallery__item--table { grid-column: auto; grid-row: auto; min-height: 0; transform: rotate(0.7deg); }
  .restaurant-gallery__item--main img { aspect-ratio: 4 / 3; }
  .restaurant-gallery__item--detail img, .restaurant-gallery__item--table img { aspect-ratio: 3 / 2; }
  .restaurant-gallery__item img { height: auto; }
  .restaurant-games__rule { grid-template-columns: minmax(0, 1fr); width: 100%; gap: var(--space-4); }
  .restaurant-games__rule-icon { width: 3.75rem; height: 2.75rem; }
  .restaurant-games__links { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .restaurant-faq__card { padding: var(--space-5); }
  .restaurant-faq__item button { min-height: 3.5rem; }
  .restaurant-address__card { gap: var(--space-4); }
  .restaurant-closing__card { padding: var(--space-6) var(--space-5); }
  .restaurant-closing__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .restaurant-closing__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .restaurant-hero__photo, .restaurant-gallery__item--main, .restaurant-gallery__item--detail, .restaurant-gallery__item--table, .restaurant-address__note { transform: none; }
  .restaurant-hero__photo:hover, .restaurant-gallery__item:hover { transform: none; }
}
