@font-face { font-family: "Pixel"; src: url("/fonts/pixel.woff") format("woff"); font-display: swap; }
:root { --ink: #09090a; --paper: #e8e4d8; --dim: #a9a597; --red: #8b1a1a; --line: #3a3833; }
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); }
body { margin: 0; font: 17px/1.75 system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "Noto Sans JP", "Microsoft JhengHei", "Yu Gothic UI", sans-serif; }
a { color: var(--paper); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header { border-bottom: 1px solid var(--line); }
.head { display: flex; align-items: center; gap: 14px; padding: 18px 0 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.brand .badge { width: 96px; height: 96px; }
.brand .logo { width: 336px; height: 92px; }
nav.lang { margin-left: auto; font: 16px "Pixel", monospace; display: flex; gap: 12px; }
nav.lang a { text-decoration: none; color: var(--dim); }
nav.lang a[aria-current] { color: var(--paper); border-bottom: 2px solid var(--red); }
.tagline { color: var(--dim); font-size: 14px; padding-bottom: 12px; margin: 0; }
.social { border-bottom: 1px solid var(--line); background: #121211; }
.social .wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.social .label { font: 15px "Pixel", monospace; color: var(--dim); margin-right: 4px; }
.social a.btn { font: 16px "Pixel", monospace; text-decoration: none; border: 1px solid var(--paper); padding: 6px 12px; }
.social a.btn:hover { background: var(--paper); color: var(--ink); }
.social a.fanbox { background: var(--red); border-color: var(--red); }
.social .support { flex-basis: 100%; font-size: 14px; color: var(--dim); margin: 2px 0 0; }
.social .support a { color: var(--paper); }
h1, h2, .pixel { font-family: "Pixel", monospace; font-weight: normal; letter-spacing: .02em; }
h1 { font-size: 28px; line-height: 1.4; margin: 36px 0 8px; }
h2 { font-size: 20px; margin: 32px 0 8px; }
.date { color: var(--dim); font: 14px "Pixel", monospace; }
.list { list-style: none; padding: 0; margin: 24px 0; }
.list li { border: 1px solid var(--line); margin: 0 0 18px; }
.list a.card { display: grid; grid-template-columns: 213px 1fr; gap: 16px; padding: 12px; text-decoration: none; }
.list img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; background: #000; }
.list h2 { margin: 2px 0 4px; font-size: 18px; }
.list p { margin: 0; color: var(--dim); font-size: 15px; }
.list li.pinned { border-color: var(--red); }
.tag { display: inline-block; background: var(--red); color: var(--paper); font: 13px "Pixel", monospace; padding: 2px 8px; }
article p, article li { color: var(--paper); }
article table { border-collapse: collapse; width: 100%; margin: 12px 0 8px; font-size: 15px; }
article th, article td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
article th { color: var(--dim); font-weight: normal; }
.video { position: relative; aspect-ratio: 16/9; margin: 20px 0; background: #000; }
.video.short { aspect-ratio: 9/16; max-width: 340px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.back { display: inline-block; margin: 28px 0 0; font: 15px "Pixel", monospace; text-decoration: none; color: var(--dim); }
footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 20px 0 40px; color: var(--dim); font-size: 14px; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font-family: "Pixel", monospace; }
@media (max-width: 560px) {
  .brand .badge { display: none; }
  nav.lang { margin-left: 0; width: 100%; }
  .list a.card { grid-template-columns: 1fr; }
  h1 { font-size: 23px; }
}