@charset "UTF-8";
/* ================================================================
   FONT FACE
   ================================================================ */
@font-face {
  font-family: "fabfont";
  src: url("/assets/font/DejaVuSansMono.woff2") format("woff2"), url("/assets/font/DejaVuSansMono.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "fabfont";
  src: url("/assets/font/DejaVuSansMono-Bold.woff2") format("woff2"), url("/assets/font/DejaVuSansMono-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}
/* ================================================================
   BASE RESET
   ================================================================ */
* {
  font-size: 16px;
  box-sizing: border-box;
}

html {
  font-family: "fabfont", "DejaVu Sans Mono", "Consolas", "Monaco", "Courier New", monospace;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 2%;
  padding-right: 3%;
  background: #F5F5F0;
  line-height: 1.5;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Lock to light mode — no system dark theme override */
  color-scheme: light;
}

body {
  margin: 0;
  padding: 0;
}

/* ================================================================
   LINKS & TYPOGRAPHY
   ================================================================ */
a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p {
  margin-top: 0;
  text-align: justify;
}

sup {
  vertical-align: 0.3em;
  font-size: 0.65em;
}

/* ================================================================
   HEADINGS
   ================================================================ */
div.heading {
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 4ch;
}

h1, h2, h3, h4 {
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 4ch;
}

/* ================================================================
   CODE & PRE BLOCKS
   Sterile zone: no underline slide, no transitions, no decorations.
   ================================================================ */
pre, code {
  font-family: "fabfont", monospace;
}

pre {
  background-color: white;
  border: 1px solid black;
  padding: 1ch 2%;
  overflow-x: auto;
  white-space: pre;
}

code {
  background-color: #e1e1e1;
  border-radius: 0.5ch;
  padding: 0.2ch 0.4ch;
  font-weight: bold;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-weight: normal;
}

/* Hard isolation: links inside code/pre never get underlined */
pre a,
pre a:hover,
code a,
code a:hover {
  color: inherit;
  text-decoration: none;
}

/* ================================================================
   IMAGES & MEDIA
   ================================================================ */
img, video, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

img {
  border: none;
  margin-bottom: 2ch;
}

img.pixel,
canvas.pixel {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.post img,
article img {
  border: 1px solid black;
  margin-bottom: 2ch;
}

/* ================================================================
   BLOCKQUOTE
   ================================================================ */
blockquote {
  background-color: #f3f3f3;
  border: 1px dashed grey;
  width: 97.5%;
  font-style: italic;
  text-align: justify;
  padding: 2ch 1ch;
  margin: 0 0 2ch 0;
}

blockquote div {
  text-transform: none;
  text-align: right;
  width: 100%;
}

/* Blockquote links: plain, no underline on hover */
blockquote a,
blockquote a:hover {
  text-decoration: none;
}

.sun {
  background: #ffee99;
  border-radius: 4px;
  padding: 0 2px;
}

/* ================================================================
   TRIVIA BLOCK
   ================================================================ */
.trivia {
  border-left: 1px solid black;
  padding-left: 1ch;
}

.trivia::before {
  font-weight: bold;
  text-decoration: underline;
  padding-right: 1ch;
  content: "Trivia:";
}

/* ================================================================
   FOOTER
   Third in the staggered boot sequence (delay: 0.10s).
   ================================================================ */
.footer {
  text-align: center;
  margin-top: 4ch;
  margin-bottom: 2ch;
  opacity: 0.7;
  font-size: 0.9em;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 500px) {
  * {
    font-size: 12px;
  }
}
/* ================================================================
   SYNTAX HIGHLIGHTING  (Rouge / jekyll-theme-low palette)
   ================================================================ */
.highlight table td {
  padding: 5px;
}

.highlight table pre {
  margin: 0;
}

.highlight,
.highlight .w {
  color: #444444;
}

.highlight .cp {
  color: #CC00A3;
}

.highlight .cs {
  color: #CC00A3;
}

.highlight .c,
.highlight .ch,
.highlight .cd,
.highlight .cm,
.highlight .cpf,
.highlight .c1 {
  color: #FF0000;
}

.highlight .ge {
  font-style: italic;
}

.highlight .ges {
  font-weight: bold;
  font-style: italic;
}

.highlight .gs {
  font-weight: bold;
}

.highlight .kc {
  color: #C34E00;
}

.highlight .kd {
  color: #0000FF;
}

.highlight .kr {
  color: #007575;
}

.highlight .k,
.highlight .kn,
.highlight .kp,
.highlight .kt,
.highlight .kv {
  color: #0000FF;
}

.highlight .s,
.highlight .sb,
.highlight .sc,
.highlight .dl,
.highlight .sd,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .s1,
.highlight .ss {
  color: #009C00;
}

.highlight .sa {
  color: #0000FF;
}

.highlight .nb,
.highlight .bp {
  color: #C34E00;
}

/* ================================================================
   GREPSILON IDENTITY LAYER
   ================================================================ */
/* ----------------------------------------------------------------
   CSS Custom Properties
   Only the cursor colour remains — link glow removed in favour of
   the clean underline animation.
   ---------------------------------------------------------------- */
/* No custom colour properties needed — cursor is black, no glow. */
/* ----------------------------------------------------------------
   BOOT-UP SEQUENCE
   Snappy stagger: header → main (0.05s) → footer (0.10s).
   Total time to full visibility: 0.35s.
   Previous 0.65s total felt slow on page navigation.
   ---------------------------------------------------------------- */
@keyframes boot-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* main.container: no animation — content appears instantly on every
   page load. */
/* ----------------------------------------------------------------
   GREPSILON CURSOR
   Solid blinking block █ after site title. step-start = hard CRT
   binary blink. Black, matching the monochrome site palette.
   ---------------------------------------------------------------- */
.cursor {
  color: #000;
  font-weight: normal;
  /* inherit overrides the * { font-size: 16px } universal rule so
     the cursor matches the size of its parent (.site-title) */
  font-size: inherit;
  /* display: inline-block required for transform to apply */
  display: inline-block;
  /* Compress horizontally — turns the fat full-block into a slim cursor */
  transform: scaleX(0.75);
  transform-origin: left center;
  animation: cursor-blink 1s step-start infinite;
  user-select: none;
  pointer-events: none;
  will-change: opacity;
}

@keyframes cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* ----------------------------------------------------------------
   SITE HEADER & ~/PATH NAVIGATION
   Left-aligned. Title rendered exactly as site.title (no upcase,
   no text-transform) so the ε character reads as ε not Ε.
   ---------------------------------------------------------------- */
.site-header {
  margin-bottom: 1.25rem;
}

.site-title {
  font-size: 2.75rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  /* No text-transform — preserves the ε in grεpsilon */
}

/* Brand link: never underlined — it's a logo, not a content link */
a.site-title:hover {
  text-decoration: none;
}

.brand-inline {
  font-weight: bold;
  white-space: nowrap;
}

.site-nav {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.4rem 0.6rem;
  margin-left: -0.6rem;
}

.nav-link {
  font-size: 1rem;
  font-weight: bold;
  color: black;
}

/* ----------------------------------------------------------------
   TIMESTAMP BADGE — SYS.DATE: YYYY-MM-DD
   ---------------------------------------------------------------- */
.timestamp-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000;
  border: 1px solid #000;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.75rem;
  background-color: transparent;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.timestamp-badge:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
}

.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #000;
  margin-right: 8px;
  flex-shrink: 0;
  animation: slow-pulse 2s ease-in-out infinite;
  /* Same as cursor — own compositor layer keeps scroll smooth */
  will-change: opacity;
}

@keyframes slow-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
/* ----------------------------------------------------------------
   POST CARDS
   ---------------------------------------------------------------- */
.post-card {
  position: relative;
  margin-bottom: 3rem;
  padding: 0.75rem;
  margin-left: -0.75rem;
  transition: background 0.15s ease;
}

.post-card:hover {
  background: rgba(0, 0, 0, 0.04);
}

.post-card:last-child {
  margin-bottom: 0;
}

.post-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.post-date {
  font-size: 0.75rem;
  color: #888;
  flex-shrink: 0;
  font-weight: normal;
}

.post-card h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
}

.post-card h2 a,
.post-card h2 a:hover {
  text-decoration: none;
}

/* Stretch the title link to cover the entire card */
.post-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ----------------------------------------------------------------
   OUTPUT PAGE
   ---------------------------------------------------------------- */
.output-year {
  font-size: 0.75rem;
  color: #888;
  font-weight: normal;
  margin-top: 2rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.05em;
}

.output-row {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  margin-bottom: 0.3rem;
  padding: 0.2rem 0.6rem;
  margin-left: -0.6rem;
  transition: background 0.15s ease;
}

.output-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

.output-row .post-date {
  flex-shrink: 0;
}

.output-row a,
.output-row a:hover {
  text-decoration: none;
}

/* Stretch link to cover the whole row */
.output-row a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ----------------------------------------------------------------
   POST EXCERPT
   ---------------------------------------------------------------- */
.post-excerpt {
  font-size: 0.875rem;
  color: #444;
  line-height: 1.6;
  text-align: justify;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   ACCESSIBILITY — prefers-reduced-motion
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
    opacity: 1;
  }
  .pulse-dot {
    animation: none;
    opacity: 1;
  }
}
/* ----------------------------------------------------------------
   FORCE LIGHT MODE
   color-scheme: light (on html) handles most cases. This media
   query is a belt-and-suspenders backstop for any browser that
   ignores color-scheme and tries to invert colours automatically.
   ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  html {
    background: #F5F5F0;
    color: #000;
  }
  body {
    background: #F5F5F0;
    color: #000;
  }
}
/* ================================================================
   MAP PAGE — Force-directed article graph
   ================================================================ */
.map-container {
  position: relative;
}

.map-desc {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 1.5rem;
}

#map-svg {
  display: block;
  width: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
}

.map-link {
  stroke: #bbb;
  stroke-width: 1.5px;
  stroke-opacity: 1;
}

.map-node {
  cursor: pointer;
}

.map-node:hover .map-node-circle {
  stroke-width: 2.5px;
  filter: brightness(1.15);
}

.map-node-label {
  font-family: "fabfont", "DejaVu Sans Mono", monospace;
  font-size: 8px;
  pointer-events: none;
  user-select: none;
}

.map-node-sublabel {
  font-family: "fabfont", "DejaVu Sans Mono", monospace;
  font-size: 8px;
  pointer-events: none;
  user-select: none;
}

.map-tooltip {
  display: none;
  position: absolute;
  pointer-events: none;
  background: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  line-height: 1.4;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-width: 220px;
}

.map-tooltip-cat {
  color: #666;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}

/*# sourceMappingURL=main.css.map */