html, body { margin: 0; height: 100%; background: #1a1410; overflow: hidden; }
.backdrop {
  position: fixed; inset: -40px;
  background: url(/img/bg-tiny.jpg) center / cover no-repeat;
  filter: blur(30px) brightness(.6);
}
.frame {
  --ar: calc(1672 / 941);
  position: fixed; inset: 0; margin: auto;
  width: min(100vw, calc(100vh * var(--ar)));
  aspect-ratio: 1672 / 941;
  container-type: inline-size;
}
.frame img { display: block; width: 100%; height: 100%; }
.hot { position: absolute; display: block; border-radius: 4px; }
.hot:focus-visible { outline: 2px solid #e8cf9a; }
.mobile-only { display: none; }
/* phones held upright get the 9:16 picture */
@media (max-aspect-ratio: 4/5) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
  .frame { --ar: calc(941 / 1672); aspect-ratio: 941 / 1672; }
}
/* Sub-page menu: same look as the menu painted on the home image — ivory serif, gold hairline under each item */
nav.menu {
  position: absolute; left: 2.4cqw; top: 2.6cqw;
  display: flex; flex-direction: column; align-items: center; gap: 1.1cqw;
}
nav.menu a, .ivory {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
  background: linear-gradient(180deg, #fffaf0 0%, #f3e6cc 55%, #dcc49a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0.1cqw 0.2cqw rgba(0,0,0,.85));
  text-decoration: none;
}
nav.menu a {
  position: relative; font-size: max(17px, 2.35cqw); line-height: 1.15; padding: 0 .35em .45em;
}
nav.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(184,137,63,0) 0%, #b8893f 22%, #ffe6a8 50%, #b8893f 78%, rgba(184,137,63,0) 100%);
  box-shadow: 0 0 6px rgba(255,214,140,.55);
}
nav.menu a:hover, nav.menu a[aria-current] { background-image: linear-gradient(180deg, #ffffff 0%, #fff4dc 60%, #f0d9a8 100%); }
nav.menu a:focus-visible { outline: 1px solid #e8cf9a; outline-offset: 4px; }
.sub .frame { width: 100vw; height: 100vh; aspect-ratio: auto; }
.page-title { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; margin: 0; font-weight: 600; }
.page-title .big { font-size: max(48px, 7cqw); display: block; }
.page-title .soon { font-size: max(20px, 2.2cqw); display: block; margin-top: .6em; font-weight: 500; }
.page-title .home { font-size: max(17px, 1.6cqw); display: block; margin-top: 1.4em; }