/* HomeSimple: plain DOM cover grid, no WebGL - see home-simple.js's header
   comment for why this page exists. Dark background matches the 3D
   home.html's #1a1a1a exactly, so this reads as the same site/mood rather
   than a different themed page - the goal here is "no 3D," not "no
   Cinema Papers." */

html, body {
  margin: 0;
  padding: 0;
  background: #1a1a1a;
  /* No overflow:hidden here (unlike the 3D home.html) - this page's whole
     point is relying on ordinary, native page scrolling instead of a
     hand-rolled wheel/drag/momentum system. */
}

#cover-grid {
  /* Clears the fixed global-nav logo (top:16px, 40px tall) and the #info-btn
     one slot in from the search bubble - both position:fixed, so this is
     just breathing room, not a layout constraint they depend on. */
  /* Side padding and gap scale with the window (clamp on vw) instead of
     being fixed px, and there's no max-width cap, so 5 columns of 1fr keep
     growing/shrinking with the browser window rather than stopping at a
     fixed size. */
  padding: 76px clamp(16px, 3vw, 56px) 48px;
  margin: 0 auto;
  display: grid;
  /* Fixed 5 per row on desktop/browser (Jasper's call - auto-fill gave 8,
     then 4 felt too few), stepping down to 3 on tablets and 2 on phones so
     tiles stay a readable size. */
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.6vw, 28px);
}

@media (max-width: 900px) {
  #cover-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  #cover-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 76px 16px 48px;
  }
}

.cover-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* Local var, not a global one - only this rule and its :hover/:focus-
     visible variants below read it, so scoping it here keeps the "what
     affects what" obvious without hunting through the rest of the file. */
  --tile-lift: 1;
}

.cover-tile img {
  display: block;
  width: 100%;
  /* Real cover aspect ratio (same 740/947 constant used throughout the 3D
     views and rack-transition.js/reader.js) - reserves the right box
     before the image loads, so 35 lazy-loading covers never cause layout
     shift as they arrive, and a slow-loading tile still shows a
     correctly-shaped placeholder box instead of collapsing to 0 height. */
  aspect-ratio: 740 / 947;
  object-fit: cover;
  background: #2a2a2a;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cover-tile:hover img,
.cover-tile:focus-visible img {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.cover-tile:focus-visible {
  outline: 2px solid #c69d1d;
  outline-offset: 3px;
}

.cover-caption {
  margin-top: 6px;
  font-family: 'Goudy Bookletter 1911', Georgia, 'Times New Roman', serif;
  font-size: 0.78rem;
  color: #b8b0a0;
  text-align: center;
}

/* Only ever shown if an issue slot (1-35) has no matching DB row - hasn't
   happened in practice since the full library finished tagging, but kept
   as a visible "something's missing here" state rather than silently
   rendering nothing, same defensive intent as magazine-stand.js's grey
   placeholder plane. */
.cover-tile-placeholder img {
  aspect-ratio: 740 / 947;
  background: #2a2a2a;
  border: 1px dashed #555;
  box-shadow: none;
}