:root{
  --brand:#991817;
  --bg:#f7f1e9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.95), rgba(247,241,233,.92) 42%, rgba(239,227,213,.9) 100%);
}
.page-shell{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.poster-wrap{
  position:relative;
  width:min(100%, 941px);
  line-height:0;
  background:#fff;
  box-shadow:0 10px 40px rgba(77,36,25,.10);
  overflow:hidden;
}
.poster{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  cursor:pointer;
  border-radius:999px;
  -webkit-tap-highlight-color:transparent;
}
.hotspot:focus-visible{
  outline:4px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 7px rgba(13,178,83,.72);
}
/* Positions are percentages so they scale with the selected artwork */
.hotspot-top{
  left:5.1%;
  top:22.35%;
  width:36.0%;
  height:4.55%;
}
.hotspot-bottom{
  left:27.0%;
  top:88.7%;
  width:43.8%;
  height:4.7%;
}
/* subtle tap feedback without changing the chosen visual */
.hotspot:active{background:rgba(255,255,255,.10)}
.noscript-note{
  position:fixed;
  left:12px;right:12px;bottom:12px;
  background:#fff;
  color:#222;
  padding:12px 14px;
  border-radius:12px;
  text-align:center;
  line-height:1.4;
  box-shadow:0 8px 30px rgba(0,0,0,.16);
}
@media (min-width:942px){
  .poster-wrap{margin:24px 0;border-radius:18px}
}
@media (prefers-reduced-motion:no-preference){
  .poster-wrap{animation:reveal .28s ease-out both}
  @keyframes reveal{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
}