/* The tiers section, on the ivory brand. Loaded after brand.css on index.html only.

   This is the shop window, the part a stranger actually lands on, and on a phone it is the
   whole page because the Vault room is hidden there. Gold plates on a near black ground is
   the Halloween clash, so the ground under them is warm paper, the same as the funnel page.
   The dark room above it on a desktop is untouched: that is the reveal, and only a buyer
   with a code ever gets to it. */

/* When the Vault room is not rendered (anyone who has not bought), the tiers are the whole
   page: ivory ground at every width, the header floating on paper rather than on the wall,
   and room at the top for it. Without this the page kept the dark body behind the section,
   which showed as black bands down both edges and left the wordmark almost invisible. */
body.no-room { background: linear-gradient(180deg, #fdfaf4, #f4ece0 60%, #ece0cf) fixed, #fdfaf4; }
body.no-room #tiers { padding-top: 116px; }
body.no-room .bar .brand { color: #241d16; }
body.no-room .bar .nav a { color: #6b5844; }
body.no-room .bar .nav a:hover { color: #241d16; }

#tiers {
  position: relative;
  background: linear-gradient(180deg, #fdfaf4, #f4ece0 55%, #ece0cf);
  color: #3f3326;
}
#tiers .eyebrow { color: #12362c; }
#tiers h2 { color: #241d16; }
#tiers .muted { color: #6b5844; }
#tiers .tiers-final { color: #8a7357; }
#tiers .room-link { color: #6b5844; }
#tiers .room-link a { color: #9a7333; }
#tiers .msg { color: #8c3a2e; }

/* The note about the Vault opening on a desktop. */
#tiers .desk-note {
  border: 1px solid rgba(176, 137, 72, .35);
  background: rgba(255, 253, 248, .75);
  color: #5d4c3a;
}

footer {
  background: #ece0cf;
  border-top-color: rgba(176, 137, 72, .3);
  color: #6b5844;
}
footer span { color: #6b5844; }
footer a { color: #9a7333; }

/* On a phone the room is not rendered at all, so the page is ivory top to bottom and the
   header sits on paper instead of on the wall. */
@media (max-width: 899px) {
  body { background: linear-gradient(180deg, #fdfaf4, #f4ece0 60%, #ece0cf) fixed, #fdfaf4; }
  .bar .brand { color: #241d16; }
  .bar .nav a { color: #6b5844; }
}