/* ============================================================
   flautner.io — Commodore 64 / demoscene theme
   Palette based on the "colodore" VIC-II reproduction.
   ============================================================ */
:root {
  --c64-blue: #352879;       /* screen background */
  --c64-ltblue: #6c5eb5;     /* border + default text */
  --c64-ltblue-bright: #8f82d8;
  --c64-white: #ffffff;
  --c64-cyan: #6abfc6;
  --c64-yellow: #d5df7c;
  --c64-lightgreen: #94e089;
  --c64-red: #b86962;
  --border-w: 132px;         /* the thick C64 screen border (mobile overrides below) */
}

/* INVERT mode: light background, dark text (toggled on essay pages).
   Re-points the palette variables so the whole scheme flips at once. */
html.inverted {
  --c64-blue: #f6f3ec;          /* was the dark screen — now the light background */
  --c64-ltblue: #d6cff0;        /* lighter purple frame in light mode */
  --c64-ltblue-bright: #2a2352; /* default text — now dark */
  --c64-white: #14102e;         /* emphasis — near-black */
  --c64-cyan: #1f5e73;          /* links / subheadings — dark teal */
  --c64-yellow: #6a5810;        /* headings — dark gold */
  --c64-lightgreen: #2c6a2a;    /* dates — dark green */
}
html.inverted body { text-shadow: none; border-color: var(--c64-blue); }  /* frame blends into the page in light mode */
html.inverted body::after { display: none; }  /* no CRT scanlines in light mode */
html.inverted .article :is(p, li) { color: #2a2352; }
html.inverted :is(h1, h2, h3) { color: #7a3ba0; }  /* headings in light mode */
/* Match the active-nav highlight to the heading colour in light mode. */
html.inverted .site-header nav a.active { background: #7a3ba0; color: var(--c64-blue); }

* { box-sizing: border-box; }

html { background: var(--c64-ltblue); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c64-blue);
  color: var(--c64-ltblue-bright);
  font-family: "VT323", "Courier New", monospace;
  font-size: 22px;
  line-height: 1.35;
  border: var(--border-w) solid var(--c64-ltblue);
  min-height: 100vh;
  text-shadow: 0 0 1px rgba(143, 130, 216, 0.4);
}

@media (max-width: 640px) {
  :root { --border-w: 18px; }
  body { font-size: 20px; }
}

/* Faint CRT scanlines over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 2px,
    transparent 3px
  );
  z-index: 50;
  mix-blend-mode: multiply;
}

main { max-width: 760px; margin: 0 auto; padding: 8px 22px 40px; }

a { color: var(--c64-cyan); text-decoration: none; }
a:hover { background: var(--c64-cyan); color: var(--c64-blue); }

/* ---- The boot banner ---------------------------------------- */
.boot {
  padding: 18px 22px 4px;
  max-width: 760px;
  margin: 0 auto;
  color: var(--c64-ltblue-bright);
}
.boot pre {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  white-space: pre-wrap;
  line-height: 1.2;
}
.boot .ready { color: var(--c64-ltblue-bright); }

/* ---- Nav (as a BASIC menu) ---------------------------------- */
.site-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 6px 22px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.site-header nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.site-header .brand { color: var(--c64-white); }
.site-header nav a { color: var(--c64-ltblue-bright); }
.site-header nav a::before { content: "> "; color: var(--c64-ltblue-bright); }
.site-header nav a:hover { background: var(--c64-ltblue-bright); color: var(--c64-blue); }
.site-header nav a:hover::before { color: var(--c64-blue); }
/* Highlight the nav item for the page you're on (dark text stays readable). */
.site-header nav a.active {
  background: var(--c64-yellow);
  color: var(--c64-blue);
  padding: 0 6px;
}
.site-header nav a.active::before { color: var(--c64-blue); }
/* INVERT presented as a typed C64 BASIC command (essay pages only):
   no button chrome, terminal font, with a blinking block cursor after it. */
.invert-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--c64-ltblue-bright);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-shadow: none;
  text-align: left;
  line-height: 1.15;
}
/* Reverse-video highlight on hover/focus, like the C64 cursor over text. */
.invert-btn:hover,
.invert-btn:focus-visible {
  background: var(--c64-ltblue-bright);
  color: var(--c64-blue);
  outline: none;
}

/* ---- Headings ----------------------------------------------- */
h1, h2, h3 {
  font-family: "Press Start 2P", "VT323", monospace;
  color: var(--c64-yellow);
  line-height: 1.4;
  text-transform: uppercase;
}
h1 { font-size: 1.15rem; margin: 18px 0 14px; }
h2 { font-size: 0.85rem; margin: 30px 0 12px; color: var(--c64-yellow); }
h3 { font-size: 0.8rem; margin: 0 0 8px; }
.lead { color: var(--c64-ltblue-bright); }
/* Make the name heading a mailto link that still looks like a heading. */
.title-link { color: inherit; text-decoration: none; }
/* Email address links use the normal body text colour (not the teal accent). */
.j-email.show { color: var(--c64-ltblue-bright); }
.j-email:hover,
.j-email:focus-visible { background: var(--c64-ltblue-bright); color: var(--c64-blue); outline: none; }
/* Inline text link: same colour as surrounding text; only reacts on hover. */
.text-link { color: inherit; text-decoration: none; }
.text-link:hover,
.text-link:focus-visible { background: var(--c64-ltblue-bright); color: var(--c64-blue); outline: none; }
/* Same behaviour for links inside essay text (but not the LOAD command link). */
.article a:not(.back) { color: inherit; text-decoration: none; }
.article a:not(.back):hover,
.article a:not(.back):focus-visible { background: var(--c64-ltblue-bright); color: var(--c64-blue); outline: none; }
.title-link:hover,
.title-link:focus-visible { color: var(--c64-cyan); background: none; outline: none; }

/* Hero: pixel portrait beside the intro text */
.hero {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 12px;
}
.hero-text { flex: 1 1 280px; }
.portrait {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
  border: 4px solid var(--c64-ltblue);
  background: var(--c64-white);
}
@media (max-width: 540px) {
  .portrait { width: 150px; height: 150px; }
}

/* Blinking block cursor */
.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  background: var(--c64-ltblue-bright);
  vertical-align: -0.15em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- Sine scroller (classic demoscene greetings) ------------ */
.scroller {
  overflow: hidden;
  /* Full-bleed: pull out through the body border to the screen edges. */
  margin: 0 calc(-1 * var(--border-w));
  border-top: 3px solid var(--c64-white);
  border-bottom: 3px solid var(--c64-white);
  background: var(--c64-ltblue);
  padding: 10px 0;
  white-space: nowrap;
}
/* Colourful raster bars flanking the scroller. The colour sequence is a
   palindrome, so it reads the same left-to-right as right-to-left. */
.raster {
  height: 24px;
  margin: 0 calc(-1 * var(--border-w));
  background: repeating-linear-gradient(
    180deg,
    #e0554e, #e8934a, #d5df7c, #94e089, #6abfc6, #6c8fd8, #a06cd8, #ffffff,
    #a06cd8, #6c8fd8, #6abfc6, #94e089, #d5df7c, #e8934a, #e0554e
  );
  background-size: 100% 200%;
  animation: raster-slide 6s linear infinite;
  image-rendering: pixelated;
}
.raster.top { margin-top: 22px; }
.raster.bottom { margin-bottom: 22px; animation-direction: reverse; }
@keyframes raster-slide {
  from { background-position: 0 0; }
  to { background-position: 0 200%; }
}
.scroller span {
  display: inline-block;
  padding-left: 100%;
  color: var(--c64-white);
  animation: scroll-left 26s linear infinite;
}
.scroller span b { display: inline-block; animation: bob 1.1s ease-in-out infinite; }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes bob {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(6px); }
}

/* ---- Essay list --------------------------------------------- */
.essay-list { list-style: none; padding: 0; margin: 18px 0 0; }
.essay-card {
  border: 3px solid var(--c64-ltblue);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.essay-card:hover { border-color: var(--c64-cyan); }
.essay-card a { color: inherit; display: block; }
.essay-card a:hover { background: none; }
.essay-card h3 { color: var(--c64-yellow); }
.essay-card:hover h3 { color: var(--c64-cyan); }
.essay-card .date { color: var(--c64-lightgreen); font-size: 0.95rem; }
.essay-card p { margin: 8px 0 0; color: var(--c64-ltblue-bright); }

/* ---- Article ------------------------------------------------ */
/* Lift the essay text above the CRT scanline overlay (body::after, z-index 50)
   so the fine lines cross the background but not the letters themselves. */
.article { position: relative; z-index: 60; }
.article .date { color: var(--c64-lightgreen); }
/* Body copy uses a clean, non-pixel font for comfortable reading.
   Headings and subheadings keep their pixel styling. */
.article :is(p, li, blockquote) {
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.12rem;
  line-height: 1.65;
  text-shadow: none;
  letter-spacing: 0.01em;
}
.article :is(p, li) { color: var(--c64-ltblue-bright); }
.article strong { color: var(--c64-ltblue-bright); }
.article blockquote {
  border-left: 4px solid var(--c64-cyan);
  margin: 18px 0;
  padding: 4px 0 4px 16px;
  color: var(--c64-cyan);
}
.article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  border: 3px solid var(--c64-ltblue);
}
/* Back link styled as a typed C64 BASIC command with a blinking cursor. */
.back {
  display: inline-block;
  margin-top: 34px;
  color: var(--c64-ltblue-bright);
  text-decoration: none;
  line-height: 1.15;
}
.back::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.15em;
  margin-left: 0.15em;
  vertical-align: top;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
.back:hover,
.back:focus-visible {
  background: var(--c64-ltblue-bright);
  color: var(--c64-blue);
  outline: none;
}

/* ---- Footer ------------------------------------------------- */
.site-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 22px 34px;
  color: var(--c64-ltblue-bright);
}
.site-footer .ready { color: var(--c64-ltblue-bright); }
.site-footer .j-email { text-transform: uppercase; }  /* display only; mailto stays lowercase */

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .scroller span, .scroller span b, .cursor, .raster, .back::after { animation: none; }
  .scroller span { padding-left: 0; }
}