/* =========================
   GLOBAL SCALE + SIZES
   ========================= */

:root {
  --scale: 4;

  --banner-width: calc(600px * var(--scale));
  --stand-width:  calc(900px * var(--scale));

  --magazine-width: calc(140px * var(--scale));
  --daily-paper-width: calc(80px * var(--scale));
}

/* =========================
   PAGE WRAPPERS
   ========================= */

.hero {
  display: flex;
  justify-content: center;
  padding: 18px 12px 6px;
}

.hero img {
  width: var(--banner-width);
  max-width: 96vw;
  height: auto;
  display: block;
}

.stand-stage {
  margin: 1px auto 2px;
  padding: 0 1px;
}

/* =========================
   NEWS STAND
   ========================= */

.stand {
  position: relative;
  width: var(--stand-width);
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.stand > img.base {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   PUBLICATIONS (MAGAZINES)
   ========================= */

.cover {
  position: absolute;
  width: calc(var(--magazine-width) * 1.1); /* +10% */
  cursor: pointer;
  border-radius: 10px;
  transform-origin: center;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
  transition: transform .12s ease, filter .12s ease;
}
/*
.cover img {
  width: 100%;
  height: auto;
  display: block;
}
  */

.cover:hover {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.22));
}

.cover:focus-visible {
  outline: 3px solid rgba(30, 90, 200, .75);
  outline-offset: 4px;
}

/* =========================
   DAILY PAPER (BIGGER)
   ========================= */

/* =========================
   COVER POSITIONS (DESKTOP)
   ========================= */

/* Centre shelf */
.home-garden  { left: 72%; top: 48%; width: 24%; transform: rotate(-0.5deg); }
.daily-paper  { left: 25%; top: 48%; width: 50%; transform: rotate(0deg); }
.world-geo    { left: 4%;  top: 48%; width: 24%; transform: rotate(0.5deg); }

/* Upper shelves */
.tv-guide     { left: 7%; top: 27%; width: 24%; transform: rotate(-0.5deg); }
.sports       { left: 71%; top: 28%; width: 24%; transform: rotate(-0.5deg); }

/* Bottom shelf */
.music        { left: 10%; top: 70%; width: 24%; transform: rotate(1deg); }
.lecuisine    { left: 35%; top: 70%; width: 24%; transform: rotate(-1deg); }
.scientific   { left: 60%; top: 70%; width: 25.5%; transform: rotate(1deg); }

/* =========================
   MOBILE ADJUSTMENTS
   ========================= */

@media (max-width: 520px) {
  .daily-paper { left: 18%; top: 58%; }
  .tv-guide    { left: 4%;  top: 68%; }
  .sports      { left: 6%;  top: 46%; }
  .scientific  { left: 70%; top: 46%; }
  .home-garden { left: 66%; top: 70%; }

  .music       { left: 58%; top: 41%; }
  .lecuisine   { left: 37%; top: 41%; }
  .world-geo   { left: 16%; top: 41%; }
}

/* =========================
   OPTIONAL DEBUG
   ========================= */
/*
.cover {
  outline: 2px dashed rgba(255,0,0,.4);
}
*/
footer {
  padding: 1em 0 1em;
}