/* infowar.de Archiv — editorial, responsive, light/dark */
:root {
  --bg: #f7f6f2;
  --card: #ffffff;
  --fg: #21252e;
  --muted: #69707c;
  --border: #dcd9d0;
  --link: #1f4e8c;
  --visited: #6d5a8c;
  --accent: #a4331f;
  --quote: #4e7a5a;
  --badge-bg: #ece9e1;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161c;
    --card: #1c1f27;
    --fg: #e4e2da;
    --muted: #989eab;
    --border: #333845;
    --link: #8fb4e8;
    --visited: #b3a1d6;
    --accent: #d98a70;
    --quote: #8fbf9c;
    --badge-bg: #262b36;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 var(--sans);
}
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.7rem; margin: .8rem 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.dim { color: var(--muted); }
.hl { color: var(--accent); }

/* header */
.site-head {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.brand { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--fg); }
.brand-tag { color: var(--accent); font-family: var(--mono); font-size: 1rem; }
.site-nav { display: flex; gap: .9rem; font-size: .95rem; }
.qsearch { margin-left: auto; }
.qsearch input, .bigsearch input {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem .7rem;
  font: inherit;
  font-size: .9rem;
  width: 13rem;
  max-width: 100%;
}
.qsearch input:focus, .bigsearch input:focus { outline: 2px solid var(--link); border-color: transparent; }

/* hero + search */
.hero { margin: 1rem 0 2rem; }
.hero h1 { font-size: 2rem; }
.lede { font-size: 1.05rem; color: var(--muted); max-width: 62ch; }
.bigsearch { display: flex; gap: .5rem; margin: 1.2rem 0 .6rem; }
.bigsearch input { flex: 1; font-size: 1rem; padding: .6rem .9rem; }
.bigsearch button {
  font: inherit;
  border: 0;
  border-radius: 8px;
  padding: .6rem 1.1rem;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.statline { color: var(--muted); font-size: .9rem; }

/* breadcrumbs */
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }

/* mail article */
.mail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  margin: .8rem 0 1.2rem;
}
.mail header { border-bottom: 1px solid var(--border); margin-bottom: 1rem; padding-bottom: .8rem; }
.mail h1 { margin: 0 0 .4rem; font-size: 1.45rem; }
.mail-meta { margin: 0; color: var(--muted); font-size: .95rem; }
.mail-author { color: var(--accent); font-weight: 600; }
.mail-body { font-size: .95rem; }
.mail-body pre {
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
}
.mail-body img { max-width: 100%; height: auto; }
.quote { color: var(--quote); }

/* thread box */
.thread-box {
  background: var(--badge-bg);
  border-radius: 10px;
  padding: .9rem 1.2rem;
  font-size: .93rem;
  margin: 1rem 0;
}
.thread-box p { margin: .2rem 0; }
.thread-box ul { margin: .4rem 0 .2rem; padding-left: 1.2rem; }
.thread-box li { margin: .25rem 0; }
.thread-ref a, .thread-replies a { font-weight: 600; }

/* prev/next */
.prevnext { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.4rem 0; }
.pn {
  flex: 1 1 16rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .9rem;
  color: var(--fg);
}
.pn span { display: block; font-size: .78rem; color: var(--muted); }
.pn.next { text-align: right; }
.pn:hover { border-color: var(--link); text-decoration: none; }

/* message lists */
.msg-list { list-style: none; margin: .8rem 0; padding: 0; }
.msg-list li {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: .2rem .8rem;
  align-items: baseline;
  padding: .45rem .2rem;
  border-bottom: 1px solid var(--border);
}
.msg-list time { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.msg-list a:visited { color: var(--visited); }
.msg-list .dim { font-size: .85rem; }
.badge {
  background: var(--badge-bg);
  border-radius: 99px;
  padding: .05rem .6rem;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}

/* chips (month/year navigation) */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .25rem .6rem;
  font-size: .85rem;
  color: var(--fg);
}
.chip b { color: var(--accent); font-weight: 600; }
.chip:hover { border-color: var(--link); text-decoration: none; }
.yearrow h2, .yearrow h3 { margin: 1.2rem 0 .3rem; }

/* authors */
.author-list { list-style: none; padding: 0; columns: 2; column-gap: 2rem; }
.author-list li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .3rem .1rem;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
}

/* about */
.about { border-top: 1px solid var(--border); margin-top: 2.5rem; padding-top: .5rem; }
.about p { color: var(--muted); font-size: .93rem; max-width: 70ch; }

/* footer */
.site-foot {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
.site-foot p {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  color: var(--muted);
  font-size: .85rem;
}

/* pagefind tweaks */
#search { margin-top: 1rem; }
#search .pagefind-ui__search-input { font: inherit; }

@media (max-width: 640px) {
  .site-head { padding: .7rem .8rem; }
  .qsearch { margin-left: 0; width: 100%; }
  .qsearch input { width: 100%; }
  .msg-list li { grid-template-columns: 1fr; gap: 0; }
  .msg-list time { order: 2; }
  .msg-list .dim { order: 3; }
  .author-list { columns: 1; }
  .mail { padding: 1rem; }
}