.c-map { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--map-cream); }
.c-map__paper { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 67% 44%; }
.c-map__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(246 241 230 / 48%) 0%, rgb(246 241 230 / 4%) 58%, transparent 100%); }
.c-map-note { position: absolute; top: 224px; right: 20px; width: 360px; padding: 32px; border: 1px solid rgb(255 255 255 / 88%); border-radius: 12px; background: rgb(255 255 255 / 78%); box-shadow: 0 6px 20px rgb(89 79 63 / 8%); backdrop-filter: blur(12px); transform: rotate(2deg); }
.c-map-note__dot { display: block; width: 16px; height: 16px; margin-bottom: 24px; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 7px rgb(255 59 48 / 13%); }
.c-map-note__title { font-family: var(--book); font-size: 32px; line-height: 1.2; color: var(--deep-ink); letter-spacing: -.5px; }
.c-map-note p:last-of-type { margin: 0; font-size: 20px; line-height: 1.8; }
.c-map-note__rule { display: block; width: 104px; height: 4px; margin-top: 28px; border-radius: 4px; background: var(--blue); }
@media (max-width: 1200px) { .c-map-note { width: 260px; right: 0; padding: 24px; } .c-map-note__title { font-size: 28px; } }
@media (max-width: 1150px) { .c-map-note { display: none; } }
@media (max-width: 600px) {
  .c-map__paper { object-position: 82% 50%; opacity: .78; }
  .c-map__veil { background: rgb(246 241 230 / 15%); }
}