/* ===========================================================================
   Computer Room

   Reference point: a Windows 98 window on a quiet desktop, as seen on the
   family PC in the computer room around 2000. Not a GeoCities pastiche and
   not an OS simulator — no tiled backgrounds, no marquees, no fake
   minimise/maximise/close buttons. Anything that looks clickable is.

   1. One window. A grey face with 2px bevels, a title bar, a menu bar with
      pixel icons, an address bar for the breadcrumb, a sunken white document
      where all the reading happens, and a status bar for the footer.
   2. Chrome in sans, content in serif. Tahoma (Win98's successor to MS Sans
      Serif) falls back to Verdana for the chrome; Georgia for everything you
      read. System fonts only: no webfonts, no network requests, no third
      party. The low-res feel comes from the icons and bevels, not the text.

   Low stimulation is a hard constraint, not a mood. Nothing blinks, nothing
   animates, nothing autoplays, and the accent colour is used in exactly two
   places: focus rings and the NEW marker. Colours are muted versions of the
   Win98 palette; the desktop is grey-teal, not #008080.

   Bevels are box-shadows, which forced-colors mode removes — see the block
   near the end that puts real borders back.
   =========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* The window can be wide; the reading column can't. --measure caps line
     length at roughly 75 characters of Georgia, whatever the window does. */
  --window:  48rem;
  --measure: 40rem;

  --desktop:      #5F7C79;
  --face:         #C0C0C0;
  --face-ink:     #000000;
  --face-muted:   #2E2E2E;
  --face-link:    #102A6B;
  --face-visited: #4A1F70;

  --bevel-hi:     #FFFFFF;
  --bevel-light:  #DFDFDF;
  --bevel-shadow: #808080;
  --bevel-dark:   #0A0A0A;

  --title-from:   #2E3D55;
  --title-to:     #56708F;
  --title-ink:    #FFFFFF;

  --doc:          #FAFAF7;
  --doc-alt:      #EFEEE8;
  --rule:         #C9C7BE;
  --ink:          #1A1A1A;
  --ink-muted:    #555249;
  --link:         #1F3A8A;
  --visited:      #5B2A86;
  --accent:       #8A4B2A;  /* burnt umber. Focus rings and the NEW marker only. */

  --lcd-bg:       #2B332A;
  --lcd-ink:      #9FC08F;

  /* Power light in the status bar. */
  --led:          #3E9A2C;

  /* Pixel CRT */
  --px-case:    #D4D0C8;
  --px-hi:      #FFFFFF;
  --px-lo:      #808080;
  --px-screen:  #2B332A;
  --px-glow:    #7E9174;
  --px-led:     #7FA05C;

  /* Pixel icons. Muted, never primaries. */
  --px-roof:       #9A5B4A;
  --px-roof-lo:    #6E3F33;
  --px-wall:       #E6DFC9;
  --px-door:       #7A5B3E;
  --px-glass:      #8FA7B8;
  --px-book:       #5B7089;
  --px-book-lo:    #3F4F63;
  --px-paper:      #F7F6F0;
  --px-paper-edge: #6F6C63;
  --px-sea:        #6F90A8;
  --px-land:       #8FA66C;
  --px-skin:       #DDB894;
  --px-hair:       #5A4636;
  --px-shirt:      #7C8F6A;
  --px-shirt-lo:   #5C6B4F;
  --px-rss:        #C07A45;
  --px-rss-mark:   #FFFFFF;
  --px-folder:     #D9BE6A;
  --px-folder-hi:  #EAD69A;
  --px-folder-lo:  #A88E45;

  --font-chrome: Tahoma, Verdana, "Segoe UI", "DejaVu Sans", sans-serif;
  --font-read:   Georgia, "Times New Roman", serif;
  --font-mono:   ui-monospace, "Courier New", monospace;

  /* Win98 bevels: outer edge, then inner edge. */
  --raised:
    inset -1px -1px var(--bevel-dark),
    inset 1px 1px var(--bevel-light),
    inset -2px -2px var(--bevel-shadow),
    inset 2px 2px var(--bevel-hi);
  --sunken:
    inset -1px -1px var(--bevel-hi),
    inset 1px 1px var(--bevel-shadow),
    inset -2px -2px var(--bevel-light),
    inset 2px 2px var(--bevel-dark);
  --pressed:
    inset -1px -1px var(--bevel-hi),
    inset 1px 1px var(--bevel-dark),
    inset -2px -2px var(--bevel-light),
    inset 2px 2px var(--bevel-shadow);
  --shallow:
    inset -1px -1px var(--bevel-hi),
    inset 1px 1px var(--bevel-shadow);
}

/* Windows 98 had no dark mode. This is the same machine with the monitor
   brightness turned down, not a different theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --desktop:      #1C2423;
    --face:         #3A3A3A;
    --face-ink:     #E8E8E8;
    --face-muted:   #C8C8C8;
    --face-link:    #B3CBF0;
    --face-visited: #D6BDEB;

    --bevel-hi:     #6A6A6A;
    --bevel-light:  #4E4E4E;
    --bevel-shadow: #242424;
    --bevel-dark:   #0E0E0E;

    --title-from:   #26324A;
    --title-to:     #3E516C;
    --title-ink:    #F0F0F0;

    --doc:          #1E1E1E;
    --doc-alt:      #2A2A2A;
    --rule:         #444444;
    --ink:          #DDDAD2;
    --ink-muted:    #A8A49A;
    --link:         #9DB8E6;
    --visited:      #C6A8E0;
    --accent:       #D08A5E;

    --lcd-bg:       #1A201A;

    --led:          #5DBB45;

    --px-case:    #6A675F;
    --px-hi:      #8A877E;
    --px-lo:      #34322D;
    --px-screen:  #1A201A;
    --px-glow:    #5E7358;
    --px-led:     #8FB36A;

    --px-roof:       #8A5446;
    --px-roof-lo:    #5E372D;
    --px-wall:       #B8B2A0;
    --px-door:       #5E4630;
    --px-glass:      #6F8595;
    --px-book:       #52667D;
    --px-book-lo:    #36445A;
    --px-paper:      #CFCDC5;
    --px-paper-edge: #55534C;
    --px-sea:        #587489;
    --px-land:       #758A58;
    --px-skin:       #B8987A;
    --px-hair:       #4A3A2D;
    --px-shirt:      #66765A;
    --px-shirt-lo:   #4A5640;
    --px-rss:        #A5693B;
    --px-rss-mark:   #EDEDED;
    --px-folder:     #B8A05A;
    --px-folder-hi:  #CDB87C;
    --px-folder-lo:  #8A753A;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* --- Desktop and window -------------------------------------------------- */

body {
  margin: 0;
  padding: 2rem 1rem 3rem;
  background: var(--desktop);
  color: var(--ink);
  font-family: var(--font-read);
  font-size: 1.0625rem;
  line-height: 1.72;
}

.window {
  max-width: var(--window);
  margin: 0 auto;
  padding: 3px;
  background: var(--face);
  color: var(--face-ink);
  box-shadow: var(--raised);
}

@media (max-width: 30rem) {
  /* Full-bleed window on a phone. Body matches the face, otherwise a band
     of desktop shows below short pages. */
  body { padding: 0; background: var(--face); }
  .window { box-shadow: none; padding: 0; }
}

/* --- Links --------------------------------------------------------------- */

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  position: static;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.8rem;
  background: var(--face);
  color: var(--face-ink);
  box-shadow: var(--raised);
  font-family: var(--font-chrome);
  font-size: 0.8125rem;
  text-decoration: none;
}

.pixel-icon, .pixel-crt {
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* --- Header: title bar, menu bar, address bar ---------------------------- */

.site-header {
  font-family: var(--font-chrome);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.title-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
  margin: 0;
  padding: 0.2rem 0.35rem;
  background: linear-gradient(90deg, var(--title-from), var(--title-to));
  color: var(--title-ink);
  font-weight: 700;
}
.title-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}
.title-bar a:hover span { text-decoration: underline; }
/* The accent ring is too dark against the slate title bar. */
.title-bar a:focus-visible { outline-color: var(--title-ink); }

.site-tagline { font-weight: 400; }

.menu-bar {
  padding: 0.2rem 0.15rem;
  border-bottom: 1px solid var(--bevel-shadow);
  box-shadow: 0 1px 0 var(--bevel-hi);
}
.menu-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  color: var(--face-ink);
  text-decoration: none;
}
.menu-bar a:hover { box-shadow: var(--shallow); }
.menu-bar a:hover span { text-decoration: underline; }
/* Current page: bold AND pressed-in, so it isn't conveyed by one cue. */
.menu-bar [aria-current="page"] {
  font-weight: 700;
  box-shadow: var(--pressed);
}

.address-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.3rem 0;
  font-size: 0.75rem;
}
.address-label { color: var(--face-muted); white-space: nowrap; }
.address-bar ol {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 0.35rem;
  margin: 0;
  padding: 0.15rem 0.45rem;
  background: var(--doc);
  color: var(--ink-muted);
  box-shadow: var(--sunken);
  list-style: none;
}
.address-bar li + li::before { content: "\203A\00a0"; }
.address-bar a { text-decoration: none; }
.address-bar a:hover { text-decoration: underline; }

/* --- Document ------------------------------------------------------------ */

.document {
  display: block;
  margin: 0.3rem 0.3rem 0;
  padding: 1.6rem 1.75rem 1.75rem;
  background: var(--doc);
  color: var(--ink);
  box-shadow: var(--sunken);
}
main:focus { outline: none; }
.document > * { max-width: var(--measure); }

@media (max-width: 30rem) {
  .document { margin: 0.25rem 0 0; padding: 1.25rem 1rem; }
}

h1, h2, h3 {
  font-family: var(--font-read);
  line-height: 1.3;
  margin: 2.25rem 0 0.6rem;
}
h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.1875rem; }
h3 { font-size: 1.0625rem; }

p, ul, ol { margin: 0 0 1.15rem; }

.intro > :first-child { margin-top: 0; }
.intro p:last-child { margin-bottom: 2rem; }

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

/* Pixel art must never be smoothed by the browser's scaler. */
img[src$=".gif"], img.pixel { image-rendering: pixelated; }

.px-case    { fill: var(--px-case); }
.px-hi      { fill: var(--px-hi); }
.px-lo      { fill: var(--px-lo); }
.px-screen  { fill: var(--px-screen); }
.px-glow    { fill: var(--px-glow); }
.px-led-on  { fill: var(--px-led); }
.px-led-off { fill: var(--px-lo); }

.px-roof       { fill: var(--px-roof); }
.px-roof-lo    { fill: var(--px-roof-lo); }
.px-wall       { fill: var(--px-wall); }
.px-door       { fill: var(--px-door); }
.px-glass      { fill: var(--px-glass); }
.px-book       { fill: var(--px-book); }
.px-book-lo    { fill: var(--px-book-lo); }
.px-paper      { fill: var(--px-paper); }
.px-paper-edge { fill: var(--px-paper-edge); }
.px-sea        { fill: var(--px-sea); }
.px-land       { fill: var(--px-land); }
.px-skin       { fill: var(--px-skin); }
.px-hair       { fill: var(--px-hair); }
.px-shirt      { fill: var(--px-shirt); }
.px-shirt-lo   { fill: var(--px-shirt-lo); }
.px-rss        { fill: var(--px-rss); }
.px-rss-mark   { fill: var(--px-rss-mark); }
.px-folder     { fill: var(--px-folder); }
.px-folder-hi  { fill: var(--px-folder-hi); }
.px-folder-lo  { fill: var(--px-folder-lo); }
.px-hole       { fill: var(--doc); }

pre {
  overflow-x: auto;
  padding: 0.85rem;
  background: var(--doc-alt);
  box-shadow: var(--shallow);
  font-size: 0.8125rem;
  line-height: 1.5;
}
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-muted);
  font-style: italic;
}

hr {
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* --- Post lists ---------------------------------------------------------- */

.post-list { list-style: none; padding: 0; }
/* Icon in its own column, title and meta stacked beside it. */
.post-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 0.6rem;
  margin-bottom: 1.35rem;
}
.post-list li > .pixel-icon {
  grid-row: span 2;
  margin-top: 0.3rem;
}
.post-list h2,
.post-list h3 {
  margin: 0 0 0.15rem;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.post-meta {
  margin: 0;
  font-family: var(--font-chrome);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.post-meta a { color: var(--ink-muted); }

/* On a post page the meta line needs space before the body copy; inside a
   list it must not add to the item gap. */
.h-entry > .post-meta { margin-bottom: 1.5rem; }
.post-list .post-meta { margin-bottom: 0; }

.more { margin-top: 1.75rem; }

/* Reads as text, not as a colour: a bordered box containing "New". */
.new-marker {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.year-group h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 2.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-chrome);
  font-size: 0.9375rem;
}

.tag-list { list-style: none; padding: 0; }
.tag-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}
.tag-count { color: var(--ink-muted); font-size: 0.8125rem; }

.post-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 2.75rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-family: var(--font-chrome);
  font-size: 0.8125rem;
}

/* --- Buttons ------------------------------------------------------------- */

/* Links that navigate, dressed as Win98 push buttons. Pressing one sinks it:
   a state change, not an animation. */
.more a,
.post-nav a {
  display: inline-block;
  max-width: 100%;
  padding: 0.3rem 0.85rem;
  background: var(--face);
  color: var(--face-ink);
  box-shadow: var(--raised);
  font-family: var(--font-chrome);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
}
.more a:hover,
.post-nav a:hover { text-decoration: underline; }
.more a:active,
.post-nav a:active { box-shadow: var(--pressed); }

/* --- Status bar ---------------------------------------------------------- */

.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0.3rem 0 0;
  padding: 0 0.3rem 0.3rem;
  font-family: var(--font-chrome);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--face-ink);
}
.status-bar > * {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.2rem 0.5rem;
  box-shadow: var(--shallow);
}
.status-bar > .status { flex-grow: 1; }

.power-led {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--led);
  /* Keep it green in high-contrast mode rather than letting it vanish. */
  forced-color-adjust: none;
}
.status-bar a { color: var(--face-link); }
.status-bar a:visited { color: var(--face-visited); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

@media (max-width: 30rem) {
  .status-bar > * { flex: 1 1 100%; }
}

.counter-label { margin-right: 0.2rem; }
.counter-digits {
  padding: 0 0.35rem;
  background: var(--lcd-bg);
  color: var(--lcd-ink);
  box-shadow: var(--shallow);
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
}

/* --- 404 ----------------------------------------------------------------- */

.not-found { padding: 1.5rem 0 2rem; }
.not-found .pixel-crt { margin-bottom: 1rem; }

/* --- Forced colours ------------------------------------------------------ */

/* High-contrast modes drop box-shadow, which would erase every bevel and
   leave the window's structure invisible. Real borders put it back. */
@media (forced-colors: active) {
  .window,
  .document,
  .address-bar ol,
  .status-bar > *,
  .more a,
  .post-nav a,
  .skip-link:focus,
  .menu-bar [aria-current="page"] {
    border: 1px solid CanvasText;
  }
  .title-bar { border-bottom: 1px solid CanvasText; }
}

/* --- Motion -------------------------------------------------------------- */

/* There is no motion in this stylesheet by design. This block exists so that
   nothing added later can slip past it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}