body { background-color: #FDFCFB; color: #5C4D42; scroll-behavior: smooth; }
        .hero-gradient { background: linear-gradient(135deg, #FDFCFB 0%, #F5F2ED 100%); }
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .page-view { display: none; }
        .page-view.active { display: block; animation: fadeIn 0.6s ease-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .drawer { transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
        .drawer.open { transform: translateX(0); }
        .overlay { opacity: 0; pointer-events: none; transition: 0.4s; background: rgba(74, 93, 69, 0.2); backdrop-filter: blur(4px); }
        .overlay.active { opacity: 1; pointer-events: auto; }

        .rounded-card { border-radius: 2rem; overflow: hidden; transition: transform 0.4s ease; }
        .rounded-card:hover { transform: translateY(-8px); }
        
        /* Custom Checkbox */
        .check-item:checked + label { color: #9CAF88; text-decoration: line-through; }
@keyframes marquee-x {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.animate-marquee-x {
  animation: marquee-x 18s linear infinite;
}
.food-lookbook {
  background: #f4f3ef;
  padding: 16vh 6vw;
  overflow: hidden;
}

.lookbook-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 10vw;
}

/* TEXT */
.lookbook-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 11px;
  color: #8b8b8b;
  display: block;
  margin-bottom: 2rem;
}

.lookbook-title {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 1.05;
  margin-bottom: 2rem;
}

.lookbook-title em {
  font-style: italic;
  font-weight: 300;
}

.lookbook-description {
  max-width: 420px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
}

/* IMAGES */
.lookbook-images {
  position: relative;
  height: 520px;
}

.food-circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.18);
  transition: transform 0.9s ease;
}

.food-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.food-circle.large {
  width: 360px;
  height: 360px;
  top: 0;
  left: 0;
}

.food-circle.medium {
  width: 240px;
  height: 240px;
  bottom: 0;
  right: 0;
}

.food-circle.small {
  width: 180px;
  height: 180px;
  top: 40%;
  left: 55%;
  transform: translate(-50%, -50%);
}

.food-circle.offset {
  top: 10%;
  right: -60px;
}

/* HOVER FEEL */
.food-circle:hover {
  transform: scale(1.06);
}
.marquee-section {
  padding: 14vh 0;
  background: #111111;
  overflow: hidden;
}

/* IMAGE MARQUEE */
.image-marquee {
  overflow: hidden;
}

.image-track {
  display: flex;
  gap: 6vw;
  animation: imageScroll 28s linear infinite;
}

.image-item {
  position: relative;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* IMAGE STYLE */
.image-item img {
  width: 480px;
  height: 500px;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.2);
}

/* TEXT MARQUEE */
.text-marquee {
  width: 100%;
  overflow: hidden;
  margin-top: 2rem;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #555;
}

.text-marquee span {
  display: inline-block;
  padding-right: 2rem;
  animation: textScroll 10s linear infinite;
}

.text-marquee.reverse span {
  animation-direction: reverse;
}

/* ANIMATIONS */
@keyframes imageScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes textScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}