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

   Reference point: a homepage someone wrote by hand around 2002 and has kept
   tidy ever since — the Neocities spirit, done carefully. The computer is the
   setting, not the subject: you log on, read what's on Alex's mind, log off.

   1. One sheet of warm paper. A header with the name of the room, a sidebar
      (navigation and a "this session" box), the writing, and a footer with
      88x31 buttons and a sign-off. No inset panels, no window chrome.
   2. Chrome in sans, content in serif. Verdana for navigation, dates and
      footer; Georgia for everything you read. System fonts only: no webfonts,
      no network requests, no third party.
   3. Links look like links: underlined, blue, purple once visited.

   Low stimulation is a hard constraint, not a mood. Nothing blinks, nothing
   animates, nothing autoplays — including the green power dot. The accent
   colour is used in exactly two places: focus rings and the NEW marker.
   =========================================================================== */

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

:root {
  --measure: 38rem;
  --sidebar: 11rem;

  --paper:      #F7F5EC;
  --box:        #ECE9D8;  /* Windows XP Luna beige, for the session box */
  --rule:       #B9B3A0;
  --rule-soft:  #D5D0BE;

  --ink:        #2A2822;
  --ink-muted:  #5F5A4E;

  --link:       #2B4C7E;
  --visited:    #6B4C7E;
  --accent:     #8A4B2A;  /* burnt umber. Focus rings and the NEW marker only. */
  --led:        #3E9A2C;

  --px-case:    #C9C3AF;
  --px-hi:      #E4DFCC;
  --px-lo:      #8E8873;
  --px-screen:  #3A4238;
  --px-glow:    #7E9174;
  --px-led:     #7FA05C;

  --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:      #FFFFFF;
  --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;

  --lcd-bg:     #3A4238;
  --lcd-ink:    #B5CFA6;

  --font-chrome: Verdana, Geneva, Tahoma, sans-serif;
  --font-read:   Georgia, "Times New Roman", serif;
  --font-mono:   ui-monospace, "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #1C1B18;
    --box:        #2A2823;
    --rule:       #4A473E;
    --rule-soft:  #35332C;

    --ink:        #DFDACC;
    --ink-muted:  #A8A292;

    --link:       #91B4DF;
    --visited:    #C2A9D6;
    --accent:     #D08A5E;
    --led:        #5DBB45;

    --px-case:    #4A473E;
    --px-hi:      #605C50;
    --px-lo:      #302E28;
    --px-screen:  #232A24;
    --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;

    --lcd-bg:     #151A15;
  }
}

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

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

/* --- Page ---------------------------------------------------------------- */

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

/* Header across the top, sidebar and writing side by side, footer below. */
.page {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, var(--measure));
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  column-gap: 2.5rem;
  max-width: calc(var(--sidebar) + 2.5rem + var(--measure));
  margin: 0 auto;
}
.site-header { grid-area: header; }
.sidebar     { grid-area: sidebar; }
main         { grid-area: main; min-width: 0; }
.site-footer { grid-area: footer; }

/* Phone: one column. The nav stays at the top; the session box drops below
   the writing. Visual reordering is safe only because the box contains
   nothing focusable — keep it that way. */
@media (max-width: 40rem) {
  body { padding: 1.25rem 1rem 2rem; }
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "nav"
      "main"
      "session"
      "footer";
  }
  .sidebar  { display: contents; }
  .site-nav { grid-area: nav; }
  .session  { grid-area: session; margin-top: 2.5rem; }
}

/* --- 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;
  font-family: var(--font-chrome);
  font-size: 0.8125rem;
}

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

/* --- Header -------------------------------------------------------------- */

.site-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.site-title {
  margin: 0;
  font-family: var(--font-read);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.site-title a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}
.site-title a:hover span { text-decoration: underline; }

.site-tagline {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  font-style: italic;
  font-size: 0.9375rem;
}

/* --- Sidebar ------------------------------------------------------------- */

.site-nav ul {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-chrome);
  font-size: 0.875rem;
  line-height: 1.4;
}
.site-nav li + li { margin-top: 0.35rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.site-nav a span { text-decoration: underline; text-underline-offset: 2px; }
/* Nav links are always "visited"; purple here would just be noise. */
.site-nav a:visited { color: var(--link); }
.site-nav [aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}
.site-nav [aria-current="page"] span { text-decoration: none; }
.site-nav [aria-current="page"]::after { content: "\00a0\203A"; }

@media (max-width: 40rem) {
  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-bottom: 1.5rem;
  }
  .site-nav li + li { margin-top: 0; }
  .site-nav [aria-current="page"]::after { content: none; }
}

.session {
  align-self: start;
  padding: 0.75rem 0.85rem;
  background: var(--box);
  border: 1px solid var(--rule-soft);
  font-family: var(--font-chrome);
  font-size: 0.75rem;
  line-height: 1.5;
}
.session p { margin: 0 0 0.45rem; }
.session-heading {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.session-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.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;
}
.session-lastmod { color: var(--ink-muted); }
.session-list { margin: 0.6rem 0 0; }
.session-list dt { color: var(--ink-muted); }
.session-list dd {
  margin: 0 0 0.4rem;
  font-style: italic;
}
.session-list dd:last-child { margin-bottom: 0; }

/* --- Reading ------------------------------------------------------------- */

main:focus { outline: none; }

.breadcrumb {
  margin-bottom: 1.25rem;
  font-family: var(--font-chrome);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.breadcrumb ol {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.address-label { margin-right: 0.35rem; }
.breadcrumb li + li::before { content: "\203A\00a0"; }

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, .buttons img { 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(--paper); }

pre {
  overflow-x: auto;
  padding: 0.85rem;
  background: var(--box);
  border: 1px solid var(--rule-soft);
  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-soft);
  color: var(--ink-muted);
  font-style: italic;
}

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

/* --- 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;
  font-family: var(--font-chrome);
  font-size: 0.875rem;
}

/* 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-soft);
  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;
  gap: 0.45rem;
  margin: 2.75rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule-soft);
  list-style: none;
  font-family: var(--font-chrome);
  font-size: 0.8125rem;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-chrome);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.site-footer p { margin: 0 0 0.75rem; }

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
.buttons a { display: block; line-height: 0; }
.buttons img { display: block; }

.sign-off { font-style: italic; }

.counter-label { margin-right: 0.2rem; }
.counter-digits {
  padding: 0.1rem 0.35rem;
  background: var(--lcd-bg);
  border: 1px solid var(--rule);
  color: var(--lcd-ink);
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
}

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

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

/* --- 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;
  }
}