/* The extras, below the wall of tools, for members only.

   This is the second room. The tiers used to sit here, and a person standing inside the Vault
   does not need to be sold the door they already walked through. What belongs here instead is
   the part of the Vault that never goes on a shelf: the map, and the Reserve volumes their
   tier opened. Anything she marks as kept inside later, including a giveaway for the week,
   lands here on its own.

   Almost everything is borrowed from the Collection Room so the two rooms match. These rules
   only cover what is different: the heading is an h2 rather than a second h1 on the page, and
   the room is shorter because it holds a handful of pieces, not a whole wall. */

/* The cue at the foot of the room. It sits in the strip of floor already under the hint line
   and adds no height of its own, so the wall of tools still fits one screen exactly as it did
   before. It fades out once the extras are on screen and stops asking. */
.dig {
  position: absolute; right: 24px; bottom: 20px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 10px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; color: #e6c878; line-height: 1;
  opacity: 0; animation: dig-in .9s ease 1.6s forwards;
  transition: color .3s ease;
}
.dig:hover { color: #f2d58c; }
.dig:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(242,213,140,.7); }
.dig.seen { animation: none; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.dig-t { font: 500 9.5px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.dig-a { width: 19px; height: 19px; animation: dig-bob 1.8s ease-in-out infinite; }
@media (max-width: 1180px) { .dig-t { display: none; } }
@keyframes dig-in { to { opacity: .85; } }
@keyframes dig-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .dig { animation: none; opacity: .85; }
  .dig-a { animation: none; }
}

#extras { min-height: 0; padding: 88px 0 44px; row-gap: 28px; }
#extras .floor { top: 70%; }

/* A member's page is the dark Vault from the header down, so the ivory footer that sits under
   the tiers for everyone else would cut a cream band across the bottom of the room. */
body.inside footer { background: #050406; border-top-color: rgba(176,137,72,.22); }
body.inside footer span { color: rgba(236,228,212,.5); }
body.inside footer a { color: #e0bd7e; }

#extras .ch-copy h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: -.01em;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.04;
  margin: 12px 0 12px;
  color: #f6efe2;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
#extras .ch-copy h2 .g { font-style: italic; }

/* A download, not a price, so the column under each plaque is shorter than in the shop. */
#extras .shop { gap: 36px 28px; }
#extras .shop-item { gap: 22px; }
#extras .shop-note { margin-top: 8px; }
#extras .shop-pending { margin: 0; font: 500 12px var(--sans); color: rgba(236,228,212,.6); }

@media (max-width: 899px) {
  #extras { padding: 64px 0 60px; }

  /* The extras carry the room's own classes, so the phone rule that takes the Vault room off
     small screens would take these with it. A member who narrows their window after walking
     in should still find their map, not a page with nothing on it. */
  #extras { display: block; }

  /* The room being put away at every width now means the phone ground is set by no-room, so
     the phone keeps its own spacing under the header rather than the desktop figure. */
  body.no-room #tiers { padding-top: 92px; }
}