:root{
  --content-width:760px;
  --accent:#0f1724;
  --muted:#6b7280;
  --text:#111827;
  --bg:#ffffff;
  --lead:#374151;
  --hr:#e6e6e6;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Serif", "Liberation Serif", Georgia, serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.72;
  font-size:17px;
}

/* Page container */
.site{
  display:flex;
  justify-content:center;
  padding:48px 20px;
}

.article {
  max-width:var(--content-width);
  width:100%;
  background: #fff;
  padding:48px 36px;
}

/* Header */
header.article-header{
  margin-bottom:22px;
}
.kicker{
  display:inline-block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
h1.article-title{
  margin:0 0 12px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:36px;
  line-height:1.08;
  color:var(--accent);
}
p.lead {
  margin:0;
  color:var(--lead);
  font-style:normal;
  font-size:18px;
}

/* meta block */
.meta{
  margin-top:18px;
  margin-bottom:28px;
  color:var(--muted);
  font-size:14px;
}

/* Content */
.content > * { /* spacing between blocks */
  margin-top:1.15rem;
  margin-bottom:1.15rem;
}
.content p{
  margin:0 0 1.1rem 0;
  font-size:17px;
  color:var(--text);
}

h2, h3, h4{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--accent);
  margin:1.6rem 0 0.6rem 0;
  line-height:1.25;
}
h2{font-size:20px}
h3{font-size:16px}
h4{font-size:14px}

/* Emphasis styles */
strong{font-weight:700}
em{font-style:italic; color:var(--muted)}

blockquote{
  border-left:4px solid #eaeaea;
  padding:12px 16px;
  color:var(--muted);
  background:#fafafa;
  margin:0;
}

/* Table */
table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  margin:1rem 0;
}
thead th{
  text-align:left;
  font-weight:700;
  padding:10px 12px;
  background:#fafafa;
  border:1px solid var(--hr);
}
tbody td{
  padding:10px 12px;
  border:1px solid var(--hr);
}

/* Reference list */
.refs { font-size:14px; color:var(--muted); padding-left:1rem }
.refs li{ margin:0.45rem 0; }

hr.sep{
  border:0;
  height:1px;
  background:var(--hr);
  margin:2rem 0;
}

/* Small screens */
@media (max-width:820px){
  .article{ padding:32px 18px; }
  h1.article-title{ font-size:26px; }
  body{ font-size:16px; line-height:1.7 }
}
@media (max-width:420px){
  .article{ padding:24px 14px; }
  h1.article-title{ font-size:22px; }
  :root{ --content-width:100%;}
}

/* Small utilities */
.muted { color:var(--muted); font-size:14px }
.italic { font-style:italic }
.table-caption { font-weight:600; margin-bottom:8px }
.footnotes { font-size:13px; color:var(--muted) }

.non-list { list-style: none; margin: 0; padding: 0; }
ul.non-list li {
  position: relative;
  margin-bottom: 0.8em;
  /*padding-left: 1.25rem;*/
}