/* ---------------------------------------------------------------------
   izarravm.com shared stylesheet

   Colours are restricted to the 16-entry IBM VGA/EGA palette below.
   Nothing outside this list may be used.

   Note: CSS `ridge` / `outset` / `inset` border styles derive their own
   light and dark shades from the base colour, which lands outside the
   palette. Panels therefore use a flat black border plus a hard offset
   shadow (--drop), which names every colour explicitly.
   --------------------------------------------------------------------- */

:root {
  --black:    #000000;
  --blue:     #0000AA;
  --green:    #00AA00;
  --cyan:     #00AAAA;
  --red:      #AA0000;
  --magenta:  #AA00AA;
  --brown:    #AA5500;
  --lgray:    #AAAAAA;
  --dgray:    #555555;
  --lblue:    #5555FF;
  --lgreen:   #55FF55;
  --lcyan:    #55FFFF;
  --lred:     #FF5555;
  --lmagenta: #FF55FF;
  --yellow:   #FFFF55;
  --white:    #FFFFFF;

  --edge: 2px solid var(--black);
  --drop: 4px 4px 0 var(--dgray);
  --drop-sm: 3px 3px 0 var(--dgray);

  /* Typefaces: an old-catalogue serif for reading, a Palatino-style face
     for display, Courier for anything that stands in for screen output,
     and Verdana for the few control-like elements. */
  --font-body:    Georgia, "Times New Roman", Times, serif;
  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --font-mono:    "Courier New", Courier, monospace;
  --font-ui:      Verdana, Geneva, Arial, Helvetica, sans-serif;
}

html { font-size: 18px; }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--black);
  background-color: var(--lgray);
  background-image:
    repeating-linear-gradient(90deg, var(--dgray) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg,  var(--dgray) 0 1px, var(--lgray) 1px 16px);
  font-family: var(--font-body);
  line-height: 1.55;
}

/* --- links -----------------------------------------------------------
   Every link is a reverse-video block, the way a highlighted entry looks
   in a text-mode menu. Hover flips the block the other way round.
   --------------------------------------------------------------------- */

a, a:visited {
  padding: 0 4px;
  color: var(--yellow);
  background: var(--black);
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
a:hover, a:focus-visible {
  color: var(--black);
  background: var(--yellow);
  outline: none;
  text-decoration: underline;
}

/* Links that sit on a black bar already: the block is invisible against
   the bar, so only the hover flip reads — same rule, same behaviour. */
nav a, nav a:visited,
footer a, footer a:visited { white-space: nowrap; }

/* Navigation and sidebar links get a prompt caret. It sits inside the
   block, so it inverts with the rest of the link on hover. */
nav a::before,
aside li a::before {
  content: ">\00a0";
  font-family: var(--font-mono);
}

/* Links that wrap an image or are styled as a control keep their own look. */
.image-link, .image-link:visited,
.download, .download:visited {
  padding: 0;
  background: none;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
}
.image-link:hover { background: none; }

/* --- page shell --- */

.page {
  width: min(980px, calc(100% - 24px));
  margin: 12px auto 20px;
  background: var(--lgray);
  border: var(--edge);
  box-shadow: 6px 6px 0 var(--dgray);
}

.top {
  padding: 6px 12px;
  color: var(--white);
  background: var(--red);
  font: bold 16px var(--font-mono);
  text-align: center;
  letter-spacing: 1px;
}

header {
  padding: 16px 12px 12px;
  text-align: center;
  background: var(--lgray);
  border-bottom: 2px solid var(--dgray);
}

h1 {
  margin: 4px 0;
  color: var(--red);
  text-shadow: 3px 3px 0 var(--dgray);
  font: 54px var(--font-display);
  letter-spacing: 1px;
  line-height: 1.1;
}

.tagline {
  margin: 8px auto 0;
  color: var(--black);
  font-size: 21px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding: 10px 7px;
  background: var(--black);
  text-align: center;
  font: bold 16px var(--font-mono);
}

marquee {
  display: block;
  padding: 5px;
  color: var(--lgreen);
  background: var(--black);
  font: bold 17px var(--font-mono);
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  min-height: 44px;
  padding: 12px 8px;
  background: var(--black);
  color: var(--lgray);
  text-align: center;
  font: 15px var(--font-mono);
  line-height: 1.5;
}
.footer-group { white-space: nowrap; }
/* Block display kills the inline-image baseline gap, so the badge sits
   optically centred against the footer text rather than a few px high. */
.footer-badge { display: block; }

/* --- layout --- */

main {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 16px;
  padding: 16px;
}
main.single {
  display: block;
  padding: 16px;
}

.story-column { grid-column: 1; grid-row: 1; min-width: 0; }
aside { grid-column: 2; grid-row: 1; min-width: 0; }

/* --- boxes --- */

.box {
  margin-bottom: 16px;
  background: var(--lgray);
  border: var(--edge);
  box-shadow: var(--drop);
}
.box:last-child { margin-bottom: 0; }

.box h2 {
  margin: 0;
  padding: 7px 14px;
  color: var(--white);
  background: var(--red);
  border-bottom: var(--edge);
  font: bold 19px var(--font-mono);
  letter-spacing: 1px;
  line-height: 1.35;
}

.box-body {
  padding: 16px;
  background: var(--white);
}

/* Vertical rhythm runs on bottom margins only, so the first line of any
   column starts flush with the top of the box and with any image beside
   it. Nested content (the gallery's text column) needs this too, which a
   direct-child rule would miss. */
p { margin: 0 0 1em; }
.box-body > :last-child,
.box-body > * > :last-child,
.box-body > * > * > :last-child { margin-bottom: 0; }

/* --- downloads --- */

.downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.download, .download:visited {
  display: block;
  padding: 16px 12px;
  color: var(--black);
  background: var(--lgray);
  border: var(--edge);
  box-shadow: var(--drop-sm);
  text-align: center;
  text-decoration: none;
  font: bold 19px var(--font-ui);
  line-height: 1.3;
}
.download:hover { background: var(--lgray); color: var(--blue); }
.download:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.download-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.download-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.download small {
  display: block;
  margin-top: 10px;
  font: normal 16px var(--font-mono);
  line-height: 1.4;
}

.new {
  color: var(--red);
  font-weight: bold;
  animation: blink .9s steps(1) infinite;
}
@keyframes blink { 50% { visibility: hidden; } }

/* --- images and figures --- */

img { max-width: 100%; height: auto; }

.photo, .scan {
  display: block;
  padding: 3px;
  background: var(--white);
  border: var(--edge);
  box-shadow: var(--drop-sm);
}
.scan { margin: 0 auto; }

.gallery {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 10px;
  align-items: start;
}

.screenshots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

figure { margin: 0; }
figcaption {
  margin-top: 9px;
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

/* Left-aligned rather than centred, so the figure's edge sits on the same
   axis as the text it interrupts. Captions stay centred under the image. */
.story-figure {
  width: min(100%, 642px);
  margin: 16px 0 18px;
}
.story-figure--small { width: min(100%, 281px); }
.story-figure--medium { width: min(100%, 600px); }
.story-figure .photo { width: 100%; }

.side-logo {
  display: block;
  margin: 0 auto 8px;
  image-rendering: pixelated;
}
.sidebar-photo { display: block; margin: 12px auto 8px; }

.badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.badges img { max-width: none; image-rendering: auto; }

/* --- prose --- */

.story-copy { max-width: 760px; margin: 0 auto; }
.story-copy p { margin: 0 0 1em; line-height: 1.6; }
.story-copy p:last-child { margin-bottom: 0; }

ul { margin: 0 0 0 20px; padding: 0; }
li { margin: 7px 0; }

/* The sidebar lists are stacks of link blocks: the blocks already mark
   each entry, so the discs are redundant. */
aside ul { margin-left: 0; list-style: none; }
aside li { margin: 8px 0; }

/* --- tables --- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
th, td {
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--dgray);
  vertical-align: top;
}
th {
  text-align: left;
  background: var(--lgray);
  font-family: var(--font-mono);
}
.spec-table th { width: 130px; }
.product-table th:first-child,
.product-table td:first-child,
.product-table th:nth-child(2),
.product-table td:nth-child(2) {
  white-space: nowrap;
}

/* --- counter --- */

.counter {
  width: max-content;
  margin: 10px auto 2px;
  padding: 3px 7px;
  color: var(--lgreen);
  background: var(--black);
  border: var(--edge);
  font: bold 16px var(--font-mono);
  letter-spacing: 2px;
}

/* --- narrow screens --- */

@media (max-width: 760px) {
  h1 { font-size: 42px; }
  main, .gallery, .downloads, .screenshots { grid-template-columns: 1fr; }
  aside, .story-column { grid-column: 1; grid-row: auto; }
  nav { gap: 6px 12px; }
  .page { margin-bottom: 12px; box-shadow: none; }
  main, main.single { gap: 12px; padding: 12px; }
  .box-body { padding: 12px; }
  .product-table { font-size: 16px; }
  th, td { padding: 5px; }
}