:root { --green: #f0a52a; }
.hero-art {
  width: 100%;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: linear-gradient(145deg, #ffd96d, #d97920 58%, #733316);
  border-radius: 2rem;
  aspect-ratio: 1 / 1;
}
.hero-copy h1 em { color: #e58b20; }
.gallery-strip { flex-direction: column; align-items: flex-start; }
.gallery-strip img { width: min(100%, 720px); cursor: zoom-in; transition: transform 180ms ease, box-shadow 180ms ease; }
.gallery-strip img:hover { transform: translateY(-3px); box-shadow: 0 25px 55px rgba(77, 43, 22, 0.22); }
.image-modal[hidden] { display: none; }
.image-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.5rem; }
.image-modal-backdrop { position: absolute; inset: 0; background: rgba(24, 13, 8, 0.84); backdrop-filter: blur(7px); }
.image-modal-panel { position: relative; z-index: 1; display: grid; place-items: center; max-width: min(94vw, 1100px); max-height: 94vh; margin: 0; animation: image-in 180ms ease both; }
.image-modal-panel img { display: block; max-width: 92vw; max-height: 84vh; border: 7px solid #fffaf3; object-fit: contain; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45); }
.image-modal-panel figcaption { margin-top: 0.8rem; color: #fffaf3; font-size: 0.78rem; text-align: center; }
.image-modal-close { position: absolute; top: -1rem; right: -1rem; z-index: 2; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: var(--cocoa); color: #fffaf3; cursor: pointer; font-size: 1.7rem; line-height: 1; }
.image-modal-close:hover { background: #9b4f25; }
.image-modal-open { overflow: hidden; }
.legal-copy h3 { margin: 2rem 0 0.55rem; color: var(--cocoa); font-size: 1rem; }
.legal-copy a { color: var(--cocoa); font-weight: 900; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-copy .action-link { color: #fffaf3; text-decoration: none; }
.store-link { margin-top: 1rem; }
@keyframes image-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.legal-date { color: var(--cocoa); font-size: 0.8rem; font-weight: 900; }
@media (max-width: 820px) {
  .hero-art {
    max-width: min(100%, 520px);
    margin: 0 auto;
  }
  .hero-art img { max-height: 320px; }
  .image-modal { padding: 0.7rem; }
  .image-modal-panel img { max-width: 96vw; max-height: 80vh; }
  .image-modal-close { top: -0.6rem; right: -0.35rem; }
}
@media (max-width: 560px) {
  .hero-copy h1 {
    max-width: none;
    font-size: clamp(2.9rem, 17vw, 4.8rem);
    line-height: 0.9;
  }
  .hero-intro {
    max-width: 24ch;
    font-size: 1rem;
    line-height: 1.6;
  }
  .hero-meta {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  .hero-art {
    min-height: 0;
    padding: 1rem;
    border-radius: 2rem;
    aspect-ratio: 1 / 1;
  }
  .hero-art::after { inset: 0.75rem; }
  .hero-art img {
    width: 100%;
    max-width: 320px;
    max-height: 240px;
  }
}