/* --- Storybook Header --- */
.storybook-header {
  background: linear-gradient(180deg, #f9dc6b 0%, #f5ca42 100%);
  border-bottom: 4px solid #d3a93e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 2rem;
  font-family: 'Comic Neue', 'Baloo 2', sans-serif;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* optional: if you have a texture image */
.storybook-header {
  background-image: url('parchment-texture.png');
  background-size: cover;
}

/* --- Logo area --- */
.logo-box {
  background: #fffef6;
  border: 2px solid #333;
  padding: 0.3rem 1rem;
  transform: rotate(-2deg);
  box-shadow: 2px 3px 0 #d3a93e;
}

.logo-box h1 {
  font-family: 'Fredoka One', 'Comic Sans MS', cursive;
  font-size: 1.8rem;
  color: #3a2a0a;
  margin: 0;
}

/* --- Navigation --- */
.storybook-header nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.storybook-header nav a {
  text-decoration: none;
  color: #3a2a0a;
  font-weight: bold;
  position: relative;
  transition: all 0.2s ease;
}

.storybook-header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background-color: #3a2a0a;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.storybook-header nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.storybook-header nav a:hover {
  color: #a23d28;
  transform: rotate(-2deg) scale(1.1);
}