/* =============================================================================
   ARCHIVE — plain reading layout for the articles and downloads carried over
   from the old research blog. Loaded after core.css, which supplies the
   tokens and the site header. No overlays, no reveals: this is for reading.
   ========================================================================== */

.archive {
  max-width: 78ch;
  margin-inline: auto;
  padding: 120px var(--gut) 96px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
.archive.wide { max-width: 1040px; }

.archive h1 {
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1;
  margin: 0 0 14px;
}
.archive h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.1;
  margin: 2.2em 0 .6em;
}
.archive h3 {
  font-size: 19px;
  line-height: 1.2;
  margin: 1.8em 0 .5em;
  letter-spacing: .04em;
}

.archive p, .archive ul, .archive ol { margin: 0 0 1em; }
.archive li { margin-bottom: .45em; }
.archive a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.archive a:not(.btn):hover { color: var(--ink); }
.archive strong { color: #fff; }

.archive .meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 2.4em;
}
.archive .backlink {
  display: inline-block;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--muted);
  margin-bottom: 28px;
}
.archive .backlink:hover { color: var(--ink); }

.archive .sig { font-style: italic; font-weight: 600; margin-top: 2em; }

/* figures ------------------------------------------------------------------ */
.archive figure { margin: 1.4em 0; }
.archive figure img {
  height: auto;
  border: 1px solid var(--line);
  background: #000;
}
.archive figure.pixel img { image-rendering: pixelated; }
.archive figure .row { display: flex; flex-wrap: wrap; gap: 12px; }
.archive figcaption { color: var(--muted); font-size: 15px; margin-top: .5em; }

/* code --------------------------------------------------------------------- */
.archive pre {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 1.2em;
}
.archive code { font-family: ui-monospace, Consolas, 'Courier New', monospace; }
.archive p code, .archive li code {
  background: var(--panel);
  padding: 1px 5px;
  font-size: .9em;
}
.archive mark { background: rgba(255,46,23,.28); color: #fff; }

/* tables ------------------------------------------------------------------- */
.archive .tablewrap { overflow-x: auto; margin: 1.2em 0 1.6em; }
.archive table { border-collapse: collapse; width: 100%; font-size: 15px; }
.archive th, .archive td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.archive th {
  font-family: var(--ui);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel);
}
.archive td .sub { display: block; color: var(--muted); font-size: 14px; }
.archive tr.hot td:first-child { background: rgba(255,46,23,.28); font-weight: 700; }
.archive table img { max-width: none; image-rendering: pixelated; }

/* index list --------------------------------------------------------------- */
.archive .entries { list-style: none; padding: 0; margin: 0 0 2em; }
.archive .entries li {
  border-top: 1px solid var(--line);
  padding: 18px 0;
  margin: 0;
}
.archive .entries li:last-child { border-bottom: 1px solid var(--line); }
.archive .entries a { font-weight: 600; font-size: 19px; }
.archive .entries p { color: var(--muted); margin: .3em 0 0; }

.archive .note {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  color: var(--muted);
}

.archive .video { position: relative; aspect-ratio: 4 / 3; max-width: 480px; margin: 1em 0; }
.archive .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }