#modal:has(.title-stack) {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(1,16,32,.94), rgba(1,16,32,.35)), url("art/harbor-warmups.webp") center / cover, #081928;
}
#modal:has(.title-stack) .sheet-head { display: none; }
#modal:has(.title-stack) #sheet {
  min-height: 100%;
  display: grid;
  align-items: center;
  padding-inline: clamp(0px, 5vw, 88px);
}
.title-stack {
  width: min(100%, 560px);
  display: grid;
  justify-items: center;
  gap: clamp(16px, 4dvh, 40px);
}
.title-logo { display: block; width: 100%; }
.title-stack nav { width: min(76%, 356px); display: grid; gap: 8px; }
#sheet .title-stack button {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.title-stack button img { display: block; width: 100%; }
.title-stack button:hover img { filter: brightness(1.18); }
.title-stack button:active img, .title-stack .title-selected img { filter: brightness(1.4); }
.title-stack .title-selected::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 3px;
  background: #ffd45c;
}
@media (orientation: portrait) {
  #modal:has(.title-stack) #sheet { justify-items: center; padding-inline: 0; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .title-stack { width: min(52vw, 84dvh); gap: 12px; }
  .title-stack nav { width: min(66%, 52dvh); gap: 4px; }
}