:root { --void:#0e0c0b; --stone:#1a1714; --edge:#43382c; --gold:#c8a25a; --parch:#e8dcc2; --body:#cbbfa6; --muted:#9a8c76; --blood:#b8352d; }
* { box-sizing: border-box; }
html { background: var(--void); }
body { margin: 0; background: var(--void); color: var(--body); font: 17px/1.6 'Alegreya Sans', Georgia, serif; }
main { max-width: 720px; margin: 0 auto; padding: 40px 16px 64px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
header img { width: 56px; height: 56px; border-radius: 12px; }
.logo { font-family: 'Pirata One', serif; font-size: 40px; color: var(--parch); text-decoration: none; line-height: 1; }
.logo span { color: var(--blood); }
h1, h2 { font-family: 'Pirata One', serif; font-weight: 400; color: var(--parch); line-height: 1.15; }
h1 { font-size: 40px; margin: 0 0 6px; }
h2 { font-size: 26px; margin: 32px 0 6px; }
a { color: var(--gold); }
.date { color: var(--muted); margin-top: 0; }
.panel { background: var(--stone); border: 1px solid var(--edge); border-left: 3px solid var(--blood); border-radius: 4px; padding: 16px 18px; margin: 20px 0; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--edge); }
th { color: var(--parch); }
nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--edge); }
@media (max-width: 520px) { table, tr, td, th, tbody, thead { display: block; } thead { display: none; } td:first-child { color: var(--parch); font-weight: 700; padding-bottom: 0; border: 0; } }