body { background: #fff; color: #252525; font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.85; }
h1, h2, h3, h4, header, nav, footer, time { font-family: "Roboto Mono", "PingFang SC", "Microsoft YaHei", sans-serif; }
.content { max-width: 820px; }
header { gap: 1rem; flex-wrap: wrap; }
header nav { display: flex; gap: .9rem; flex-wrap: wrap; }
header nav a { margin: 0; }
.site-description { color: #666; margin-bottom: 2.5rem; }
.list-item { margin-bottom: 2.8rem; }
.list-item .title { line-height: 1.5; }
pre { overflow-x: auto; line-height: 1.65; }
code { font-family: "Roboto Mono", monospace; }
img { max-width: 100%; height: auto; }
.legacy-note { color: #777; font-size: .85rem; border-left: 2px solid #ddd; padding-left: .8rem; margin: 1rem 0 2rem; }
.body { overflow-wrap: anywhere; }
footer { font-size: .8rem; }
@media (max-width: 640px) { .content { padding: 20px; } h1.title { font-size: 1.5rem; } header nav { gap: .7rem; } }

/* Quiet monochrome accents over Archie's default crimson and purple. */
:root {
  --color-primary: #525252;
  --color-primary-hover: #f5f5f5;
  --color-border: #dedede;
  --color-callout: #525252;
  --color-background-toc: #fafafa;
  --color-background-pre: #fafafa;
  --color-background-draft: #f5f5f5;
}
a { border-bottom: 1px solid #d4d4d4; border-block-end: 1px solid #d4d4d4; }
a:hover, a:focus { background: transparent; color: #111; border-color: #737373; outline: none; }
a:focus-visible { outline: 2px solid #737373; outline-offset: 4px; }
header a, .list-item .title a { border-bottom: 0; border-block-end: 0; }
header a:hover, .list-item .title a:hover { text-decoration: underline; text-decoration-color: #aaa; text-underline-offset: .3em; }
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before { color: #aaa; }
.readmore { color: #737373; }
.soc:hover, .soc:focus { color: #111; }
footer { border-top: 1px solid #e5e5e5; border-block-start: 1px solid #e5e5e5; }
::selection { background: #e5e5e5; color: #171717; }
::-moz-selection { background: #e5e5e5; color: #171717; }

/* Keep the site's restrained palette readable when Archie's dark sheet is enabled. */
html[data-theme="dark"] {
  --color-primary-dark: #bcbcbc;
  --color-border-dark: #666;
}
html[data-theme="dark"] body { background: #202124; color: #e8e8e8; }
html[data-theme="dark"] .site-description,
html[data-theme="dark"] .search-hint,
html[data-theme="dark"] .search-result-meta,
html[data-theme="dark"] .meta,
html[data-theme="dark"] time,
html[data-theme="dark"] .readmore { color: #bcbcbc; }
html[data-theme="dark"] .legacy-note { color: #bcbcbc; border-left-color: #666; }
html[data-theme="dark"] a { border-color: #666; }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus { background: transparent; color: #fff; border-color: #bcbcbc; }
html[data-theme="dark"] a:focus-visible { outline-color: #bcbcbc; }
html[data-theme="dark"] header a:hover,
html[data-theme="dark"] .list-item .title a:hover { text-decoration-color: #bcbcbc; }
html[data-theme="dark"] h1::before,
html[data-theme="dark"] h2::before,
html[data-theme="dark"] h3::before,
html[data-theme="dark"] h4::before,
html[data-theme="dark"] h5::before,
html[data-theme="dark"] h6::before { color: #aaa; }
html[data-theme="dark"] .soc:hover,
html[data-theme="dark"] .soc:focus { color: #fff; }
html[data-theme="dark"] footer { border-color: #666; }
html[data-theme="dark"] ::selection { background: #666; color: #fff; }
html[data-theme="dark"] ::-moz-selection { background: #666; color: #fff; }