/* ------------------------------------------------------------------
   THE RELIC (1997) - modern-browser compatibility layer.

   This file adds NOTHING to the original page design.  Every rule is
   scoped to a .relic-* class that only appears in markup this rebuild
   introduced (the image/video lightbox and the sound toggle).  The
   original pages keep their 1997 presentational attributes -- bgcolor,
   background, text/link/vlink, <font>, <center>, <nobr>, tables and
   image maps -- which modern Chrome still honours natively.

   Palette is taken from the original pages:
     background  #000000
     body text   #DD0000  (some pages #FFFFFF)
     link        #DD0000   visited #0000FF   accent #00FF00
   ------------------------------------------------------------------ */

/* ---------- lightbox (replaces window.open() popups) ---------- */

.relic-lb[hidden] { display: none !important; }

.relic-lb {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the original popups were chromeless windows on a black desktop */
  background: rgba(0, 0, 0, 0.88);
  font: 12px/1.4 Verdana, Geneva, Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.relic-lb-box {
  position: relative;
  max-width: 96vw;
  max-height: 92vh;
  padding: 10px;
  background: #000000;
  border: 1px solid #dd0000;
  box-shadow: 0 0 24px rgba(221, 0, 0, 0.35);
  text-align: center;
}

/* Media is shown at its natural size -- same pixels the 1997 popup
   window showed.  It only shrinks if the viewport is smaller. */
.relic-lb-stage img,
.relic-lb-stage video {
  display: block;
  max-width: calc(96vw - 24px);
  max-height: calc(92vh - 56px);
  margin: 0 auto;
  background: #000000;
}

.relic-lb-cap {
  margin: 8px 2px 0;
  color: #dd0000;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.relic-lb-close {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 8px 4px;
  background: #000000;
  border: 1px solid #dd0000;
  color: #dd0000;
  font: 11px/1 Verdana, Geneva, Arial, sans-serif;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.relic-lb-close:hover,
.relic-lb-close:focus {
  background: #dd0000;
  color: #000000;
  outline: none;
}

/* ---------- sound toggle (Chrome blocks autoplay; the 1997
     <EMBED AUTOSTART=true> had no control of its own) ---------- */

.relic-sound {
  position: fixed;
  right: 6px;
  bottom: 6px;
  z-index: 2147482000;
  padding: 2px 7px 3px;
  background: #000000;
  border: 1px solid #dd0000;
  color: #dd0000;
  font: 10px/1.3 Verdana, Geneva, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.55;
}

.relic-sound:hover,
.relic-sound:focus {
  opacity: 1;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .relic-lb { transition: none; }
}

/* ---------- tunable knobs ---------- */

:root {
  --relic-font-scale: 1.15;  /* 15% larger than the 1997 sizes */
  --relic-measure: 690px;    /* width of the body text column   */
  --relic-gutter: 15px;      /* minimum clearance from the brick */
  --relic-intro-gap: 36px;   /* space between the intro screen's blocks */
  --relic-credits-gap: 49px; /* space under the intro's credits block    */
}

/* ---------- vertical spacers ----------

   The 1997 pages used 62 empty <pre> elements to open up vertical space
   between blocks.  Those are gone; each is now <div class="relic-gap">,
   with the spacing declared here instead of implied by an abused tag.

   A spacer is measured in lines, using the `lh` unit, so it reproduces
   exactly the line box an empty <pre> used to hold -- fractions and all
   -- rather than a rounded pixel guess.  The 1em margins are the ones
   <pre> carried, and they still collapse against neighbouring blocks
   the same way.

   Most spacers are one line.  The intro screens and menu.html used
   zero-line ones, where the margins alone did the work, and clips.html
   has a five-line gap beneath the table.  That is now recorded as data
   rather than left to stray whitespace in a 1997 source file.

   Change --relic-gap-lines on .relic-gap to open the layout up.     */

.relic-gap {
  font: calc(13px * var(--relic-font-scale)) / normal monospace;
  height: calc(1lh * var(--relic-gap-lines, 1));
  margin-block: calc(13px * var(--relic-font-scale));
}

.relic-gap--0 { --relic-gap-lines: 0; }
.relic-gap--5 { --relic-gap-lines: 5; }

/* ---------- type scale ----------

   <font size=...> maps to CSS *absolute-size keywords*, which resolve
   against the browser's default font size rather than inheriting from
   the parent.  Setting `body { font-size: 115% }` therefore scales the
   unstyled text but leaves every <font size> element exactly where it
   was, collapsing the hierarchy (plain text 18.4px vs "+1" still 18px).

   So each legacy size is restated explicitly.  The 1997 values, on a
   16px base, were:

       (no font tag)  16px      size=+1  18px      size=+2  24px
       size=-1        13px      size=+3  32px

   Change --relic-font-scale above to rescale all of them together.

   The empty <pre> elements used as vertical spacers are deliberately
   left alone -- they hold no text, and scaling them would only stretch
   the gaps between blocks.                                            */

body                             { font-size: calc(16px * var(--relic-font-scale)); }
font[size="-1"], font[size="2"]  { font-size: calc(13px * var(--relic-font-scale)); }
font[size="+1"], font[size="4"]  { font-size: calc(18px * var(--relic-font-scale)); }
font[size="+2"], font[size="5"]  { font-size: calc(24px * var(--relic-font-scale)); }
font[size="+3"], font[size="6"]  { font-size: calc(32px * var(--relic-font-scale)); }

/* The empty <pre> elements are vertical spacers.  They default to
   Chrome's fixed-width font size (13px) rather than inheriting, so the
   `body` rule above would otherwise jump them to 18.4px -- a 41%
   taller gap instead of 15%.  Pin them to the same 15%.            */
pre                              { font-size: calc(13px * var(--relic-font-scale)); }

/* ---------- footer navigation ----------

   The seven links are wrapped in <nobr>, which is used nowhere else on
   the site, and the "-" between them sits in its own span: it is not
   part of any link, so it is neither clickable nor red.  White on every
   page, whichever body text colour that page declares (#DD0000 or
   #FFFFFF).

   Both are pinned to an absolute size rather than left to inherit,
   because about_book.html leaves a <font size=+1> unclosed and the row
   sits inside it -- without this that one page's nav renders larger
   than everywhere else and wraps to two lines.

   At this size the row measures 638px inside the 690px column, so it
   stays on one line with 52px to spare.  There is deliberately no
   nowrap: below about a 900px window the column is narrower than the
   row anyway, and wrapping is the right answer there.               */

nobr,
.relic-nav-sep                   { font-size: calc(16px * var(--relic-font-scale)); }
.relic-nav-sep                   { color: #ffffff; }

/* ---------- content column ----------

   images/wall1.gif is a 1150x66 tile: brick masonry from x=0 to x=193,
   then pure black from x=194 to x=1149.  Tiled horizontally that puts a
   brick column every 1150px with a black band between them.

   The page body is a fixed-measure column centred in that black band,
   never closer to the brick than --relic-gutter:

       brick column     0 .. 193      (and again at 1150 .. 1343)
       black band     194 .. 1149
       text column    --relic-measure wide, centred in the band

   These pages were laid out for a 640px screen, where a line of body
   text ran about 90 characters.  Left to fill a modern window the same
   text runs 120-140 characters a line, which is what made the long
   pages unreadable.  The measure restores the original line length.

   Geometry, with a body margin of 8px:
     100%              = body content width      = window - 16
     min(100%, 1134px) = black band's right edge, relative to body
                         (1134 = the 1150px tile minus that 16)
     - 178px           = converts that to the band's width
   Percentages are used rather than vw units so that a vertical
   scrollbar cannot throw the centring off.

   The gutter only becomes the binding constraint on windows narrower
   than about (194 + measure + 2 x gutter); above that the column is
   --relic-measure wide and simply sits in the middle of the band.

   Pages without the tile (the intro screens, which are plain black)
   are untouched -- they have no brick column to clear.               */

body[background] blockquote {
  /* right edge of the black band, measured from the body content box */
  --relic-band-end: min(100%, 1134px);

  width: min(var(--relic-measure),
             calc(var(--relic-band-end) - 178px - 2 * var(--relic-gutter)));
  max-width: none;

  margin-left: calc(186px + max(var(--relic-gutter),
                    (var(--relic-band-end) - 178px - var(--relic-measure)) / 2));
  margin-right: 0;
}

/* ---------- intro screen ----------

   The intro screens (index.html and the index_banner* variants) are the
   only pages with no background tile, so they are addressed by the
   absence of that attribute and the content pages are untouched.

   The 1997 stack -- poster, tagline, logo, release line, ENTER -- sat on
   default paragraph spacing, which left the call to action crowded
   against the line above it and smaller than the release line.  The
   blocks are opened up, and ENTER is set larger than anything else on
   the page so it reads as the way in.                                */

body:not([background]) center {
  margin-block: var(--relic-intro-gap);
}

.relic-enter {
  display: inline-block;
  font-size: calc(40px * var(--relic-font-scale));
  letter-spacing: 0.16em;
  margin-block: calc(var(--relic-intro-gap) * 0.85);
  /* The intro screens set `text` and `bgcolor` on <body> but never a
     `link` colour, so this link fell back to the browser's default blue
     (and purple once visited).  Hold it to the site's red in both
     states.                                                          */
  color: #dd0000;
}

/* The website credits block -- the 5555 badge and its caption -- sat with
   67px of air above it and 18px below, so it read as attached to the
   Paramount logo underneath rather than sitting on its own.  This puts
   the same room beneath it as the rule above it leaves on top.       */

.relic-credits {
  display: inline-block;
  margin-bottom: var(--relic-credits-gap);
}