/* ============ Base ============ */
html {
  scroll-behavior: smooth;
}

/* ============ Header scroll state ============ */
#header.scrolled {
  background-color: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(46, 42, 38, 0.06);
}
#header.scrolled a,
#header.scrolled button {
  color: #2E2A26;
}

/* ============ Scroll fade-in animations ============ */
.fade-in,
.fade-in-up {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-in {
  transform: scale(1.02);
}

.fade-in-up {
  transform: translateY(24px);
}

.fade-in.is-visible,
.fade-in-up.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger menu cards slightly */
.menu-card {
  transition-delay: 0ms;
}

/* ============ Menu category tabs ============ */
.menu-tab {
  padding: 0.5rem 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(46, 42, 38, 0.5);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.menu-tab:hover {
  color: #2E2A26;
}
.menu-tab.is-active {
  background-color: transparent;
  color: #2E2A26;
  border-bottom: 1px solid #2E2A26;
}

/* ============ Filterable menu items ============ */
.menu-item {
  transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease, padding 0.35s ease;
  opacity: 1;
  transform: translateY(0);
  max-height: 200px;
  overflow: hidden;
}
.menu-item.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
}

/* ============ Mobile nav ============ */
#mobileNav.open {
  display: flex;
}

/* ============ Instagram official embeds (uniform grid) ============ */
/* Instagram公式embedの幅・余白を強制的に統一し、グリッドの崩れを防ぐ */
.insta-post {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.insta-post .instagram-media {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.insta-post iframe {
  width: 100% !important;
}

/* ============ ALBUM-style photography ============ */
/* カラー写真のまま、ホバーで僅かにズーム・コントラストが上がるエディトリアル表現 */
.photo-mono {
  filter: contrast(1.05) saturate(1.08);
  transition: filter 0.7s ease, transform 0.7s ease;
}
.photo-mono:hover {
  filter: contrast(1.1) saturate(1.15);
  transform: scale(1.02);
}

/* ============ Instagram feed grid ============ */
.insta-grid {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.insta-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: saturate(1.05);
}
.insta-grid:hover img {
  transform: scale(1.06);
  filter: saturate(1.2) contrast(1.05);
}
.insta-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(46, 42, 38, 0);
  transition: background 0.4s ease;
}
.insta-grid:hover::after {
  background: rgba(46, 42, 38, 0.08);
}