@font-face { font-family: "m5x7"; src: url("assets/fonts/m5x7.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "m3x6"; src: url("assets/fonts/m3x6.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "1980 P01"; src: url("assets/fonts/1980v23P01.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "1980 P02"; src: url("assets/fonts/1980v23P02.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "1980 P03"; src: url("assets/fonts/1980v23P03.ttf") format("truetype"); font-display: swap; }

:root {
  --pixel: 2px;
  --slice: 3;
  --edge: calc(3 * var(--pixel));
  --font-size: 2rem;
  --page: #ffffff;
  --gradient-middle: #e5e5ea;
  --gradient-bottom: #b8b8c2;
  --doodle-opacity: 0.06;
  --doodle-tile: calc(1024 * var(--pixel));
  --grid-cell: calc(32 * var(--pixel));
  --grid-line: rgb(0 0 0 / 0.055);
  --grid-duration: 16s;
  --grid-angle: 3deg;
  --text: #ffffff;
  --muted: #a6a6ae;
  --rule: #303034;
  color-scheme: dark;
  font-family: "m5x7", monospace;
  font-size: 16px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100svh; isolation: isolate;
  background-color: var(--page);
  color: var(--text); font-size: var(--font-size); line-height: 1;
}
/* Keep the full gradient visible within the screen, regardless of content height. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--page) 0%, var(--gradient-middle) 45%, var(--gradient-bottom) 100%);
}
/* Invert only the decorative layer. Each source pixel shares the UI's 2px grid.
   A fixed tile size repeats on every screen instead of fitting the viewport. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("assets/textures/doodle_pattern.png");
  background-repeat: repeat;
  background-size: var(--doodle-tile) var(--doodle-tile);
  background-position: center calc(-128 * var(--pixel));
  /* Keep the tile centered as the viewport changes, snapped to whole art pixels. */
  background-position-x: round(nearest, calc((100vw - var(--doodle-tile)) / 2), var(--pixel));
  image-rendering: pixelated;
  filter: invert(1);
  opacity: var(--doodle-opacity);
}
/* Clip an oversized grid so rotating and moving it never reveals an edge.
   Animate its transform continuously rather than repainting in pixel steps. */
.background-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.background-grid::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--grid-cell) - 6vmax);
  background-image:
    linear-gradient(to right, var(--grid-line) var(--pixel), transparent var(--pixel)),
    linear-gradient(to bottom, var(--grid-line) var(--pixel), transparent var(--pixel));
  background-size: var(--grid-cell) var(--grid-cell);
  background-repeat: repeat;
  transform: rotate(var(--grid-angle));
  will-change: transform;
  animation: grid-scroll var(--grid-duration) linear infinite;
}
@keyframes grid-scroll {
  from { transform: rotate(var(--grid-angle)) translate(0, 0); }
  to { transform: rotate(var(--grid-angle)) translate(var(--grid-cell), var(--grid-cell)); }
}
@media (prefers-reduced-motion: reduce) {
  .background-grid::before { animation: none; will-change: auto; }
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
::selection { background: white; color: black; }
.site { width: 100%; padding: 96px 16px 48px; }

/* The original 16px sprites keep 3px corners, drawn at exactly 2x.
   Only their flat edge/center regions stretch. Never scale the whole UI. */
.pixel-surface {
  border: var(--edge) solid transparent;
  border-image-slice: var(--slice) fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}
.window {
  width: 100%; width: round(down, 100%, var(--pixel));
  max-width: 640px; margin: 0 auto;
  /* Snap centering to the texture grid on odd-width desktop viewports. */
  margin-left: max(0px, round(down, calc((100% - 640px) / 2), var(--pixel)));
  border-image-source: url("assets/textures/panel.png");
}
.titlebar, .footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: "m3x6", monospace; }
.titlebar { min-height: 48px; padding: 0 18px; border-bottom: var(--pixel) solid var(--rule); }
#site-title { overflow-wrap: anywhere; }
.window-mark { width: 8px; height: 8px; flex: 0 0 8px; background: white; }
.window-body { display: grid; grid-template-columns: minmax(0, 1fr) 192px; gap: 24px; padding: 24px 18px; min-height: 264px; }
.navigation { grid-column: 2; grid-row: 1; display: grid; gap: 8px; align-content: start; min-width: 0; }
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 48px; padding: 2px 10px; text-decoration: none;
  border-image-source: url("assets/textures/panel_black.png");
  overflow-wrap: anywhere;
}
.nav-link > span:first-child { min-width: 0; }
.nav-marker { font-family: "m3x6", monospace; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.nav-link[aria-current="page"] { border-image-source: url("assets/textures/round_rect.png"); color: black; }
.nav-link[aria-current="page"] .nav-marker { color: #404044; }
@media (hover: hover) {
  .nav-link:not([aria-current="page"]):hover { border-image-source: url("assets/textures/panel_outline.png"); }
}
.nav-link:focus-visible { border-image-source: url("assets/textures/panel_outline.png"); color: white; outline: var(--pixel) solid white; outline-offset: 2px; }
.nav-link:focus-visible .nav-marker { color: white; }
.content { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.section-path { font-family: "m3x6", monospace; color: var(--muted); margin: 0 0 16px; }
h1 { font-family: "1980 P02", monospace; font-size: var(--font-size); font-weight: 400; line-height: 1; margin: 0 0 16px; }
h1:focus { outline: none; }
h1:focus-visible { outline: var(--pixel) dotted white; outline-offset: 4px; }
p { margin: 0 0 16px; }
#section-content { color: var(--muted); }
#section-content > :last-child { margin-bottom: 0; }
.item-list { list-style: none; padding: 0; margin: 0; }
.item-list li + li { margin-top: 16px; padding-top: 16px; border-top: var(--pixel) solid var(--rule); }
.item-title { display: block; color: white; margin: 0; }
.item-description { margin: 8px 0 0; }
.discord-meta { color: var(--muted); font-family: "m3x6", monospace; margin-bottom: 8px; }
.discord-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.discord-attachment { margin-top: 8px; }
.feed-status { color: var(--muted); }
.feed-error { color: #ffb0b0; }
a.item-title { display: flex; align-items: center; min-height: 48px; text-underline-offset: 6px; text-decoration-thickness: var(--pixel); }
a.item-title:focus-visible { outline: var(--pixel) solid white; outline-offset: 4px; }
.footer { min-height: 40px; padding: 0 18px; border-top: var(--pixel) solid var(--rule); color: var(--muted); }
.discord-panel {
  width: 100%; max-width: 640px; margin: 24px auto 0; padding: 0;
  border-image-source: url("assets/textures/panel.png");
}
.discord-feed { padding: 24px 18px; color: var(--muted); }
.discord-list { list-style: none; padding: 0; margin: 0; }
.discord-list li + li { margin-top: 20px; padding-top: 20px; border-top: var(--pixel) solid var(--rule); }
.discord-meta { color: var(--muted); font-family: "m3x6", monospace; margin-bottom: 8px; }
.discord-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.discord-image, .discord-embed-image { display: block; max-width: 100%; height: auto; image-rendering: auto; }
.discord-image { margin-top: 12px; }
.discord-attachment, .discord-embed-link { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; color: white; text-underline-offset: 6px; }
.discord-embed { max-width: 100%; margin-top: 12px; padding: 12px; border-left: 4px solid var(--muted); background: rgb(0 0 0 / 0.2); }
.discord-embed-title { color: white; text-underline-offset: 4px; }
.discord-embed-description { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.discord-embed-image { margin-top: 12px; }
.skip-link { position: absolute; top: 8px; left: 16px; padding: 8px 16px; background: white; color: black; z-index: 1; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

@media (max-width: 599px) {
  .site { padding-top: 32px; padding-bottom: 32px; }
  .window-body { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px 10px 24px; }
  .navigation { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: round(down, 100%, calc(2 * var(--pixel))); }
  .content { grid-column: 1; grid-row: 2; min-height: 192px; }
  .titlebar, .footer { padding-inline: 10px; }
  .nav-link { padding-inline: 6px; }
  .nav-marker { display: none; }
  .discord-panel { margin-top: 16px; }
  .discord-feed { padding: 16px 10px 24px; }
}
@media (max-height: 500px) { .site { padding-top: 24px; padding-bottom: 24px; } }