body {
  font-family: 'Playfair Display', serif;
  background: #fdfcf6;
  margin: 0;
  padding: 0;
}
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  /*background: #f9f8f3;*/
  background: #d6cbb2;
  border-bottom: 1px solid #ddd;
  padding: .75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand img { height: 60px; }

.menu-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-trigger img {
  transition: transform .3s ease;
}

.menu-trigger.active img {
  animation: wiggle 0.6s ease;
}

@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(-5deg); }
  75%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

.main-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 60px;
  right: 1rem;
  background: #F9F8F3;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1rem;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .4s ease, transform .4s ease;
}
.main-menu.active { display: flex; opacity: 1; transform: translateY(0); }
.main-menu li { list-style: none; margin: .5rem 0; }
.main-menu li a { text-decoration: none; color: #333; font-weight: 500; display: block; padding: .25rem 0; }
.main-menu li a:hover { color: #2d6a73; }