html, body { height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:#060300; color:#fff; }
.wrap { display:grid; grid-template-rows:auto 1fr; height:100vh; z-index: 0; position: relative; }

.toolbar {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-bottom:1px solid #e5e7eb;
  background: #060300;
  color: #fff;
  position:sticky;
  top:0;
  z-index:10;
}
.title { margin-right:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.title h1 { border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px;  
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.btn {
  appearance:none;
  border:1px solid #FFDB57;
  background:#000;
  padding:.4rem .65rem;
  border-radius:.5rem;
  cursor:pointer;
  text-decoration:none;
  color:#FFDB57;
  font-size:1rem;
  font-weight: bold;
}
.btn:hover { background:#f3f4f6; }
.readerview {
  border:1px solid #FFDB57;
  border-radius: 15px;
  padding: 15px 20px 20px 20px;
}
.viewertitle {
  font-size: 14px;
  text-align: center;
  margin-bottom: 15px;
}
/* Hamburger menu */
.menu-container {
  position: relative;
  margin-left: auto;
}
.hamburger {
  width: 32px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}
.hamburger span {
  height: 3px;
  width: 100%;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.dropdown {
  display: none;
  position: absolute;
  top: 34px;
  right: 0;
  background: #000;
  border: 2px solid #FFDB57;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  min-width: 250px;
  z-index: 999;
}
.dropdown a {
  display: block;
  padding: .6rem 1rem;
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
}
.dropdown a:hover {
  color: #FFDB57;
}
.menu-container.open .dropdown {
  display: block;
}
.menu-container.open .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}
.menu-container.open .hamburger span:nth-child(2) {
  opacity: 0;
}
.menu-container.open .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.viewer { position:relative; overflow:hidden; }
.strip { height:100%; display:flex; flex-direction:row; gap:1rem; padding:1rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:none; scroll-behavior:auto; }
.page { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e7eb; border-radius:.5rem; box-shadow:0 1px 2px rgba(0,0,0,.06); scroll-snap-align:start; padding:.5rem; }
canvas { display:block; height:auto; width:auto; }
.pgnum { position:absolute; right:.5rem; bottom:.5rem; background:rgba(0,0,0,.55); color:#fff; font-size:.75rem; padding:.2rem .35rem; border-radius:.35rem; }
.skeleton { width:420px; height:540px; background:linear-gradient(90deg,#eee,#f5f5f5,#eee); background-size:200% 100%; animation:shimmer 1.2s infinite; border-radius:.25rem; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.fallback { position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; padding:2rem; background:#fff; color:#333; border:0; }
.fallback.show { display:flex; }
.fallback .box { max-width:38rem; }

.strip { cursor:grab; user-select:none; -webkit-user-select:none; }
.strip.dragging { cursor:grabbing; }

/* Navigation buttons */

.navbuttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 10px 20px 10px 10px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
}
.nav-btn {
  width: 50px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  background: rgba(255,219,87,0.8);
  border: 1px solid #ddd;
  border-radius: 0;
  color: #333;
  cursor: pointer;
  z-index: 20;
  user-select: none;
  transition: background 0.2s;
}
.nav-btn:hover {
  background: #FFDB57;
  border-color: black;
}
.nav-btn.prev { margin-left: 8px; }
.nav-btn.next { margin-right: 18px; }


.loader {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:#fff;
  z-index:5; transition:opacity 0.3s ease;
  background-image:url('/img/SF_pitchv5FINAL-part-1.webp');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
}
.loader.hidden { opacity:0; pointer-events:none; }
.loader p { color:white; text-shadow:2px 2px 3px #000000; font-size:22px; margin-bottom:10vh; }

.spinner {
  width:48px; height:48px;
  border:4px solid #ccc;
  border-top-color:#333;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-bottom:1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

.modal {
  display:none; position:fixed; z-index:50;
  left:0; top:0; width:100%; height:100%;
  overflow:auto; background-color:rgba(0,0,0,0.4);
}
.modal-content {
  background-color:#fefefe; margin:10% auto;
  padding:20px; border:1px solid #888;
  width:80%; text-align:center; height:60vh;
}
.close {
  color:#aaa; float:right; font-size:28px; font-weight:bold;
}
.close:hover, .close:focus {
  color:black; text-decoration:none; cursor:pointer;
}
#videoModal iframe {
  width:100%; height:100%; border:none; max-height:600px;
}
#videoBtn {
  margin: 0 5% 0 auto;
  text-align: center;
  font-size: 14px;
}
#videoBtn img {
  margin: 5px auto;
}
#videoBtn:hover {
  color: #FFDB57;
}
.main {
  max-width: 80vw;
  width: 100%;
  margin: 30px auto;
}
.main ol {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 30px;
}
.main ol a, .main ol a:link, .main ol a:visited {
  color: #FFDB57;
}
.main ol a:hover {
  color: #fff;
}
.main img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .desktoponly {
	display: none;
  }
  .title img {
	max-width: 262px;
	height: auto;
	width: 100%;
  }
}