/* loustevenshere.com: self-hosted fonts plus the few pieces base.css doesn't cover.
   Colors and type come from base.css tokens (copied from loustevenshere/web-style). */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/fonts/literata-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/fonts/literata-latin-opsz-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/fraunces-latin-full-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/assets/fonts/caveat-latin-500-normal.woff2") format("woff2");
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: var(--space-2);
  z-index: 10;
  transform: translateY(-200%);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.skip-link:focus { transform: none; }

article > .meta { margin: 0 0 var(--space-6); }

.signoff { margin: var(--space-6) 0 0; }

.post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: 15px;
}
.post-actions .btn-quiet { padding-inline: 0; }
.copy-status { color: var(--muted); font-size: 14px; }

.project-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.project-list a { font-family: var(--font-read); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--fg); text-decoration: none; }
.project-list a:hover { color: var(--accent); }
.project-list p { margin: var(--space-1) 0 0; color: var(--muted); max-width: var(--measure); }

.not-found .hand { margin-top: var(--space-3); }