/* vyruss.org blog — design tokens + dark skin, matching the main site.
   Loaded AFTER main.css from base.html so these overrides win. */

@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lato-400-latin.woff2) format('woff2'); /* self-hosted at site root */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0f1014;
  --surface: #15171d;
  --fg: #c9cdd4;
  --bright: #edeff3;
  --muted: #8a919c;
  --accent: #8aa9ff;
  --line: #262b33;
  --radius: 4px;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(60rem 44rem at 50% 16rem, #333947, transparent 70%);
  background-repeat: no-repeat;
}

a:hover, a:active { color: var(--accent); }
::selection { background: #2b3a5c; color: var(--bright); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img#logo {
  box-shadow: none;
  height: 100px;
  width: 100px;
  vertical-align: middle;
}

#container header a { color: var(--bright); }
#container header ul.social-media { float: right; }
#container header ul.social-media a { color: var(--muted); }
#container header ul.social-media a:hover { color: var(--accent); }
#container header p em { color: var(--muted); }

#container nav a { color: var(--fg); }
#container nav a:hover { color: var(--accent); }

/* metadata reads as machine text: dates, read time, categories, tags */
time,
.meta-aside,
#container main article aside,
#container main section#home ul li aside {
  font-family: var(--mono);
}

table td, table th { border-bottom: 1px solid var(--line); padding: .3em .6em; text-align: left; }
table thead th { color: var(--bright); }

ul.pagination li.active { color: var(--accent); }