/* stderr.de — shared stylesheet for the document sections
   Retro-adjacent, but built for reading. No JavaScript anywhere. */

:root{
  --bg:#0b0d10;
  --bg-alt:#12161c;
  --panel:#161b23;
  --navy:#001a4d;
  --line:#2a323d;
  --text:#c3ccd6;
  --dim:#8a95a2;
  --head:#e9eff5;
  --cyan:#4fd6d6;
  --amber:#ffd84d;
  --green:#7ee081;
  --red:#ff8f7a;
  --mono:"Courier New",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:1.5rem }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}

/* ---------- masthead ---------- */

.masthead{
  border-bottom:1px solid var(--line);
  background:var(--bg-alt);
  padding:10px 0;
  font-family:var(--mono);
  font-size:12.5px;
}
.masthead .inner{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
}
.masthead a{ color:var(--dim); text-decoration:none }
.masthead a:hover{ color:var(--amber); text-decoration:underline }
.masthead .home{ color:var(--cyan); font-weight:bold }
.masthead .sep{ color:var(--line) }

/* ---------- layout ---------- */

.page{ max-width:1180px; margin:0 auto; padding:0 20px 90px }

.doc{
  display:grid;
  grid-template-columns:1fr;
  gap:44px;
  align-items:start;
}
@media (min-width:1000px){
  .doc{ grid-template-columns:250px minmax(0,1fr) }
}

.prose{ max-width:74ch; min-width:0 }

/* ---------- table of contents ---------- */

.toc{
  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
  border:1px solid var(--line);
  background:var(--bg-alt);
  padding:16px 18px;
}
@media (min-width:1000px){
  .toc{ position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto }
}
.toc h2{
  margin:0 0 12px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--dim); font-family:var(--mono); font-weight:normal; border:0; padding:0;
}
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc }
.toc li{ margin:0 0 3px }
.toc a{ color:var(--text); text-decoration:none; display:block; padding:2px 0 }
.toc a:hover{ color:var(--amber) }
.toc a:target,.toc li a:focus{ color:var(--amber) }
.toc .sub{ padding-left:14px; font-size:12.5px; color:var(--dim) }
.toc .grp{
  margin:14px 0 6px; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--cyan); opacity:.85;
}

/* ---------- headings ---------- */

h1{
  font-size:clamp(28px,5.2vw,44px);
  line-height:1.15;
  margin:0 0 .25em;
  color:var(--head);
  letter-spacing:-.5px;
}
h2{
  font-size:clamp(21px,3.2vw,27px);
  margin:2.4em 0 .6em;
  color:var(--head);
  padding-bottom:.3em;
  border-bottom:1px solid var(--line);
  scroll-margin-top:20px;
}
h3{
  font-size:19px; margin:2em 0 .5em; color:var(--cyan);
  scroll-margin-top:20px;
}
h4{ font-size:16px; margin:1.6em 0 .4em; color:var(--head) }

.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--cyan); margin:0 0 14px;
}
.standfirst{
  font-size:19px; line-height:1.55; color:var(--head); font-style:italic;
  margin:0 0 1.4em; padding-left:16px; border-left:3px solid var(--cyan);
}

a{ color:var(--amber) }
a:visited{ color:#e0b0ff }
a:hover{ color:#fff }

p{ margin:0 0 1.1em }

/* ---------- byline / provenance ---------- */

.byline{
  font-family:var(--mono); font-size:13px; color:var(--dim);
  margin:0 0 1.6em; line-height:1.7;
}
.byline strong{ color:var(--text); font-weight:normal }

.vintage{
  border:1px solid #6b5a20;
  background:#1c1808;
  padding:14px 16px;
  margin:0 0 2em;
  font-size:14.5px;
  line-height:1.6;
}
.vintage b{ color:var(--amber); font-family:var(--mono); font-size:12px;
  letter-spacing:1.5px; text-transform:uppercase; display:block; margin-bottom:6px }

.note{
  border-left:3px solid var(--line);
  padding:2px 0 2px 16px;
  color:var(--dim);
  font-size:14.5px;
  margin:0 0 1.4em;
}

/* ---------- key points ---------- */

.keypoints{
  border:1px solid var(--line); background:var(--bg-alt);
  padding:18px 20px 18px 42px; margin:0 0 2em;
}
.keypoints li{ margin:0 0 .7em }
.keypoints li:last-child{ margin-bottom:0 }

/* ---------- figures ---------- */

figure{ margin:2em 0; }
figure img{
  display:block; max-width:100%; height:auto;
  border:1px solid var(--line); background:#fff;
}
figcaption{
  font-size:13.5px; color:var(--dim); margin-top:10px; line-height:1.55;
}
.shot img{ background:#000 }

/* ---------- tables ---------- */

.scroller{
  overflow-x:auto; margin:2em 0;
  border:1px solid var(--line);
  -webkit-overflow-scrolling:touch;
}
table{
  border-collapse:collapse; width:100%;
  font-size:14px; font-family:var(--mono);
}
caption{
  text-align:left; padding:12px 14px; font-family:var(--sans); font-size:14px;
  color:var(--dim); border-bottom:1px solid var(--line); background:var(--bg-alt);
}
th,td{
  padding:7px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
thead th{
  background:var(--panel); color:var(--head); position:sticky; top:0;
  font-weight:bold; border-bottom:2px solid var(--line);
}
tbody th{ color:var(--text); font-weight:normal; background:var(--bg-alt) }
tbody tr:hover td{ background:#171d26 }
td.num{ text-align:right; font-variant-numeric:tabular-nums }
.yes{ color:var(--green) } .no{ color:var(--dim) } .na{ color:var(--dim); font-style:italic }
.rowgroup th{
  background:var(--panel); color:var(--cyan); font-family:var(--mono);
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
}

/* ---------- scanner cards ---------- */

.scanner{
  border:1px solid var(--line); background:var(--bg-alt);
  padding:22px 24px; margin:0 0 26px; scroll-margin-top:20px;
}
.scanner h3{ margin-top:0 }
.scanner .vendor{
  font-family:var(--mono); font-size:12.5px; color:var(--dim);
  margin:-.3em 0 1.1em;
}
.scorebar{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 0 1.2em;
  font-family:var(--mono); font-size:12.5px; color:var(--dim);
  padding-bottom:1em; border-bottom:1px solid var(--line);
}
.scorebar b{ color:var(--head); font-weight:normal }
.pros{ display:grid; gap:6px 26px; margin:1.2em 0 0; padding:0; list-style:none; font-size:15px }
@media (min-width:640px){ .pros{ grid-template-columns:1fr 1fr } }
.pros li{ padding-left:20px; position:relative }
.pros li.up::before{ content:"+"; position:absolute; left:0; color:var(--green); font-family:var(--mono) }
.pros li.down::before{ content:"\2212"; position:absolute; left:0; color:var(--red); font-family:var(--mono) }

/* ---------- doorways (home + hubs) ---------- */

.cards{ display:grid; gap:16px; margin:0 0 1.5em }
@media (min-width:760px){ .cards.two{ grid-template-columns:1fr 1fr } }
.card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); background:var(--bg-alt); padding:20px 22px;
}
.card:hover{ border-color:var(--cyan); background:var(--panel) }
.card:visited{ color:inherit }
.card b{ display:block; font-size:19px; color:var(--head); margin-bottom:6px }
.card .path{ font-family:var(--mono); font-size:12px; color:var(--cyan); display:block; margin-bottom:10px }
.card span.d{ display:block; font-size:15px; color:var(--text); line-height:1.55 }

/* ---------- publication list ---------- */

.pubs{ list-style:none; margin:0 0 2em; padding:0 }
.pubs > li{
  border-bottom:1px solid var(--line); padding:20px 0;
}
.pubs > li:first-child{ border-top:1px solid var(--line) }
.pubmeta{
  font-family:var(--mono); font-size:12px; color:var(--dim);
  letter-spacing:.5px; margin:0 0 6px;
}
.pubmeta .year{ color:var(--cyan) }
.pubs h3{ margin:0 0 6px; font-size:18px; color:var(--head) }
.pubs h3 a{ color:var(--head); text-decoration:none }
.pubs h3 a:hover{ color:var(--amber); text-decoration:underline }
.pubs p{ margin:0; font-size:15px; color:var(--text) }
.pubs .links{ margin-top:8px; font-size:13.5px; font-family:var(--mono) }

/* compact list, e.g. LinkedIn essays */
.lipubs{ list-style:none; margin:0 0 2em; padding:0 }
.lipubs > li{
  border-bottom:1px dotted var(--line); padding:7px 0;
  font-size:15px; line-height:1.5;
}
.lipubs > li:first-child{ border-top:1px dotted var(--line) }
.lipubs .d{ font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.5px }
.lipubs a{ color:var(--head); text-decoration:none }
.lipubs a:hover{ color:var(--amber); text-decoration:underline }

/* ---------- footer ---------- */

footer.site{
  border-top:1px solid var(--line); margin-top:70px; padding:26px 0 0;
  font-size:13.5px; color:var(--dim); line-height:1.8;
}
footer.site a{ color:var(--dim) }
footer.site a:hover{ color:var(--amber) }

/* ---------- print ---------- */

@media print{
  body{ background:#fff; color:#000; font-size:11pt }
  .masthead,.toc,.vintage{ display:none }
  .doc{ display:block }
  a{ color:#000 }
  .scanner,.keypoints{ border:1px solid #999; background:none }
}