:root { --red: #a8101f; --ink: #2a2321; --muted: #6d625a; --paper: #fffdf7; --gold: #c99a1e; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 "Karla", "Helvetica Neue", Arial, sans-serif; }
header { background: linear-gradient(180deg, #d01d2f, #8e0c18); color: #fff; padding-block: 28px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
header a { color: #fff; text-decoration: none; font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 600; }
header a em { font-style: normal; color: #ffd54a; }
main { max-width: 68ch; margin: 0 auto; padding-block: 32px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(32px, 6vw, 44px); line-height: 1.1; margin: 0 0 6px; text-wrap: balance; }
h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 22px; margin: 32px 0 6px; }
.meta { color: var(--muted); font-size: 15px; margin: 0 0 24px; }
.draft { background: #fff3c4; border: 1px solid #e6c46a; border-radius: 10px; padding: 12px 16px; font-size: 15px; }
a { color: var(--red); }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
footer { text-align: center; color: var(--muted); font-size: 14px; padding-bottom: 32px; }