:root{
  --bg:#020b18;
  --ink:#fff;
  --accent:#ef3340;
  --gold:#ffd84a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-width:320px;
  background:#020b18;
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{color:inherit}

/*
  The approved artwork is 724px wide, but the site itself is intentionally
  viewport-fluid. Every slice stretches edge-to-edge on desktop and contracts
  cleanly on phones/tablets while retaining its exact aspect ratio.
*/
.site-shell{
  width:100%;
  max-width:none;
  margin:0;
  background:#07162d;
  overflow:hidden;
}
.slice{
  position:relative;
  width:100%;
  line-height:0;
  background:#07162d;
  overflow:hidden;
}
.slice picture,
.slice img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
}
.slice img{
  image-rendering:auto;
  -webkit-user-drag:none;
  user-select:none;
}

/* Percentage hotspots remain locked to the artwork at every viewport width. */
.hotspot{
  position:absolute;
  display:block;
  z-index:2;
  border-radius:clamp(4px,.6vw,10px);
  touch-action:manipulation;
}
.hotspot:focus-visible{
  outline:clamp(2px,.28vw,4px) solid var(--gold);
  outline-offset:2px;
  background:rgba(255,216,74,.12);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip{
  position:fixed;
  left:12px;
  top:12px;
  z-index:1000;
  background:#fff;
  color:#111;
  padding:10px 14px;
  border-radius:8px;
  transform:translateY(-180%);
  line-height:1.2;
}
.skip:focus{transform:none}

/* Large desktop / ultrawide: remain truly full bleed. */
@media (min-width:1440px){
  .slice img{width:100vw}
}

/* Tablet */
@media (max-width:900px){
  .site-shell,.slice{width:100%}
  .hotspot{border-radius:5px}
}

/* Mobile: no fixed width, no horizontal scrolling, full-bleed artwork. */
@media (max-width:600px){
  body{background:#07162d}
  .site-shell{width:100vw;box-shadow:none}
  .slice{width:100vw}
  .slice picture,.slice img{width:100vw;height:auto}
  .hotspot{min-width:28px;min-height:28px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}