body {
 margin: 0;
 background: black;
 overflow: hidden;
}

/* LOGO */
#logo-wrap {
 position: absolute;
 top: 20px;
 left: 50%;
 transform: translateX(-50%);
}

#logo-wrap img {
 width: 28vw; /* scaled with screen width */
 max-width: 260px;
}

/* SOCIAL */
#social-top {
 position: fixed;
 top: 20px;
 left: 20px;
 display: flex;
 gap: 12px;
 z-index: 10000;
}

#social-top a {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}

#social-top img {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
 opacity: 0.8;
}

/* SIGN SIZES */
#book-link img {
 width: 34vw;
 max-width: 320px;
 border: 2px solid rgba(255,255,255,0.6);
 box-shadow: 0 0 15px rgba(255,255,255,0.4);
}

#archive-link img {
 width: 32vw;
 max-width: 300px;
 border: 2px solid rgba(255,255,255,0.6);
 box-shadow: 0 0 15px rgba(255,255,255,0.4);
}

/* POSITIONING */
#book-link {
 position: fixed;
 top: 26%;
 left: -40vw;
 transition: all 1s ease;
}

#archive-link {
 position: fixed;
 top: 26%;
 right: -38vw;
 transition: all 1s ease, transform 0.3s ease;
}

#book-link.active {
 left: 26%;
}

#archive-link.active {
 right: 30%;
}

/* VIDEO */
#wheldon-video {
 position: fixed;
 bottom: 0;
 left: -40vw;
 width: 40vw;
 max-width: 400px;
 transform: translateY(100px);
 z-index: 9999;
}

/* POPUP */
#preorder-popup {
 position: fixed;
 bottom: 55%;
 left: 50%;
 transform: translateX(-50%) scale(0.9);
 padding: 12px 20px;
 background: rgba(0,0,0,0.85);
 border: 1px solid rgba(255,255,255,0.4);
 color: white;
 opacity: 0;
 transition: all 0.3s ease;
}

#preorder-popup.show {
 opacity: 1;
 transform: translateX(-50%) scale(1);
}

/* SMALL HEIGHT FIX */
@media (max-height: 700px) {
 #book-link, #archive-link { top: 22%; }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
 /* (unchanged - left exactly as you had it) */
 body { display: flex; flex-direction: column; align-items: center; overflow-y: auto; }

 #logo-wrap {
  position: relative; top: 20px; left: 50%; transform: translateX(-50%); margin-left: -185px !important;
 }

 #logo-wrap img { width: 200px; }

 #social-top {
  position: relative !important; margin-top: 90px; margin-left: -40px; display: flex; justify-content: center;
 }

 #book-link, #archive-link {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important;
 }

 #book-link img, #archive-link img { width: 200px; }

 #book-link { margin-top: 80px; }
 #archive-link { margin-top: 20px; }
 #wheldon-video { display: none; }
}