/* Shared phone navigation, notices and viewers in portrait or short touch landscape. */
.navbar { padding: 5px 0 12px; }
.navbar, .navbar.is-submerged { background: #100823; }
.nav-container { width: calc(100% - 24px); min-height: 52px; flex-wrap: nowrap; }
.nav-logo-img { width: 57px; height: 42px; object-fit: contain; }
.nav-logo-text { font-size: 18px; }
.nav-logo-text small { display: none; }
.mobile-menu-btn { display: block; width: 48px; height: 48px; margin-left: auto; }
.mobile-menu-btn.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.js .nav-links, .nav-links { position: absolute; inset: 64px 10px auto; width: auto; margin: 0; padding: 30px 27px 37px; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; background: url('/assets/illustrated-mobile/navigation-v1.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; max-height: calc(100dvh - 78px); overflow-y: auto; }
.js .nav-links.open { display: grid; }
html:not(.js) .nav-links { position: static; width: 100%; max-height: none; display: grid; }
.nav-links a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 3px; font: 900 clamp(15px, 4vw, 18px)/1.25 var(--font-heading); text-align: center; }
.mobile-privacy-slot { margin: 0 auto 12px; }
.mobile-privacy-slot:empty { display: none; }
body:not(.home-page) > .mobile-privacy-slot { padding-top: 82px; }
body.mobile-privacy-intro main { padding-top: 20px; }
.mobile-privacy-slot .privacy-notice { position: relative; inset: auto; transform: none; z-index: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: calc(100% - 20px); max-width: 520px; margin: auto; padding: 12px 14px; border: 10px solid transparent; border-radius: 0; box-shadow: none; filter: none; background: #211230; border-image: url('/assets/illustrated-mobile/viewer-rim-v1.svg') 35 stretch; }
.mobile-privacy-slot .privacy-notice p { font-size: 16px; line-height: 1.3; }
.mobile-privacy-slot .privacy-notice button { min-width: 58px; min-height: 44px; padding: 7px 10px; font-size: 17px; }
.lightbox { width: calc(100vw - 12px); max-width: none; max-height: calc(100dvh - 12px); padding: 0; border: 13px solid transparent; border-image: url('/assets/illustrated-mobile/viewer-rim-v1.svg') 35 fill stretch; background: #1b102b; overflow: hidden; }
.lightbox-panel { position: relative; max-height: calc(100dvh - 38px); padding: 44px 6px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lightbox-close { position: sticky; display: block; top: 0; margin: -44px 0 0 auto; right: auto; width: 44px; height: 44px; font-size: 31px; background: url('/assets/illustrated-secondary/control-v1.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; z-index: 2; }
.lightbox-img { max-height: max(120px, calc(100dvh - 290px)); width: 100%; object-fit: contain; }
.lightbox figcaption { font-size: 17px; line-height: 1.25; margin: 10px auto; }
.lightbox-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 5px; }
.lightbox-action { min-height: 48px; padding: 11px 9px; font-size: 16px; line-height: 1.15; text-align: center; background: url('/assets/illustrated-secondary/control-v1.svg') center / 100% 100% no-repeat; border: 0; border-radius: 0; }
.lightbox .action-status { font-size: 16px; min-height: 20px; margin: 4px 0 0; }

@media (min-width:651px) {
  /* The landscape painting keeps Beast to the right; put his sign below that hull. */
  .hero { min-height:610px; height:max(610px,66.6667vw); }
  .hero-content { top:80px; left:3%; width:57%; }
  .hero-title { height:23vw; }
  .hero-tagline { font-size:27px; }
  .hero-subtitle { font-size:21px; }
  .hero-buy { top:72%; left:78%; min-width:180px; min-height:58px; padding:12px 28px; font-size:22px; line-height:1.2; transform:translateX(-50%) rotate(-3deg); }
  .hero-buy:hover { transform:translateX(-50%); }
  .hero-explore { bottom:2%; font-size:19px; }
  .hero-explore span { font-size:27px; }
  .surface-below { margin-top:0; }
  .nav-links, .js .nav-links { grid-template-columns:repeat(4,minmax(0,1fr)); padding-inline:11%; }
  .lightbox { width:calc(100vw - 24px); }
  .lightbox-panel { display:grid; grid-template-columns:minmax(0,44%) minmax(0,1fr); gap:4px 18px; padding:12px; }
  #lightbox .lightbox-panel figure { display:contents; }
  #lightbox .lightbox-img { grid-column:1; grid-row:1/5; max-height:calc(100dvh - 62px); width:100%; align-self:center; }
  #lightbox .lightbox-close { position:static; grid-column:2; grid-row:1; margin:0 0 0 auto; }
  #lightbox figcaption { grid-column:2; grid-row:2; margin:0 0 7px; }
  #lightbox .lightbox-actions { grid-column:2; grid-row:3; align-self:start; }
  #lightbox .action-status { grid-column:2; grid-row:4; }
  .footer-utility .back-to-top { position:static; display:inline-flex; align-items:center; justify-content:center; gap:6px; width:auto; height:50px; min-width:146px; padding:12px 20px; font-size:17px; visibility:visible; pointer-events:auto; }
}