@import url("../shared.css");

body.hub { background: #2b2b28; color: #fff; }
body.hub .bg { background-image: url("../public/art/home-bg.jpeg"); }
body.hub header { position: relative; z-index: 1; padding: 90px 20px 30px; color: #fff; }
body.hub header h1 { font-size: clamp(56px, 12vw, 128px); text-shadow: 0 2px 28px rgba(0,0,0,.55); }
.menu { position: relative; z-index: 1; max-width: 1000px; height: 68vh; min-height: 540px; margin: 10px auto 60px; padding: 0 30px; }
.tile { position: absolute; }
.tile a { position: relative; display: inline-block; color: #fff; text-decoration: none; }
.tile img { display: block; width: 180px; height: auto; user-select: none; -webkit-user-drag: none; }
.label {
  position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 12px; letter-spacing: .3em; opacity: 0;
  pointer-events: none; text-shadow: 0 1px 10px rgba(0,0,0,.7);
  text-transform: uppercase; transition: opacity .3s ease; white-space: nowrap;
}
.tile .label { opacity: 1; }
.menu.flow { position: static; display: flex; height: auto; min-height: 0; flex-direction: column; align-items: center; gap: 72px; padding: 10px 0 90px; }
.menu.flow .tile { position: static; }
@media (hover: none) { .label { opacity: 1; } }
@media (max-width: 600px) {
  body.hub header { padding: 54px 18px 22px; }
  body.hub header h1 { font-size: clamp(42px, 12vw, 128px); }
}