body {
  color: var(--reader-text);
  background: var(--reader-bg);
  font-family: var(--reader-font-body);
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
}

a { color: var(--reader-link); }
a:visited { color: var(--reader-link-visited); }
a:hover { color: var(--reader-link-hover); }

.stat,
.post {
  color: var(--reader-text);
  background: var(--reader-surface);
  border: var(--reader-border-width) solid var(--reader-border);
  border-radius: var(--reader-radius);
  box-shadow: var(--reader-shadow);
}

.post {
  font-family: var(--reader-font-body);
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
}

.stat b,
.year-marker,
.meta,
.label,
.warning,
.comments h3,
.comment-meta,
.original,
.permalink,
.site-footer { font-family: var(--reader-font-ui); }

.post h2 {
  color: var(--reader-heading);
  font-family: var(--reader-font-heading);
  font-size: var(--reader-heading-size);
  font-weight: var(--reader-heading-weight);
  line-height: var(--reader-heading-line-height);
  letter-spacing: var(--reader-heading-spacing);
}

.meta { color: var(--reader-muted); font-size: .875rem; line-height: 1.45; }
.year-marker { color: var(--reader-muted); font-size: 1rem; font-weight: 700; }
.year-marker span { background: var(--reader-marker-bg); border-radius: 999px; }
.stat { border-color: var(--reader-border); }

.label {
  padding: .18rem .58rem;
  color: var(--reader-label-text);
  background: var(--reader-label-bg);
  border: 1px solid var(--reader-label-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: .78rem;
  line-height: 1.35;
}

.label[aria-pressed="true"] {
  color: var(--reader-surface);
  background: var(--reader-link);
  border-color: var(--reader-link);
}

.warning {
  padding: .2rem .42rem;
  color: var(--reader-muted);
  background: transparent;
  border: 1px solid var(--reader-border);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.35;
}

.body p,
.comment-body p { margin-block: var(--reader-paragraph-space); }
.body figcaption { color: var(--reader-muted); font-size: .85em; }
.body blockquote { color: var(--reader-blockquote-text); border-left: 3px solid var(--reader-blockquote-border); }
.song-credit { color: var(--reader-song); border-left: 3px solid var(--reader-song-border); font-style: italic; }

.media-card,
.music-mentions {
  font-family: var(--reader-font-ui);
  font-size: .86rem;
}

.embedded-media { margin: 1.2rem 0; }

.media-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  max-width: 100%;
  margin: .6rem 0;
  padding: .75rem;
  color: var(--reader-text);
  background: var(--reader-label-bg);
  border: 1px solid var(--reader-border);
  border-radius: calc(var(--reader-radius) * .7);
}

.media-card img { width: min(11rem, 35%); height: auto; margin: 0; }
.media-card div { display: grid; min-width: 0; gap: .1rem; }
.media-card span { color: var(--reader-muted); }
.media-card a { overflow-wrap: anywhere; }

.music-mentions {
  margin: 1rem 0;
  padding: .7rem 1rem;
  background: var(--reader-label-bg);
  border-left: 3px solid var(--reader-song-border);
}

.music-mentions h3 {
  margin: 0 0 .4rem;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.music-mentions ul { margin: 0; padding-left: 1.25rem; }

.missing-image {
  padding: .65rem .8rem;
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px dashed var(--warning-border);
  font: .8rem/1.45 var(--reader-font-ui);
}

.comments { border-top: 1px solid var(--reader-border); }
.comments h3 { font-size: .85rem; line-height: 1.4; letter-spacing: .05em; }
.comment { border-left: 2px solid var(--reader-border); }
.comment-meta { color: var(--reader-muted); font-size: .8rem; line-height: 1.45; }
.original { font-size: .8rem; line-height: 1.5; }
.permalink { font-size: .75rem; line-height: 1.5; }

.debug {
  color: var(--reader-debug-text);
  background: var(--reader-debug-bg);
  border: 1px solid var(--reader-border);
  font: .75rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.debug summary { font-family: var(--reader-font-ui); }
.site-footer { color: var(--reader-muted); font-size: .8rem; line-height: 1.5; }

html[data-theme="focus"] .meta,
html[data-theme="focus"] .labels,
html[data-theme="focus"] .post-footer,
html[data-theme="focus"] .debug { opacity: .58; }

html[data-theme="focus"] .warnings { opacity: 1; }

html[data-theme="kazo"] .post,
html[data-theme="historical-auto"] .post[data-source="poteito"],
html[data-theme="historical-auto"] .post[data-source="kazo-wordpress-recovered"],
html[data-theme="historical-auto"] .post[data-source="kazobiitboks"] {
  border-width: 0 0 1px;
  border-style: dotted;
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="kazo"] .post h2,
html[data-theme="historical-auto"] .post[data-source="poteito"] h2,
html[data-theme="historical-auto"] .post[data-source="kazo-wordpress-recovered"] h2,
html[data-theme="historical-auto"] .post[data-source="kazobiitboks"] h2 {
  text-transform: uppercase;
}

html[data-theme="kazo"] .song-credit,
html[data-theme="historical-auto"] .post[data-source="poteito"] .song-credit,
html[data-theme="historical-auto"] .post[data-source="kazo-wordpress-recovered"] .song-credit,
html[data-theme="historical-auto"] .post[data-source="kazobiitboks"] .song-credit {
  margin: 1em 0 .75em;
  padding: 0;
  border: 0;
  color: #999;
  font-family: "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
  font-size: 90%;
  font-style: italic;
  line-height: 1.4;
  text-transform: lowercase;
}

html[data-theme="rant"] .post h2,
html[data-theme="historical-auto"] .post[data-source="therantmarathon"] h2 {
  font-family: Arial, Tahoma, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

@media (max-width: 360px) {
  .post h2 { font-size: min(var(--reader-heading-size), 1.45rem); }
  .media-card { display: block; }
  .media-card img { width: auto; max-width: 100%; margin-bottom: .5rem; }
}