* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #F7F4EF; }
::selection { background: #15130F; color: #F7F4EF; }
a { color: #15130F; text-decoration: none; }
a:hover { color: #7C5A34; }
img { display: block; }

@keyframes seal-pulse {
  0% { opacity: 0.35; transform: scale(0.9); }
  60% { opacity: 0.9; transform: scale(1.04); }
  100% { opacity: 0.7; transform: scale(1); }
}
.grisbi-seal { animation: seal-pulse 2.4s ease-out 1; }

.grisbi-thumb { cursor: pointer; transition: border-color 0.2s ease, opacity 0.2s ease; }
.grisbi-filter-chip { cursor: pointer; transition: all 0.2s ease; }
.grisbi-card-img { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); overflow: hidden; }
.grisbi-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.grisbi-card:hover .grisbi-card-img img { transform: scale(1.06); }
.grisbi-card:hover .grisbi-card-overlay { opacity: 1 !important; }

.slot-img { width: 100%; height: 100%; object-fit: cover; }
video.slot-img { display: block; }

/* Responsive layout fixes */
@media (max-width: 900px) {
  .site-header { flex-direction: column; align-items: center; gap: 14px !important; }
  .site-header nav { width: 100%; }
  .site-header > div:last-child { width: 100%; justify-content: center; }

  .story-panel { grid-template-columns: 1fr !important; height: auto !important; }
  .story-panel > div:first-child { height: 280px !important; }
  #story-track { width: 100% !important; height: auto !important; flex-direction: column; }
  #story-wrap { height: auto !important; }

  .pdp-gallery-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .passport-materials { grid-template-columns: 1fr !important; }
  .passport-history-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 14px 0 !important; }
  .passport-history-row > div:last-child,
  .passport-history-row > div:first-child { text-align: left !important; }
}

@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}