@import url('connected.css');

/* Warm greige palette; retain the approved composition and white display type. */
body { background: #f5f2ed; color: #625b55; }
header { background: #f5f2ed; }
header nav a { color: #6b625a; }
.poster {
  background:
    radial-gradient(ellipse at 85% 35%, #eee4d6 0, transparent 48%),
    linear-gradient(115deg, #b3a79b 0%, #c6baad 48%, #e9e1d6 100%);
}
.poster h1 { color: #fff; text-shadow: 0 2px 12px #62524726; }
.intro, .intro p { color: #62574e; }
.explore { color: #62574e; border-color: #9e8f82; }
.margin-note { color: #807164; }
.product-nav { border-color: #d9cfc3; }
.product-nav button { color: #6c6157; }
.product-nav button small { color: #94867b; }
.details { border-color: #d9cfc3; }
.details p { color: #77695e; }
footer { color: #928276; }

.image-stage {
  isolation: isolate;
  top: 22%;
  left: 43%;
  width: 47%;
  height: 47%;
}
.image-stage::before {
  content: '';
  position: absolute;
  inset: -10% -5%;
  border-radius: 35%;
  background: radial-gradient(ellipse, #ba9a7c30, #c3b6a63b 45%, transparent 70%);
  filter: blur(22px);
  z-index: -2;
}
.image-stage::after {
  content: '';
  position: absolute;
  inset: -10px 17px 12px -9px;
  border: 1px solid #ffffffb3;
  background: linear-gradient(125deg, #ffffff70, #ffffff08 48%, #c4b29b22);
  border-radius: 55px 15px 70px 18px;
  transform: rotate(-4deg);
  z-index: -1;
}
.image-plane {
  clip-path: none;
  border-radius: 44px 12px 65px 15px;
  transform: rotate(-2deg);
  overflow: hidden;
  padding: 10px 16px;
  box-shadow: 0 20px 30px -18px #473a3075, 0 1px 0 #ffffff60 inset;
}
.image-plane::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #ad9d8d70;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 10px 22px -20px #efe1d1;
}
.image-plane img { transform: rotate(2deg); }
.red-band { background: #a39180; height: 16%; top: 43%; }
.beyond { font-size: 17vw; }
.visible { font-size: 11.5vw; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .image-stage { transition: transform .6s ease; }
  .image-stage:hover { transform: translateY(-7px); }
  .image-stage::after { transition: transform .6s ease; }
  .image-stage:hover::after { transform: rotate(-6deg) translate(-3px,-3px); }
}
@media(max-width:950px) {
  .image-stage { left: 41%; top: 28%; width: 50%; height: 41%; }
}
@media(max-width:600px) {
  .image-stage { left: 29%; top: 32%; width: 63%; height: 33%; }
  .image-plane { padding: 5px 10px; border-radius: 25px 8px 35px 9px; }
  .beyond { font-size: 26vw; }
  .visible { font-size: 13vw; }
  .image-stage::after { border-radius: 36px 10px 45px 12px; inset: -10px 15px 12px -9px; }
  .red-band { height: 16%; top: 43%; }
}