/* Penco palette, same tokens as kevinjoo.com */
:root{
  --penco-paper:#F4F1EA;
  --penco-paper-raised:#FAF8F3;
  --penco-border:#DED9CE;
  --penco-ink-primary:#1C1C1C;
  --penco-ink-secondary:#5A5A5A;
  --penco-ink-muted:#8C8C8C;
  --penco-aqua:#1F7F86;
  --penco-teal-cover:#1E6E73;
  --radius:6px;
  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2rem;
  --space-xl:3rem;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background-color:var(--penco-paper);
  color:var(--penco-ink-primary);
  line-height:1.6;
  padding:var(--space-md);
}
.container{max-width:800px;margin:0 auto}

header{
  margin-bottom:var(--space-md);
  padding-bottom:var(--space-sm);
  border-bottom:1px solid var(--penco-border);
  font-weight:500;
}
header a{color:var(--penco-ink-primary)}
header a:hover{color:var(--penco-aqua);text-decoration:none}

h1{font-size:2rem;margin-bottom:var(--space-md);font-weight:600}
h2{font-size:1.25rem;margin-bottom:var(--space-sm);margin-top:var(--space-lg);font-weight:600}
p{margin-bottom:var(--space-sm)}
ul{margin:0 0 var(--space-sm) 1.25rem}
li{margin-bottom:var(--space-xs)}

a{color:var(--penco-teal-cover);text-decoration:none}
a:hover{text-decoration:underline}
/* grow the tap target on very short links without shifting the line */
p a{padding:.3em .4em;margin:-.3em -.4em}
a:focus-visible{outline:2px solid var(--penco-aqua);outline-offset:2px;border-radius:2px}

.updated{color:var(--penco-ink-secondary);font-size:0.875rem;margin-bottom:var(--space-lg)}

footer{
  margin-top:var(--space-xl);
  padding-top:var(--space-sm);
  border-top:1px solid var(--penco-border);
  color:var(--penco-ink-secondary);
  font-size:0.875rem;
}
footer a{color:var(--penco-ink-secondary);text-decoration:underline}
footer a:hover{color:var(--penco-teal-cover)}
footer p{margin-bottom:var(--space-xs)}

/* --- docs ------------------------------------------------------------- */
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.875em;
  background-color:var(--penco-paper-raised);
  border:1px solid var(--penco-border);
  border-radius:3px;
  padding:0.1em 0.35em;
}
pre{
  background-color:var(--penco-paper-raised);
  border:1px solid var(--penco-border);
  border-radius:var(--radius);
  padding:var(--space-sm);
  overflow-x:auto;
  margin-bottom:var(--space-sm);
  font-size:0.875rem;
  line-height:1.5;
}
pre code{background:none;border:0;padding:0;font-size:1em}
table{border-collapse:collapse;width:100%;margin-bottom:var(--space-sm);font-size:0.9375rem}
th,td{text-align:left;padding:0.5rem 1.5rem 0.5rem 0;border-bottom:1px solid var(--penco-border);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
thead th{border-bottom-width:2px}
table em{font-style:italic;color:var(--penco-ink-secondary)}
th{font-weight:600}
td code{white-space:nowrap}
.table-wrap{overflow-x:auto;margin-bottom:var(--space-sm)}
.note{
  border-left:3px solid var(--penco-aqua);
  padding:var(--space-xs) 0 var(--space-xs) var(--space-sm);
  margin-bottom:var(--space-sm);
  color:var(--penco-ink-secondary);
}
h1+p em,h1+p{color:var(--penco-ink-secondary);font-size:0.875rem}
h3{font-size:1rem;font-weight:600;margin-top:var(--space-md);margin-bottom:var(--space-xs)}