:root{
  --main-bg-color: rgb(253, 250, 246);
  --main-text-dark-color: #a67a52;
  --chip-bg: rgba(166,122,82,0.10);
  --chip-brd: rgba(166,122,82,0.22);
  --card-bg: #fff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--main-bg-color);
  color: var(--main-text-dark-color);
  line-height: 1.6;
  overflow-x: hidden;
}

.page {
  display: grid;
  grid-template-columns: minmax(300px, 560px) 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  min-height: calc(100dvh - 165px);
  padding: clamp(16px, 4vw, 48px);
  max-width: 1680px;
  margin-inline: auto;
  padding-top: 5px;
  padding-bottom: 5px;
}

.copy { position: relative; z-index: 1; }
.kicker { text-transform: uppercase; letter-spacing: .18em; opacity: .8; font-size: .82rem; }
h1 { font-weight: 800; line-height: 1.1; font-size: clamp(28px, 5vw, 56px); margin: 6px 0 14px; }
.lead { font-size: 20px; opacity: .95; }
.badges { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.chip { padding: 8px 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--chip-brd); font-size: .86rem; }

.gallery-wrap {
  position: sticky;
  top: clamp(12px, 5vh, 60px);
  align-self: start;
}

.gallery {
  position: relative;
  height: clamp(520px, 80vh, 880px);
  min-height: 520px;
  isolation: isolate;
}

.frame {
  position: absolute;
  width: 36%;
  aspect-ratio: 2 / 3;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: clamp(8px, 1vw, 14px);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}

.frame.f1 { left: 0%; top: 2%; transform: rotate(-1.2deg); z-index: 2; }
.frame.f2 { right: 0%; top: 10%; transform: rotate(1.4deg); z-index: 1; }
.frame.f3 { left: 26%; bottom: 2%; transform: rotate(-0.6deg); z-index: 3; }

.frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes floatY1 { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(-1.2deg) translateY(-8px); } }
  @keyframes floatY2 { 0%, 100% { transform: rotate(1.4deg); } 50% { transform: rotate(1.4deg) translateY(-10px); } }
  @keyframes floatY3 { 0%, 100% { transform: rotate(-0.6deg); } 50% { transform: rotate(-0.6deg) translateY(-12px); } }
  .frame.f1 { animation: floatY1 10s ease-in-out infinite; }
  .frame.f2 { animation: floatY2 10s ease-in-out infinite; }
  .frame.f3 { animation: floatY3 10s ease-in-out infinite; }
  .frame:hover { box-shadow: 0 18px 40px rgba(0,0,0,.12); }
}

@media (min-width: 1600px) {
  .frame { width: 38%; }
  .frame.f3 { left: 28%; }
}

@media (max-width: 980px) {
  .page { grid-template-columns: 1fr; }
  .gallery { height: auto; min-height: 0; }
  .frame { position: relative; width: 100%; aspect-ratio: auto; transform: none; margin: 0 0 16px 0; }
  .frame.f1, .frame.f2, .frame.f3 { left: auto; right: auto; top: auto; bottom: auto; }
}

@media (max-width: 980px) {
  .page { grid-template-columns: 1fr; }
  .gallery {
    justify-content: center;
    gap: 16px;
    --card-w: min(92vw, 560px);
  }
  .frame {
    width: var(--card-w);
    aspect-ratio: auto;
  }
  .frame.f1,
  .frame.f2,
  .frame.f3 {
    transform: none;
    margin-top: 0;
  }
}