/* Black and white, like the email and trellace.com. */
html, body { margin: 0; background: #000000; color: #FFFFFF; }
body { font-family: Inter, Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #FFFFFF; }

.site { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; box-sizing: border-box; }

.card { width: 100%; max-width: 560px; border: 1px solid #5B5B5C; border-radius: 6px; padding: 48px 32px; box-sizing: border-box; }
.title { margin: 0; font-weight: 400; font-size: 47px; line-height: 1.08; letter-spacing: -1.6px; }
.byline { margin: 14px 0 0; font-size: 20px; line-height: 20px; color: #A8A8A8; }
.lead { margin: 32px 0 0; font-size: 18px; line-height: 1.6; color: #C4C4C4; }
.button { display: inline-block; margin-top: 28px; padding: 10px 16px; border-radius: 6px; background: #FFFFFF; color: #000000; font-size: 14px; line-height: 18px; text-decoration: none; }

.post { width: 100%; max-width: 640px; }
.back { display: inline-block; margin-bottom: 24px; font-size: 13px; color: #A8A8A8; }
.post-content { overflow-x: auto; }
.post-content img { max-width: 100%; height: auto; }

/* Ghost's editor cards, which every theme must size. */
.kg-width-wide { width: 100%; }
.kg-width-full { width: 100%; }

@media (max-width: 480px) {
    .card { padding: 40px 20px; }
    .title { font-size: 36px; }
}