@font-face {
  font-family: 'Receipt';
  src: url('assets/fonts/Receipt.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Reset and base */
* { margin:0; padding:0; box-sizing:border-box; }
body, html { 
  font-family: 'Receipt', serif;
  color:#666; 
  background:#fff; 
  height:100%; 
}
.container { display:flex; height:100vh; overflow:hidden; }

/* Sidebar */
.sidebar { 
  width:250px; 
  padding:2rem 1rem; 
  background:#fff; 
}
.sidebar h1 { 
  font-size:2rem; 
  margin-bottom:2.5rem; 
  color:#666; 
}
.sidebar ul { list-style:none; }
.sidebar li { 
  cursor:pointer; 
  padding:0.5rem 0; 
  transition:color 0.3s; 
}
.sidebar li:hover { color:#000; }

/* Content */
.content { 
  flex:1; 
  overflow-y:auto; 
  padding:2rem; 
  background:#fff; 
  position:relative; 
}

/* Hide all categories by default */
.category { display:none; }
.category.active { display:block; }

/* Centered subcategories */
#center {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-bottom:2rem; /* space for gallery below */
}
.subcat {
  cursor:pointer;
  font-size:2rem;
  margin:1rem 0;
  transition: color 0.3s;
}
.subcat:hover { color:#000; }

/* Image galleries */
.image-stack { 
  display:flex; 
  flex-direction:column; 
  gap:1.5rem; 
  align-items:center; 
}
.image-stack img { 
  max-width:500px; 
  width:auto; 
  border-radius:4px; 
  height:auto; 
}

/* Optional: smaller screens responsiveness */
@media (max-width: 768px) {
  .container { flex-direction: column; }
  .sidebar { width:100%; padding:1rem; }
  .content { padding:1rem; }
  .image-stack img { max-width:90%; }
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  margin-bottom: 1.5rem; /* spacing below the video */
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: none;
  border-radius: 4px; /* optional, matches images */
}

.art-text {
  max-width: 600px;
  text-align: left;
  margin-top: 2rem;
  color: #666;
}

.art-text h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: normal;
}

.art-text .meta {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

.art-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
}