:root {
  --paper:   #faf9f7;
  --cement:  #ecebe7;
  --ink:     #1c1c1a;
  --muted:   #5f5e59;
  --faint:   #96958f;
  --rule:    #dcdad4;
  --measure: 43rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */

.site-header { border-bottom: 1px solid var(--rule); }

.site-header .bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.25rem 1.5rem;
}

.site-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}

.site-title:hover { color: var(--muted); }

/* ---------- layout ---------- */

main {
  max-width: var(--measure);
  margin: 3rem auto 5rem;
  padding: 0 1.25rem;
}

/* ---------- prose ---------- */

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.018em;
}

h1 { font-size: 2rem;    font-weight: 600; margin: 0 0 .5rem; }
h2 { font-size: 1.4rem;  font-weight: 600; margin: 2.75rem 0 .85rem; }
h3 { font-size: 1.15rem; font-weight: 600; margin: 2.25rem 0 .7rem; }

p, ul, ol, blockquote { margin: 0 0 1.35rem; }

li { margin-bottom: .45rem; }
li > ul, li > ol { margin-top: .45rem; }

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

a:hover { color: var(--muted); border-bottom-color: var(--muted); }

blockquote {
  border-left: 2px solid var(--rule);
  padding-left: 1.15rem;
  margin-left: 0;
  color: var(--muted);
}

hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---------- post meta ---------- */

.post-meta {
  color: var(--faint);
  font-size: .9rem;
  margin-bottom: 2.25rem;
}

/* ---------- listing ---------- */

.intro {
  margin-bottom: 3.5rem;
}

.listing { list-style: none; margin: 0; padding: 0; }

.listing li {
  position: relative;
  padding: 1.25rem;
  margin: 0 -1.25rem 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.listing li:hover {
  background: #fff;
  border-color: var(--rule);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.05);
}

.listing li:last-child { margin-bottom: 0; }

.listing .preview {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.listing .preview-link { border: none; }

.listing .title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border: none;
  line-height: 1.35;
}

.listing .title:hover { color: var(--muted); }

/* Stretch the title link over the whole card so the entire box is clickable,
   not just the text. Real links inside the card (e.g. the preview image) sit
   above it via their own stacking context. */
.listing .title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
}

.listing .preview-link { position: relative; z-index: 1; }

.listing li:hover .title { color: var(--muted); }

.listing .date { display: block; font-size: .85rem; color: var(--faint); margin-top: .2rem; }

.listing .summary { margin: .55rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* ---------- figures & media ---------- */

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 2px;
}

/* ---------- code ---------- */

code, pre, kbd {
  font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .875em;
}

code {
  background: var(--cement);
  padding: .12em .35em;
  border-radius: 2px;
}

pre {
  background: var(--cement);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

pre code { background: none; padding: 0; }

/* ---------- tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: .95rem;
  line-height: 1.5;
}

th {
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  padding: .5rem .75rem;
}

td { padding: .5rem .75rem; border-bottom: 1px solid rgba(0,0,0,.05); vertical-align: top; }
tr:last-child td { border-bottom: none; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child,  td:last-child  { padding-right: 0; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  main { margin: 2rem auto 3rem; }
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.25rem; }
  .site-header .bar { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ---------- rust playground ---------- */

.playground { margin: 0 0 1.75rem; }

.playground pre { margin-bottom: 0; border-radius: 3px 3px 0 0; }

.playground-note { color: var(--faint); }

.playground-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .45rem .75rem;
  background: var(--cement);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: .8rem;
}

.playground-run {
  font: inherit;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: .2rem .8rem;
  cursor: pointer;
}

.playground-run:hover:not(:disabled) { background: var(--muted); border-color: var(--muted); }
.playground-run:disabled { opacity: .55; cursor: default; }

.playground-output {
  margin: .6rem 0 0;
  padding: .75rem 1rem;
  background: var(--cement);
  border: 1px solid var(--rule);
  border-radius: 3px;
  white-space: pre-wrap;
  color: var(--muted);
}

.playground-output.is-error { color: #8a2020; }