/* mkrutzler.com: Markdown pages (built by ~/server/src/build-site.py) laid out as a drawing sheet. Colours, fonts, the paper grid and the
   corner ticks come from sketch.css (shared with the *.mkrutzler.com apps, linked first). */
* { box-sizing: border-box; }
body { margin: 0; padding: 48px 16px; font-size: 1.05rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
#content {
  max-width: 44rem; margin: 0 auto; padding: 40px 48px 48px;
  background-color: var(--surface); border: 1px solid var(--border-strong);
}
@media (max-width: 600px) {
  body { padding: 16px 12px; }
  #content { padding: 28px 20px 32px; }
}

/* title block */
#content > header { margin: -40px -48px 32px; padding: 28px 48px 20px; border-bottom: 1px solid var(--border-strong); }
@media (max-width: 600px) { #content > header { margin: -28px -20px 24px; padding: 22px 20px 16px; } }
h1.title { margin: 0; font-size: 2rem; font-weight: 400; letter-spacing: .01em; line-height: 1.2; }
h1.title::before {
  content: "mkrutzler.com"; display: block; margin-bottom: 10px;
  font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent-ink);
}
.subtitle { margin: 6px 0 0; color: var(--muted); }

/* headings lettered like drawing annotations, with a ruled line */
h2, h3, h4 { font-weight: 500; line-height: 1.3; }
h2 {
  margin: 2.4rem 0 1rem; padding-bottom: 6px; border-bottom: 1px solid var(--border-strong);
  font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}
h3 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; }
h4 { font-size: 1rem; margin: 1.4rem 0 .4rem; }

a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { background: var(--accent-soft); }
:focus-visible { outline: 1.5px solid var(--accent-ink); outline-offset: 2px; }
strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--border-strong); margin: 2rem 0; }
blockquote { margin: 1.2rem 0; padding: 4px 16px; border-left: 2px solid var(--accent); background: var(--accent-soft); }
ul, ol { padding-left: 1.4rem; }
li::marker { color: var(--accent-ink); }
img { max-width: 100%; height: auto; border: 1px solid var(--border); }
figure { margin: 1.6rem 0; }
figcaption { font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

pre, code, kbd, samp { font-family: var(--mono); font-size: .88em; }
code { padding: 1px 4px; background: var(--surface-2); border: 1px solid var(--border); }
pre { overflow-x: auto; padding: 12px 14px; line-height: 1.5; background: var(--bg); border: 1px solid var(--border-strong); }
pre code { padding: 0; border: 0; background: none; }

table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: .95em; }
th, td { padding: 6px 10px; border: 1px solid var(--border-strong); text-align: left; }
th { font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--surface-2); }
caption { caption-side: bottom; padding-top: 6px; text-align: left; }

/* footnotes (Markdown [^1]) */
.footnote { margin-top: 2.4rem; padding-top: .6rem; border-top: 1px solid var(--border-strong); font-size: .9em; color: var(--muted); }
.footnote hr { display: none; }
sup a.footnote-ref { text-decoration: none; }