/* About page: sketchbook slideshow, demo video, book row, social links. */

.slideshow { margin: 1.8rem auto 1.4rem; max-width: 460px; }

.slide-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0E0C1E;
  border: 1px solid rgba(255,255,255,0.12);
}

.slide-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(11,10,24,0.6);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(3px);
}

.slide-nav:hover { background: rgba(11,10,24,0.85); border-color: #8CFF3B; }
.slide-nav.prev { left: 8px; }
.slide-nav.next { right: 8px; }

.slide-caption {
  text-align: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.95rem;
  color: #7EE9D0;
  margin: 0.7rem 0 0.5rem;
}

.slide-dots { display: flex; gap: 0.45rem; justify-content: center; }

.slide-dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  cursor: pointer;
}

.slide-dot.on { background: #8CFF3B; border-color: #8CFF3B; }

/* ---- demo video ---- */
.video-wrap {
  margin: 1.4rem 0 0.5rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: #0E0C1E;
}

.video-wrap video { display: block; width: 100%; height: auto; }

/* ---- book covers ---- */
.ab-books { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }

.ab-books a {
  display: block; width: 150px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ab-books a:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 30px rgba(233,79,224,0.45); }
.ab-books img { display: block; width: 100%; height: auto; }

/* ---- social links ---- */
.ab-links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---- sketchbook thumbnail + dialog ---- */
/* Floated so the story wraps around it, like a photo in a magazine column.
   Below 620px it goes full-width and stops floating — a 150px image with three
   words beside it is worse than no float at all. */
.sketch-thumb {
  display: block;
  float: left;
  width: 150px;
  margin: 0.3rem 1.4rem 1rem 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  overflow: hidden;
  background: #0E0C1E;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sketch-thumb:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: #8CFF3B;
  box-shadow: 0 10px 26px rgba(140,255,59,0.28);
}

.sketch-thumb img { display: block; width: 100%; height: auto; }

.clearfix::after { content: ""; display: block; clear: both; }

@media (max-width: 620px) {
  .sketch-thumb { float: none; width: 170px; margin: 1rem auto 1.3rem; }
}

.sketch-thumb-label {
  display: block;
  padding: 0.5rem 0.4rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #7EE9D0;
}

.slide-overlay {
  position: fixed;
  overflow-y: auto;
  inset: 0;
  z-index: 9000;
  background: rgba(5,4,15,0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.slide-overlay[hidden],
.slide-overlay.is-shut { display: none !important; }

.slide-modal {
  position: relative;
  background: #14132A;
  border: 1px solid #3A3760;
  border-radius: 16px;
  padding: 2.4rem 1.1rem 1.2rem;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.slide-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #3A3760;
  background: #221F3D;
  color: #EDECFF;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.slide-close:hover { border-color: #FF2E88; color: #fff; }

.slideshow { margin: 0 auto; }

.ab-signoff {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #7EE9D0;
  margin-top: 1rem;
}


/* Same teaser as the landing page. index.html loads landing.css and this page
   loads about.css, so the rule has to live in both — keep them in step. */
.coming-soon {
  text-align: center;
  font-family: 'Fredoka', 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--pink);
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  letter-spacing: 0.01em;
  margin: 1.4rem auto 0;
  text-shadow: 0 0 14px rgba(233, 79, 224, 0.5);
}