/* IBM VGA 8x16 — int10h.org, CC BY-SA 4.0 by VileR */
@font-face {
  font-family: "IBM VGA 8x16";
  src: url("/fonts/WebPlus_IBM_VGA_8x16.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0000a8;
  --desk: #000084;
  --desk-hi: #0000c0;
  --gray: #aaaaaa;
  --yellow: #fefe54;
  --white: #ffffff;
  --cyan: #33d6d6;
  --green: #54fe54;
  --link: #33d6d6;
  --rule: #4a4ac0;
  /* Desktop dither tones: a light lavender field flecked with a sparse dark
     purple ░, kept separate from --desk so the editor pane stays blue. */
  --desk-bg: #bbaed4;
  --desk-dither: #3f2f63;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-family: "IBM VGA 8x16", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5;
  /* Main prose is white; yellow is reserved as an accent for specific markdown
     styles (code strings, pre code) rather than the default body text. */
  color: var(--white);
  /* Turbo Vision desktop: a fine two-tone dither. The 4px tile renders one 2px
     quadrant in dark purple over a lavender field (~25% fill), mimicking the
     CP437 ░ pattern. */
  background-color: var(--desk-bg);
  background-image: repeating-conic-gradient(var(--desk-dither) 0% 25%, var(--desk-bg) 0% 100%);
  background-size: 4px 4px;
  /* The window fills the viewport so the editor pane scrolls internally (via
     the custom scroll bar) rather than the whole page scrolling. */
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}

/* Turbo Vision menu bar: a light-gray strip (VGA color 7) with black item text,
   a red hot-key letter (color 4), and a green highlight block on the active item
   (color 2, black text) — the standard cpMenuView palette 0x70 / 0x74 / 0x20 /
   0x24. It matches the window's width and sits flush on top of it, capping the
   window like the menu bar on a Turbo Vision screen. */
.menubar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 2px 8px;
  background: var(--gray);
  color: #000;
  font-size: 16px;
}
.menubar a {
  color: #000;
  text-decoration: none;
  padding: 1px 10px;
}
.menubar a:hover,
.menubar a:focus {
  background: #00a800; /* VGA green (color 2) — the selected-item bar */
  color: #000;
  outline: none;
}
.menubar .hot {
  color: #a80000; /* VGA red (color 4) — the Alt hot key */
}

/* Turbo C++ edit window. The top and bottom rules are drawn by .titlebar /
   .botbar so their text controls can sit *in* the line like real CP437 frame
   characters; the left and right rails are the .win pseudo-elements below.
   The scroll bar sits just inside the right rail. */
.win {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  background: var(--blue);
}

/* Left & right frame rails: two vertical 1px white lines = the CP437 ║ glyph.
   They run between the top and bottom rules (which sit at the vertical centre
   of the 24px title/status rows, i.e. 12px in) so all four corners turn
   cleanly instead of poking past them. The 12px left/right inset matches that
   12px top/bottom blue so the frame has a uniform blue gutter on all sides. */
.win::before,
.win::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background: linear-gradient(to right, var(--white) 0 1px, transparent 1px 3px, var(--white) 3px 4px);
}
.win::before {
  left: 12px;
}
.win::after {
  right: 12px;
}

/* Shared double horizontal rule for the top and bottom frame lines. Two 1px
   white lines with a 2px gap = the CP437 ═ glyph. Its ends inset 12px to meet
   the left/right rails at the corners (matching the 12px blue above/below). */
.titlebar,
.botbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
  white-space: nowrap;
}
.titlebar::before,
.botbar::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: linear-gradient(var(--white) 0 1px, transparent 1px 3px, var(--white) 3px 4px);
}

/* Children sit above the rule on a solid blue patch so they "punch through"
   it, exactly like a frame character interrupting the border. */
.titlebar > *,
.botbar > * {
  position: relative;
  z-index: 1;
  background: var(--blue);
}

.titlebar {
  justify-content: center;
}
.title {
  color: var(--white);
  padding: 0 10px;
}

/* Turbo Vision close box: top-left control that returns to the index.
   Authentic frame-icon color is light green (VGA color 10) per the
   standard cpBlueWindow palette. */
.closebox {
  position: absolute;
  left: 18px;
  color: var(--green);
  padding: 0 2px;
  text-decoration: none;
}
.closebox:hover {
  color: var(--white);
}

/* Functional vertical scroll bar, sitting over the right frame rail so it
   reads as the scroll bar occupying that stretch of border. It is inset from
   the top and bottom so a segment of the rail shows below the top-right corner
   and above the bottom-right corner, keeping the frame's corner joins visible.
   The arrows and thumb are real elements so blog.js can wire up clicks and
   dragging; the track shows the dotted cyan rail behind the thumb. */
.scroll-v {
  position: absolute;
  top: 30px;
  bottom: 30px;
  right: 9px;
  width: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  color: var(--cyan);
  background-color: var(--blue);
  user-select: none;
}
.sb-up,
.sb-down {
  flex: none;
  height: 14px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
}
.sb-track {
  position: relative;
  flex: 1;
  min-height: 0;
  cursor: pointer;
  background-image: repeating-linear-gradient(var(--blue) 0 1px, var(--rule) 1px 2px);
}
.sb-thumb {
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 16px;
  background: var(--cyan);
  cursor: grab;
}
.sb-thumb:active {
  cursor: grabbing;
}

/* Code blocks get a horizontal scroll bar that mirrors the window's: blog.js
   wraps each overflowing <pre> in a .codeblock and appends a .scroll-h. The
   native bar is hidden so only the Turbo Vision one shows. */
.codeblock {
  position: relative;
  margin: 1em 0;
}
.codeblock pre {
  margin: 0;
  scrollbar-width: none;
}
.codeblock pre::-webkit-scrollbar {
  display: none;
}
.scroll-h {
  display: flex;
  height: 10px;
  margin-top: 2px;
  color: var(--cyan);
  background-color: var(--blue);
  user-select: none;
}
.sb-left,
.sb-right {
  flex: none;
  width: 12px;
  line-height: 10px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.sb-htrack {
  position: relative;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  background-image: repeating-linear-gradient(to right, var(--blue) 0 1px, var(--rule) 1px 2px);
}
.sb-hthumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 16px;
  background: var(--cyan);
  cursor: grab;
}
.sb-hthumb:active {
  cursor: grabbing;
}

.content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* The native scroll bar is hidden and replaced by the Turbo Vision one
     (.scroll-v), which blog.js keeps in sync with this element's scroll. */
  scrollbar-width: none;
  padding: 20px 30px;
  /* Break long words / URLs so they wrap instead of overflowing the post.
     Inherited by prose and links; ignored inside <pre> (white-space: pre),
     so code blocks keep their horizontal scroll. */
  overflow-wrap: break-word;
}
.content::-webkit-scrollbar {
  display: none;
}

h1 {
  color: var(--yellow);
  font-size: 32px;
  margin: 0 0 0.5em;
  line-height: 1.2;
}
h2 {
  color: var(--yellow);
  font-size: 32px;
  margin: 1.2em 0 0.4em;
  line-height: 1.2;
}
h3 {
  color: var(--cyan);
  font-size: 16px;
  margin: 1.2em 0 0.3em;
  text-transform: uppercase;
}

p,
li {
  font-size: 16px;
}
strong {
  color: var(--white);
}
em {
  color: var(--cyan);
}
a {
  color: var(--link);
}
a:hover {
  color: var(--white);
}

.meta {
  color: var(--cyan);
  font-size: 16px;
  margin-bottom: 1em;
  font-style: italic;
}
.readmore {
  color: var(--link);
  display: inline-block;
  margin-top: 0.5em;
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1.4em 0;
}

ul,
ol {
  padding-left: 1.4em;
}
li::marker {
  color: var(--cyan);
}

.archive {
  list-style: none;
  padding-left: 0;
}
.archive li {
  padding: 3px 0;
}
.archive li::before {
  content: "\25A0\00A0";
  color: var(--cyan);
}

blockquote {
  margin: 1em 0;
  padding-left: 12px;
  border-left: 2px solid var(--cyan);
  color: var(--white);
}

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

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}
th,
td {
  border: 1px solid var(--rule);
  padding: 5px 10px;
  text-align: left;
}
th {
  color: var(--white);
}

/* Inline code: cyan against the blue window, like a highlighted identifier. */
code {
  color: var(--cyan);
}

/* Code blocks are unhighlighted now, so lean on the CP437 frame: the darker
   --desk panel, a full rule border with a brighter cyan accent rail on the
   left, and yellow text for the classic Turbo string color. */
pre {
  background: var(--desk);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cyan);
  padding: 12px 16px;
  overflow-x: auto;
  line-height: 1.45;
  tab-size: 2;
}
pre code {
  color: var(--yellow);
}

/* --- Mobile --- */
@media (max-width: 600px) {
  body {
    padding: 8px;
  }
  .content {
    padding: 14px 26px;
  }
  h1,
  h2 {
    font-size: 24px;
  }
}