/* Boot-screen skin on the existing blog layout. */
@font-face {
  font-family: 'Chunky Pixel Small Screen';
  src: url('fonts/ChunkyPixelSmallScreen.woff2?v=punctuation-1') format('woff2');
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chunky Pixel Grid Screen';
  src: url('fonts/ChunkyPixelGridScreen.woff2') format('woff2');
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --terminal-bg: #17191e;
  --terminal-text: #eee7bf;
  --terminal-muted: #c6beb2;
  --terminal-rule: #ffffff29;
  --paper: var(--terminal-bg);
  --ink: var(--terminal-text);
  --muted: var(--terminal-muted);
  --line: var(--terminal-rule);
  --accent: var(--terminal-accent, #a7d7bd);
  --cream: #20242a;
  --cream-hover: #2c3533;
  --simple-font: 'Chunky Pixel Small Screen';
  font-family: var(--simple-font), ui-monospace, monospace;
  font-size: 16px;
  -webkit-font-smoothing: none;
}
body { background: var(--paper); }
::selection { background: var(--accent); color: var(--paper); }
.brand-logo {
  width: 150px;
  height: 171px;
  background: url('img/head-logo-dots.svg') center / contain no-repeat;
  background-blend-mode: normal;
  mask: none;
  opacity: 1;
  clip-path: none;
}
.brand-logo::after { display: none; }
.brand-copy h1, .post-title {
  font-family: var(--simple-font), monospace;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--accent);
}
.brand-copy p, .site-nav, .post-date, .post-excerpt, .read-post,
.more-posts, .posts-status, .site-footer {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
.post-date { text-transform: none; }
.post-title { font-size: 24px; }
.post-excerpt { color: #ded5c8; }
.post-excerpt { line-height: 1.5; }
.site-nav a:last-child { color: var(--muted); }
.site-nav a:hover, .site-footer a:hover, .post-title a:hover { color: var(--ink); }
.post-thumbnail { background: #101115; }
.read-post, .more-posts { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.more-posts:hover { background: var(--cream-hover); border-color: var(--accent); }
.read-post { min-height: 44px; padding: 8px 0; border: 0; background: transparent; }
.read-post:hover { background: transparent; color: var(--ink); }
.site-header { padding: 24px 0; }
.brand-copy .site-nav { margin: 12px 0 0; gap: 24px; }
.brand-copy .site-nav a { min-height: 36px; }
.site-footer { gap: 16px; }
@media (max-width: 740px) {
  .site-header { flex-wrap: wrap; }
  .site-identity { width: 100%; }
}
@media (max-width: 580px) {
  .brand-copy h1 { font-family: var(--simple-font), monospace; font-size: 16px; }
  .brand-copy p { font-size: 16px; max-width: 195px; }
  .post-title { font-size: 24px; }
  .post-excerpt { font-size: 16px; }
  .site-footer { font-size: 16px; }
}

/* Square LCD edges; the logo grid is geometry baked into its SVG asset. */
.post-thumbnail, .read-post, .more-posts, .site-nav a, .skip-link { border-radius: 0; }
@media (max-width: 580px) {
  .brand-logo { width: 100px; height: 114px; background-image: url('img/head-logo-dots-mobile.svg'); }
}

.read-post { gap: 10px; white-space: nowrap; }