:root { --fg:#373737; --muted:#777; --link:#1982d1; --rule:#ddd; }
* { box-sizing: border-box; }
body { margin:0; background:#e2e2e2; color:var(--fg); font:15px/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif; }
#page { max-width:1000px; margin:2em auto; background:#fff; box-shadow:0 2px 3px #bbb; }
#branding { padding:1.5em 2em 0; }
#branding h1 { margin:0; font-size:2em; font-weight:normal; }
#branding h1 a { color:var(--fg); text-decoration:none; }
#branding h2 { margin:.2em 0 1em; font-size:1em; font-weight:normal; color:var(--muted); }
.banner { display:block; width:calc(100% + 4em); margin:0 -2em; height:auto; }
nav { border-bottom:1px solid var(--rule); padding:.6em 2em; margin:0 -2em; font:14px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif; }
nav a { margin-right:1.2em; color:var(--fg); text-decoration:none; }
nav a:hover { color:var(--link); }
main { padding:1.5em 2em; max-width:760px; }
a { color:var(--link); }
.entry-title, .summary h2 { font-weight:normal; line-height:1.25; margin:.4em 0 .2em; }
.summary h2 a { color:var(--fg); text-decoration:none; }
.meta { color:var(--muted); font:13px "Helvetica Neue",Helvetica,Arial,sans-serif; margin:0 0 1em; }
.entry-content img { max-width:100%; height:auto; }
.entry-content pre { overflow:auto; background:#f6f6f6; padding:.8em; font-size:13px; }
figure { margin:1em 0; } figcaption { color:var(--muted); font-size:13px; }
.summary { border-bottom:1px solid var(--rule); padding-bottom:1em; margin-bottom:1.5em; }
.comments { border-top:1px solid var(--rule); margin-top:2em; }
.comment { border-bottom:1px dotted var(--rule); padding:.5em 0; }
.comment .who { margin:0; font:13px "Helvetica Neue",Helvetica,Arial,sans-serif; } .comment .who time { color:var(--muted); margin-left:.5em; }
footer { border-top:1px solid var(--rule); padding:1em 2em; color:var(--muted); font:13px "Helvetica Neue",Helvetica,Arial,sans-serif; }
@media (max-width:700px){ #page{margin:0} }