/* Pixel Art, informed by ui-ux-pro-max. Reading text retains a clear sans-serif face. */
@font-face {
  font-family: "Fusion Pixel";
  src: url("assets/fusion-pixel.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --bg: #f0f6ff; --surface: #fff; --text: #082a61; --muted: #476186;
  --accent: #0057e5; --on-accent: #fff; --line: #9ab7df; --soft: #deebff;
  --code: #deebff; --signal: #0754ba; --focus: #003d9e; --danger: #ac253b;
  --pixel-grid: #e2ecfc; --pixel-ink: #082a61; --pixel-shadow: #b6cdf2;
  --pixel-highlight: #71c1ff; --pixel-blue: #2995ff; --pixel-size: 4px;
  --pixel-font: "Fusion Pixel", var(--mono), var(--sans);
  --serif: var(--pixel-font);
}
:root[data-theme="dark"] {
  --bg: #08172e; --surface: #102645; --text: #e5f0ff; --muted: #a2badc;
  --accent: #71bcff; --on-accent: #052451; --line: #476b9c; --soft: #16355c;
  --code: #0a203e; --signal: #94d5ff; --focus: #a7dbff; --danger: #ffb0bc;
  --pixel-grid: #0e213c; --pixel-ink: #86aeeb; --pixel-shadow: #030d20;
  --pixel-highlight: #aadfff; --pixel-blue: #2995ff;
}
body {
  background-image: linear-gradient(90deg, var(--pixel-grid) 1px, transparent 1px), linear-gradient(var(--pixel-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
::selection { background: var(--accent); color: var(--on-accent); }
.brand { font-family: var(--pixel-font); font-size: 28px; font-weight: 400; gap: 16px; }
.brand-mark { border: 2px solid var(--pixel-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--pixel-shadow); }
.site-header { border-bottom: 2px solid var(--pixel-ink); }
.site-header nav { gap: 32px; }
.site-header nav a { font-family: var(--pixel-font); font-size: 20px; }
.site-header nav a[aria-current="page"]::after { height: 4px; bottom: 0; }
.theme-toggle { font-family: var(--pixel-font); font-size: 16px; }
.button, .plain-button, .search-input, input, textarea, select, #markdown-editor, .code-block, .prose pre, .prose p code, .prose li code { border-radius: 0; }
.button, .plain-button {
  border: 2px solid var(--pixel-ink); box-shadow: 4px 4px 0 var(--pixel-shadow);
  font-family: var(--pixel-font); font-size: 16px; font-weight: 400; min-height: 48px;
  transition: background-color 120ms steps(2), color 120ms steps(2), box-shadow 120ms steps(2);
}
.plain-button { background: var(--surface); }
.button:hover { filter: none; background: var(--soft); color: var(--text); }
.plain-button:hover { background: var(--soft); border-color: var(--pixel-ink); }
.button:active, .plain-button:active { box-shadow: 1px 1px 0 var(--pixel-shadow); }
input, textarea, select, .search-input { border-width: 2px; }
input, textarea, select { border-color: var(--muted); font-size: 16px; }
.search-input input, .search-input button { font-size: 16px; }
.cover-copy h1 { font-family: var(--pixel-font); font-size: clamp(60px, 6vw, 84px); font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.cover-copy > p { font-size: 16px; line-height: 2; }
.cover-links { gap: 32px; }
.cover-links .button { min-width: 156px; }
.cover-links .text-link { font-family: var(--pixel-font); font-size: 18px; }
.cover-art { width: 105%; margin-left: -3%; }
.cover-art-classic { display: none; }
.cover-art-pixel { display: block; shape-rendering: crispEdges; }
.cover-art figcaption { font-family: var(--pixel-font); font-size: 16px; margin-top: 0; }
.pixel-window-shadow { fill: var(--pixel-shadow); }
.pixel-window { fill: var(--surface); stroke: var(--pixel-ink); stroke-width: 4; }
.pixel-titlebar { fill: var(--soft); }
.pixel-outline { fill: none; stroke: var(--pixel-ink); stroke-width: 4; }
.pixel-text { fill: var(--text); font-family: var(--pixel-font); font-size: 16px; }
.pixel-dim { fill: var(--muted); }
.pixel-chip-shadow { fill: var(--pixel-shadow); }
.pixel-chip { fill: var(--accent); stroke: var(--pixel-ink); stroke-width: 4; }
.pixel-chip-inner { fill: var(--soft); stroke: var(--pixel-ink); stroke-width: 4; }
.pixel-pin { fill: var(--pixel-ink); }
.pixel-trace { fill: none; stroke: var(--line); stroke-width: 4; }
.pixel-signal { fill: var(--pixel-highlight); stroke: var(--pixel-ink); stroke-width: 4; }
.pixel-cell { fill: var(--pixel-blue); }
.pixel-signature { fill: var(--text); font-family: var(--pixel-font); font-size: 48px; }
.cover-scroll { font-family: var(--pixel-font); font-size: 16px; }
.section-heading h2, .page-heading h1, .article-heading h1, .project-index h2, .friends-empty h2, .login-panel h1, .theme-install h2 {
  font-family: var(--pixel-font); font-weight: 400; letter-spacing: 0;
}
.section-heading h2 { font-size: 28px; }
.home-writing, .blog-layout, .article-layout, .project-detail, .about-layout, .project-index, .friends-empty { border-top: 2px solid var(--pixel-ink); }
.home-story, .home-work-link, .article-row { border-bottom: 2px solid var(--line); }
.home-story h3, .home-work-link { font-family: var(--pixel-font); font-size: 24px; }
.home-work-link small, .home-story time, .article-date { font-family: var(--mono); }
.home-story { background: var(--bg); padding-inline: 16px; }
.home-story:hover, .home-work-link:hover { background: var(--soft); }
.home-work-link { padding-inline: 16px; }
.site-footer { border-top: 2px solid var(--pixel-ink); }
.footer-name { font-size: 24px; }
.status-label { border: 1px solid var(--line); border-radius: 0; }
.prose blockquote { border-left-width: 4px; }
.about-margin, .editorial-notes { border-left-width: 2px; }
.article-toc { background: var(--bg); }
.prose, .editor-fields, .editor-preview-panel { background: var(--bg); }
.admin-tabs { flex-wrap: wrap; gap: 12px 28px; }
.admin-tabs a { font-family: var(--pixel-font); font-size: 18px; }
.theme-card, .theme-install, .theme-preview-banner { border: 2px solid var(--pixel-ink); box-shadow: 4px 4px 0 var(--pixel-shadow); }
.theme-card h2 { font-family: var(--pixel-font); font-size: 24px; font-weight: 400; }
.theme-card[data-active="true"] { border-color: var(--accent); }
@media (max-width: 1050px) {
  .cover-copy h1 { font-size: 72px; }
  .site-header nav { gap: 18px; }
}
@media (max-width: 760px) {
  .brand { font-size: 24px; }
  .site-header nav { gap: 0; }
  .site-header nav a { font-size: 16px; }
  .theme-toggle [data-theme-label] { font-size: 16px; }
  .cover-copy h1 { font-size: 60px; }
  .cover-copy > p { font-size: 16px; margin-top: 20px; }
  .cover-links { gap: 24px; margin-top: 24px; }
  .cover-art { width: min(100%, 340px); margin: 12px 0 0; justify-self: center; }
  .cover-scroll { font-size: 16px; }
  .page-heading h1 { font-size: 36px; }
  .article-heading h1 { font-size: 32px; }
  .home-story h3, .home-work-link { font-size: 24px; }
}
@media (max-width: 440px) {
  .cover-copy h1 { font-size: 48px; }
  .cover-art { width: min(100%, 280px); margin-top: 16px; }
  .cover-links .button { min-width: 144px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}