/* ==== Restoration extras ====
   Replaces pieces that relied on files the Wayback Machine never kept:
   the Easy_Background slideshow, the prettyPhoto lightbox and smooth-scroll. */

@font-face {
  font-family: 'MM Avant Garde';
  src: local('ITC Avant Garde Gothic Std Extra Light Condensed'), local('ITCAvantGardeStd-XLtCn');
  font-weight: normal; font-style: normal;
}

/* Fallback headline font (free, SIL OFL), used only if the original RBNo2Light isn't available */
@font-face {
  font-family: 'Saira Extra Condensed';
  src: url("fonts/saira-extra-condensed-latin-300-normal.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}

/* Full-screen background stays still while the page scrolls over it: photos (img/fullscreen/full-1.jpg ... full-6.jpg) under the stripe pattern */
html { background: #efe5df; }
body { background: transparent; }
#bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
#bg .bg-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.5s ease;
}
#bg .bg-photo.on { opacity: 1; }
#bg .bg-pattern { position: absolute; inset: 0; background: url("../img/patterns/pattern-4.png") repeat; }

/* Clear the floats used throughout the original layout */
#header::after, #feature::after, #previews::after, #quotes ul::after,
#science ul::after, #footer::after { content: ""; display: block; clear: both; }

/* "Follow us on" box: original markup is a floated list */
.top-share ul li h1 { font-size: 26px; line-height: 25px; }
.top-share ul li img { display: block; }

/* Screenshot lightbox (stands in for prettyPhoto) */
#lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center; }
#lightbox[hidden] { display: none; }
#lightbox .lb-box { position: relative; background: #333; padding: 20px 20px 16px; border-radius: 4px;
  max-width: 92vw; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
#lightbox .lb-title { color: #fff; font-size: 15px; margin-bottom: 12px; }
#lightbox .lb-img { display: block; max-width: min(640px, 86vw); max-height: 72vh; background: #e7e7e7; }
#lightbox .lb-thumbs { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
#lightbox .lb-thumbs img { width: 44px; height: 44px; object-fit: cover; border: 2px solid #777; cursor: pointer; opacity: .7; }
#lightbox .lb-thumbs img.on { border-color: #fff; opacity: 1; }
#lightbox .lb-close { position: absolute; top: 8px; right: 10px; background: none; border: 0;
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

/* Video: cover image + play button; clicking loads the YouTube player in place */
.video-poster { position: relative; display: block; width: 460px; height: 252px; background: #000; }
.video-poster img { display: block; width: 460px; height: 252px; object-fit: cover; }
.video-poster .play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px;
  background: rgba(30,30,30,.82); border-radius: 12px; transition: background .2s; }
.video-poster .play::after { content: ""; position: absolute; left: 27px; top: 14px;
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.video-poster:hover .play { background: #f20492; }