/* ------------------------------------------------------------------
   Twilight (1998) - modern-Chrome compatibility layer
   ------------------------------------------------------------------
   This file adds NOTHING to the visual design. It only restores, in
   modern Chrome, the rendering the original markup produced in 1998
   browsers, and styles the lightbox that replaces the old
   window.open() image pop-ups.

   The pages themselves still carry their original HTML 3.2 markup:
   <body background/bgcolor/text/link>, <font>, <center>, nested
   layout tables and the original quirks-mode doctype. Deleting this
   stylesheet (and its <link>) returns the pages to their 1998 state.
   ------------------------------------------------------------------ */

/* --- 1. Background art -------------------------------------------
   The backdrops are single top-left-anchored paintings 1100px wide
   whose right and bottom edges fade to solid black, matching each
   page's bgcolor="#000000". In 1998 nobody had a viewport wider than
   1100px, so the <body background> tile seam never appeared. On a
   modern display the artwork visibly repeats at x=1100.

   Anchor, scale and stacking are left exactly as the attribute set
   them (top-left, natural size, scrolls with the page). Only the
   repeat axis is constrained to the one the art was drawn for -- so
   the page looks, at every width, the way it looked on the screens it
   was designed for. background-image itself still comes from the
   original background="..." attribute.                            */
body {
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: scroll;
  background-size: auto;
}

/* The splash page's bg.jpg is a 26x1000 vertical gradient strip that
   was drawn to tile across the window; its bottom row is white, which
   is that page's bgcolor. It keeps its horizontal repeat.          */
body.bg-tile-x {
  background-repeat: repeat-x;
}

/* --- 2. QuickTime replacement ------------------------------------
   The old <embed> reserved 160x140: a 160x120 movie with the
   QuickTime controller strip in the 20px underneath. The wrapper
   keeps that exact footprint so the centred column does not reflow;
   the <video> inside stays at the movie's native 160x120 (Chrome
   draws its controls over the bottom of the frame).               */
.qt-embed {
  display: inline-block;
  width: 160px;
  height: 140px;
  background: #000;
  line-height: 0;
}
.qt-embed video {
  display: block;
  width: 160px;
  height: 120px;
  background: #000;
}
.qt-embed .qt-fallback {
  display: block;
  line-height: normal;
  font: 10px/1.2 Verdana, Geneva, sans-serif;
  color: #e3ab42;
  padding: 2px 0 0;
}

/* --- 3. Sub-page footer ------------------------------------------
   72px of clear space above the Paramount bug and copyright line on the
   sub pages. Padding, not margin, so it cannot collapse into the
   <pre></pre> spacer above it -- this adds exactly 72px.             */
center.pagefoot {
  padding-top: 72px;
}

/* --- 4. Lightbox --------------------------------------------------
   Stands in for the old
     window.open('img_bg/x.jpg','externalh','width=420,height=320,...')
   pop-ups, which modern Chrome blocks or opens as a full tab. The
   pop-up windows were sized to the image plus window chrome
   (400x300 -> 420x320, 300x400 -> 320x420), so the overlay shows each
   picture at its natural size on black, as the pop-up did.        */
#tw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
  /* No fade or motion: the pop-up window it replaces appeared at
     once, and an animation here would be a new effect. */
}
#tw-lightbox .tw-frame {
  position: relative;
  background: #000;
  border: 1px solid #3a3a3a;
  line-height: 0;
  max-width: 94vw;
  max-height: 94vh;
}
#tw-lightbox .tw-frame img {
  display: block;
  /* natural size, exactly as the pop-up showed it; only shrink if the
     viewport is genuinely smaller than the picture */
  max-width: 94vw;
  max-height: calc(94vh - 2px);
  width: auto;
  height: auto;
}
#tw-lightbox .tw-close {
  position: absolute;
  top: -13px;
  right: -13px;
  width: 26px;
  height: 26px;
  border: 1px solid #3a3a3a;
  border-radius: 13px;
  background: #000;
  color: #e3ab42;
  font: 15px/24px Verdana, Geneva, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}
#tw-lightbox .tw-close:hover {
  color: #fff;
}
