@font-face {
  font-family: "FT Sans";
  src: url("fonts/DejaVuSans.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FT Sans";
  src: url("fonts/DejaVuSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "FT Mono";
  src: url("fonts/DejaVuSansMono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FT Mono";
  src: url("fonts/DejaVuSansMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --black: #0a0a0a;
  --ink: #f2f0eb;
  --red: #ff0033;
  --red-dark: #b3001f;
  --paper: #111111;
  --border-w: 3px;
  --font-display: "FT Sans", "DejaVu Sans", "Verdana", sans-serif;
  --font-body: "FT Sans", "DejaVu Sans", "Verdana", sans-serif;
  --font-mono: "FT Mono", "DejaVu Sans Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background-color: var(--black);

  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

::selection {
  background: var(--red);
  color: var(--black);
}

a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

a:hover {
  background: var(--red);
  color: var(--black);
  text-decoration: none;
}

.masthead {
  padding: 40px 20px 28px;
  text-align: center;
  border-bottom: var(--border-w) solid var(--red);
  overflow: hidden;
}

.stage {
  position: relative;
  display: inline-block;
  padding: 58px 190px 64px;
}

.deco {
  position: absolute;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  color: var(--red);
  pointer-events: none;
  user-select: none;
  white-space: pre;
}

.deco--w  { color: var(--ink); }
.deco--sm { font-size: 11px; }
.deco--lg { font-size: 18px; line-height: 1.05; }
.deco--xl { font-size: 26px; }
.deco .w  { color: var(--ink); }

.deco[data-d="1"]  { top: 14px;  left: 28px; }
.deco[data-d="2"]  { top: 22px;  left: 118px; }
.deco[data-d="3"]  { top: 48px;  left: 150px; }
.deco[data-d="4"]  { top: 62px;  left: 168px; }
.deco[data-d="5"]  { top: 20px;  left: 250px; }
.deco[data-d="6"]  { top: 30px;  left: 470px; }
.deco[data-d="7"]  { top: 40px;  left: 610px; }
.deco[data-d="8"]  { top: 8px;   right: 150px; }
.deco[data-d="9"]  { top: 28px;  right: 26px; }
.deco[data-d="10"] { top: 92px;  right: 70px; }
.deco[data-d="11"] { top: 108px; right: 128px; }
.deco[data-d="12"] { bottom: 30px; right: 44px; }
.deco[data-d="13"] { bottom: 16px; left: 40px; }
.deco[data-d="14"] { top: 64px;  left: 96px; line-height: 1.6; }
.deco[data-d="15"] { bottom: 22px; left: 250px; }
.deco[data-d="16"] { bottom: 14px; right: 250px; }
.deco[data-d="17"] { bottom: 40px; right: 190px; }
.deco[data-d="18"] { top: 120px; left: 190px; }
.deco[data-d="19"] { bottom: 46px; left: 130px; }
.deco[data-d="20"] { top: 74px;  right: 110px; }

@media (max-width: 1000px) {
  .stage { padding: 48px 30px 54px; max-width: 100%; }
  .masthead h1 { font-size: clamp(20px, 6.8vw, 48px); }

  .deco     { font-size: 12px; }
  .deco--sm { font-size: 9px; }
  .deco--lg { font-size: 14px; }
  .deco--xl { font-size: 18px; }

  .deco[data-d="1"]  { top: 4px;   left: 2px; }
  .deco[data-d="2"]  { top: 10px;  left: 50px; }
  .deco[data-d="3"]  { top: 30px;  left: 68px; }
  .deco[data-d="4"]  { top: 40px;  left: 84px; }
  .deco[data-d="5"]  { top: 8px;   left: 112px; }
  .deco[data-d="6"]  { top: 20px;  left: 200px; }
  .deco[data-d="7"]  { top: 28px;  right: 74px; }
  .deco[data-d="8"]  { top: 0;     right: 28px; }
  .deco[data-d="9"]  { top: 14px;  right: 0; }
  .deco[data-d="10"] { top: 58px;  right: 6px; }
  .deco[data-d="11"] { bottom: 30px; right: 36px; }
  .deco[data-d="12"] { bottom: 10px; right: 4px; }
  .deco[data-d="13"] { bottom: 6px;  left: 0; }
  .deco[data-d="14"] { display: none; }
  .deco[data-d="15"] { bottom: 16px; left: 118px; }
  .deco[data-d="16"] { bottom: 4px;  right: 100px; }
  .deco[data-d="17"] { bottom: 30px; right: 130px; }
  .deco[data-d="18"] { bottom: 24px; left: 44px; }
  .deco[data-d="19"] { bottom: 34px; left: 18px; }
  .deco[data-d="20"] { top: 40px;  right: 12px; }
}

.masthead h1 {
  margin: 0;
  font-family: var(--font-display);
  flex: 0 0 auto;
  font-size: clamp(30px, 5vw, 64px);
  font-weight: normal;
  line-height: 0.95;
  letter-spacing: 0.28em;
  padding-left: 0.28em;
  text-transform: lowercase;
  color: var(--ink);

  text-shadow:
    4px 4px 0 var(--red),
    -2px -2px 0 var(--red-dark);
}

.masthead h1 a {
  color: inherit;
  text-decoration: none;
  background: none;
}

.masthead h1 a:hover { color: inherit; background: none; }

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-bottom: var(--border-w) solid var(--red);
  background: var(--black);
}

.nav a {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 26px;
  border-right: 1px solid var(--red-dark);
}

.nav a:first-child { border-left: 1px solid var(--red-dark); }

.nav a:hover,
.nav a[aria-current="page"] {
  background: var(--red);
  color: var(--black);
}

@media (max-width: 600px) {

  .nav a {
    flex: 1 1 0;
    text-align: center;
    padding: 10px 6px;
    font-size: 18px;
    letter-spacing: 1px;
  }
  .nav a:first-child { border-left: none; }
  .nav a:last-child  { border-right: none; }
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

@media (max-width: 760px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

.section-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 0.35em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0 0 24px;
  white-space: nowrap;
}

.section-title::before,
.section-title::after {
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--red);
  vertical-align: middle;
}

.section-title::before { content: "-=~=~=~=(  "; }
.section-title::after  { content: "  )=~=~=~=-"; }

@media (max-width: 480px) {
  .section-title { font-size: 22px; letter-spacing: 0.25em; }
  .section-title::before { content: "-=~=( "; }
  .section-title::after  { content: " )=~=-"; }
  .masthead { padding: 28px 12px 22px; }
}

.blink {
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: bold;
  animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
}

.post {
  margin: 0 0 44px;
}

.post__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--red);
}

.post__date {
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.post__rule {
  flex: 1;
  height: 0;
  border-top: 3px double var(--red);
}

.post h2 {
  margin: 12px 0 4px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: 0.25em;
}

.post h2 a {
  color: var(--ink);
  text-decoration: none;
}

.post h2 a:hover {
  background: var(--red);
  color: var(--black);
}

@media (max-width: 600px) {
  .post h2 {
    font-size: 26px;
    letter-spacing: 0.1em;
  }
}

.post h2 .blink {
  font-size: 13px;
  letter-spacing: 1px;
  margin-left: 14px;
  vertical-align: middle;
}

.post__tags {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--red);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--red-dark);
}

.post p { margin: 0 0 12px; }

.post__more {
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}

.post__foot {
  margin-top: 16px;
  border-top: 1px dashed var(--red-dark);
}

.sidebar-box {
  border: var(--border-w) dashed var(--red);
  padding: 16px 18px;
  margin: 0 0 28px;
}

.sidebar-box h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
}

.sidebar-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.sidebar-box li {
  padding: 3px 0;
}

.sidebar-box li::before {
  content: "★ ";
  color: var(--red);
}

.sidebar-box p {
  margin: 0;
  font-size: 13px;
}

.hit-counter {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 4px;
  color: var(--red);
  background: var(--black);
  border: 2px inset var(--red-dark);
  display: inline-block;
  padding: 2px 10px;
}

.footer {
  border-top: var(--border-w) solid var(--red);
  padding: 22px 20px 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}

.footer .divider {
  color: var(--red);
  margin: 0 8px;
}

.layout--post {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}

.post__title {
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: 0.2em;
  color: var(--ink);
}

@media (max-width: 600px) {
  .post__title { font-size: 26px; letter-spacing: 0.08em; }
}

.post--full .post__tags { margin-bottom: 26px; }

.post__body {
  font-size: 16px;
  line-height: 1.75;
}

.post__body > :first-child { margin-top: 0; }

.post__body p { margin: 0 0 18px; }

.post__body h2,
.post__body h3,
.post__body h4 {
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--ink);
  line-height: 1.2;
  margin: 40px 0 14px;
}

.post__body h2 { font-size: 26px; letter-spacing: 0.15em; }
.post__body h3 { font-size: 20px; letter-spacing: 0.1em; }
.post__body h4 { font-size: 17px; letter-spacing: 0.06em; }

.post__body h2::before,
.post__body h3::before,
.post__body h4::before {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--red);
  letter-spacing: 0;
  margin-right: 10px;
}

.post__body h2::before { content: "##"; }
.post__body h3::before { content: "###"; }
.post__body h4::before { content: "####"; }

.post__body a { font-weight: bold; }

.post__body strong { color: var(--ink); }

.post__body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--red);
  background: rgba(255, 0, 51, 0.08);
  padding: 1px 5px;
}

.post__body pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  background: #000;
  border: 1px solid var(--red-dark);
  border-left: 3px solid var(--red);
  padding: 14px 16px;
  margin: 0 0 22px;
  overflow-x: auto;
}

.post__body pre code {
  color: inherit;
  background: none;
  padding: 0;
  font-size: inherit;
}

.post__body blockquote {
  margin: 0 0 22px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--red);
  color: var(--ink);
  opacity: 0.85;
}

.post__body blockquote p { margin: 0; }

.post__body ul,
.post__body ol {
  margin: 0 0 18px;
  padding-left: 28px;
}

.post__body li { margin: 4px 0; }

.post__body ul { list-style: none; padding-left: 22px; }

.post__body ul li::before {
  content: "▪";
  color: var(--red);
  display: inline-block;
  width: 18px;
  margin-left: -18px;
}

.post__body ul li:has(> input[type="checkbox"])::before { content: ""; width: 0; margin: 0; }

.post__body ol li::marker { color: var(--red); font-family: var(--font-mono); font-weight: bold; }

.post__body input[type="checkbox"] { accent-color: var(--red); margin-right: 6px; }

.post__body hr {
  border: 0;
  margin: 34px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--red);
}

.post__body hr::before { content: "-=~=~=~=~=~=~=-"; }

.post__body figure {
  margin: 0 0 24px;
}

.post__body img {
  display: block;
  max-width: 100%;
  border: 2px solid var(--red);
  box-shadow: 6px 6px 0 var(--red-dark);
}

.post__body figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
}

.post__body figcaption::before { content: "// "; }

.post__body table {
  border-collapse: collapse;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.post__body th,
.post__body td {
  border: 1px solid var(--red-dark);
  padding: 6px 12px;
  text-align: left;
}

.post__body th {
  color: var(--red);
  border-bottom: 3px double var(--red);
}

.post--full .post__foot { margin-top: 30px; margin-bottom: 14px; }

.post__pdf {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--red);
  border: 2px solid var(--red);
  padding: 1px 8px;
  text-decoration: none;
  white-space: nowrap;
}

.post__pdf:hover {
  background: var(--red);
  color: var(--black);
}

@media print {
  body { background: #fff; color: #000; }
  .nav, .deco, .footer, aside, .post__more, .post__pdf, .blink, .section-title { display: none !important; }
  .masthead { border: 0; padding: 0 0 10px; }
  .stage { padding: 0; }
  .masthead h1 { color: #000; text-shadow: none; font-size: 20px; }
  .layout { padding: 10px 0; max-width: 100%; }
  .post__head, .post__date, .post__tags { color: #000; }
  .post__rule { border-color: #000; }
  .post__title { color: #000; }
  .post__body a { color: #000; }
  .post__body strong { color: #000; }
  .post__body code { color: #000; background: none; }
  .post__body pre { color: #000; background: #fff; border-color: #999; }
  .post__body h2, .post__body h3, .post__body h4 { color: #000; }
  .post__body h2::before, .post__body h3::before, .post__body h4::before { color: #000; }
  .post__body blockquote { border-color: #000; color: #000; opacity: 1; }
  .post__body ul li::before { color: #000; }
  .post__body ol li::marker { color: #000; }
  .post__body hr { color: #000; }
  .post__body img { border-color: #000; box-shadow: none; }
  .post__body figcaption { color: #333; }
  .post__body th { color: #000; border-bottom-color: #000; }
  .post__body th, .post__body td { border-color: #666; }
  .post__foot { border-color: #000; }
}