/* site.css - the public pages' own furniture.
 *
 * The three pages at deuteros.dk - the front door, About, and the sequel's
 * holding page - are one place and must look like it, so the frame lives
 * here rather than three times over. The GAMES do not use this file: the
 * port has its own stylesheet and the sequel has `css/shell.css`.
 *
 * THE PALETTE IS EARTH CITY'S, COUNTED. The port draws a 16-pen Amiga
 * screen, so the picture has exactly sixteen colours in it and each one
 * can be measured. In the station screen:
 *
 *     #000000  50.1%   the void
 *     #333300  15.1%   \
 *     #556633   8.1%    |  the structure - four olive greys
 *     #778855   4.9%    |
 *     #99aa77   3.7%   /
 *     #aa0000   6.8%   \
 *     #cc2200   4.8%    |  the sky - a four-step red ramp
 *     #880000   2.7%    |
 *     #660000   2.0%   /
 *     #ffffff   0.9%    the lettering
 *     #ffff00   0.2%    <- what this file used to be built out of
 *
 * Red out of the sky, white out of the lettering, grey out of the
 * structure. The game says the same thing twice more: `ending.css`'s
 * bulletin heading pulses #ff0000 -> #ee0000 -> #aa0000 -> #550000,
 * which is $20298's ramp 1, and the INTRO's own pen table at $2126a is
 * four greys and a red ramp - 886 664 442 220 / d00 b00 900.
 *
 * THE CARD IS STILL THE SEND-OFF'S CARD in shape, border and behaviour.
 * Its COLOURS have deliberately diverged: `ending.css` leads with
 * #ffff00, which is two parts in a thousand of the game it comes out
 * of, and recolouring a shipped screen is design's call and not this
 * file's.
 *
 * The one borrowed thing is the BACKGROUND CAST. Pure black was right
 * for a screen inside a 320x256 window and reads as a void at full
 * width; deuteros.com sits its whole site on #000400, a black with a
 * green bias, and that is the difference between a page that is dark
 * and a page that is switched off. The structural ideas - a rule with a
 * mark in the middle of it, small widely-tracked uppercase, one column -
 * are from the same place.
 */
:root {
  color-scheme: dark;
  --hot: #cc2200;        /* the brightest sky red - headings, the wordmark */
  --red: #aa0000;        /* the next one down - edges that are alive */
  --paper: #e9ece4;      /* the lettering */
  --ink: #99aa77;        /* body, and the lit faces of the structure */
  --dim: #778855;        /* subordinate */
  --edge: #556633;       /* rules and borders */
  --card: #0b0e07;       /* the face of a card */
  --void: #000400;       /* the page behind everything */
}
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--void);
  color: var(--paper);
  font: 400 clamp(13px, 1.5vw, 17px)/1.5 ui-sans-serif, system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(2rem, 7vh, 5rem) 1rem clamp(2rem, 5vh, 4rem);
  gap: 1.6rem;
  position: relative; overflow-x: hidden;
}

/* ---- THE SKY ---------------------------------------------------------
 *
 * Three layers of stars at three sizes, each a repeating radial-gradient,
 * drifting at three speeds so the field has depth without one image being
 * fetched or a line of JavaScript running. The nearest layer is the
 * brightest and the fastest, which is the whole of parallax.
 *
 * It is behind the page and it never catches the pointer.
 */
.sky {
  position: fixed; inset: -50% -10% -10%; z-index: -1; pointer-events: none;
  background-repeat: repeat;
  animation: drift linear infinite;
  opacity: .55;
}
.sky.a {
  background-image:
    radial-gradient(1px 1px at 20% 30%, #cfe0b4 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, #99aa77 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 85%, #cfe0b4 50%, transparent 51%);
  background-size: 340px 340px;
  animation-duration: 210s;
}
.sky.b {
  background-image:
    radial-gradient(1px 1px at 10% 70%, #7a825e 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 25%, #99aa77 50%, transparent 51%);
  background-size: 220px 220px;
  animation-duration: 420s; opacity: .4;
}
.sky.c {
  background-image:
    radial-gradient(2px 2px at 55% 40%, #ffffcc 50%, transparent 51%);
  background-size: 700px 700px;
  animation-duration: 120s; opacity: .5;
}
@keyframes drift { to { transform: translateY(33.333%); } }
@media (prefers-reduced-motion: reduce) { .sky { animation: none; } }

/* ---- the wordmark ---------------------------------------------------- */
h1 {
  margin: 0; font-size: clamp(26px, 5.5vw, 58px);
  letter-spacing: clamp(.14em, 1.1vw, .34em);
  color: var(--hot); font-weight: 700; line-height: 1;
  /* the glow is the CRT, not a drop shadow */
  text-shadow: 0 0 .7em rgba(204, 34, 0, .38);
}
h1 small {
  display: block; font-size: .32em; font-weight: 400; letter-spacing: .3em;
  color: var(--ink); margin-top: .9em; text-shadow: none;
}
.sub {
  margin: 0; max-width: 36em; color: var(--ink);
  letter-spacing: .14em; font-size: .86em; text-transform: uppercase;
}

/* ---- A RULE WITH SOMETHING IN THE MIDDLE OF IT -----------------------
 *
 * deuteros.com's divider: two lines with a mark between them. The mark is
 * a small lit disc - the port's own icon, a world half in daylight,
 * reduced to the one shape it is.
 */
.rule {
  display: flex; align-items: center; gap: 1rem;
  width: min(70rem, 92vw); color: var(--edge);
}
.rule::before, .rule::after {
  content: ""; flex: 1; height: 2px; background: currentColor; opacity: .55;
}
.rule i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 .6em var(--red);
}

/* ---- the doors ------------------------------------------------------- */
#items {
  display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center;
  width: min(72rem, 94vw);
}
/*
 * THE CARD IS THE SEND-OFF'S CARD. Colours, border, radius and the hover
 * are `ending.css`'s to the value - what is new is that it leads with a
 * picture, the way the sequel's own research cards do: *every card leads
 * with the picture of whatever it is about, and the card is the control -
 * there is no separate row to click.*
 */
.item {
  display: flex; flex-direction: column; gap: .15em;
  flex: 1 1 17rem; max-width: 22rem; min-width: 13rem;
  padding: 0 0 .9em; text-decoration: none; color: var(--paper);
  border: 1px solid var(--edge); border-radius: .5em; background: var(--card);
  overflow: hidden;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.item img {
  /*
   * 4:3, BECAUSE AN AMIGA PIXEL IS NOT SQUARE. Play report: *the images
   * are not scaled right, they are compressed, makes it look odd.* A
   * lores screen is 320x200 filling a 4:3 display, so a pixel is a fifth
   * taller than it is wide and the picture presented 1:1 comes out
   * squat. The renders are written aspect-corrected; this is the shape
   * they are corrected TO.
   */
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; margin-bottom: .75em;
  /* the port's frames are 320x256 of real pixels and stay that way */
  image-rendering: pixelated;
  border-bottom: 1px solid var(--edge);
  filter: saturate(.92) brightness(.88);
  transition: filter .15s;
}
/* the gate is a painting, not a bitmap: it may be smoothed */
.item.art img { image-rendering: auto; }
.item b { letter-spacing: .12em; font-size: .95em; }
.item span {
  color: var(--ink); font-weight: 400; font-size: .82em; padding: 0 1em;
}
.item:hover, .item:focus-visible {
  background: var(--hot); border-color: var(--hot); color: var(--paper);
  transform: translateY(-2px); outline: none;
}
.item:hover span, .item:focus-visible span { color: #220200; }
.item:hover img, .item:focus-visible img { filter: none; }
@media (prefers-reduced-motion: reduce) { .item { transition: none; } }

/* ---- what is underneath ---------------------------------------------- */
nav { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
nav a {
  color: var(--ink); text-decoration: none; font-size: .82em;
  letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid transparent; padding-bottom: .15em;
}
nav a:hover, nav a:focus-visible {
  color: var(--hot); border-bottom-color: var(--red); outline: none;
}
.foot {
  margin: 0; color: var(--dim); font-size: .76em; letter-spacing: .1em;
  max-width: 40em;
}

/* ---- a page that is mostly a statement -------------------------------- */
.plate {
  width: min(52rem, 92vw); border: 1px solid var(--edge); border-radius: .5em;
  background: var(--card); overflow: hidden;
}
.plate img { display: block; width: 100%; height: auto; }
.prose {
  width: min(40rem, 92vw); text-align: left; color: var(--paper);
}
.prose p { margin: 0 0 1em; }
.status {
  color: var(--hot); letter-spacing: .26em; text-transform: uppercase;
  font-size: .8em; margin: 0;
}