@font-face {
  font-family: Fraunces;
  src: url("/deferred-skill-catalog/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/deferred-skill-catalog/assets/fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/deferred-skill-catalog/assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--color-surface);
  color: var(--color-ink);
}
body {
  margin: 0;
  font-family: var(--type-sans-family);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--color-accent-hover);
}
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 5px;
}
.frame {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-5);
  padding-block: var(--s-5);
}
.wordmark {
  font-family: var(--type-display-family);
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: none;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  font-size: var(--fs-meta);
}
.site-header nav a {
  text-decoration: none;
}
.skip-link {
  position: absolute;
  transform: translateY(-200%);
  background: var(--color-surface);
  padding: var(--s-4);
  z-index: 1;
}
.skip-link:focus {
  transform: translateY(0);
}
.intro {
  padding-block: var(--s-9);
}
.intro h1 {
  margin-block: var(--s-7);
  font-family: var(--type-display-family);
  font-size: clamp(3.25rem, 8vw, 7.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: var(--tracking-cover);
}
.intro .t-lead {
  max-width: 49ch;
  margin-bottom: var(--s-6);
}
.btn-arrow {
  display: inline-block;
  font-size: var(--fs-meta);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-block: var(--s-2);
}
.btn-arrow::after {
  content: " →";
}
.index-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--color-rule);
}
.projects {
  padding: 0;
  margin: var(--s-6) 0 0;
  list-style: none;
}
.projects li {
  display: grid;
  grid-template-columns: 3rem 1fr 8rem;
  gap: var(--s-6);
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--color-rule);
}
.folio {
  padding-top: var(--s-2);
}
.project-copy h3 {
  margin: 0 0 var(--s-3);
  font: 500 var(--fs-headline-md)/1.18 var(--type-display-family);
  letter-spacing: var(--tracking-tight);
}
.project-copy h3 a {
  text-decoration: none;
}
.project-copy h3 a span {
  font-size: 0.65em;
}
.project-copy p {
  max-width: 60ch;
  margin: 0;
  color: var(--color-ink-soft);
}
.project-date {
  margin: var(--s-2) 0 0;
}
.project-date time {
  display: block;
  margin-top: var(--s-3);
}
.site-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-5);
  padding-block: var(--s-7);
  margin-top: var(--s-9);
}
.site-footer div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  font-size: var(--fs-meta);
}
.site-footer p {
  line-height: 1.8;
}
.not-found {
  padding-block: var(--s-9);
}
.not-found h1 {
  font: 400 var(--fs-headline-lg)/1.1 var(--type-display-family);
}
@media (max-width: 640px) {
  .intro {
    padding-block: var(--s-8);
  }
  .projects li {
    grid-template-columns: 2rem 1fr;
    gap: var(--s-4);
  }
  .project-date {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-4);
  }
  .project-date time {
    margin: 0;
  }
  .site-header nav {
    gap: var(--s-4);
  }
  .site-footer {
    margin-top: var(--s-8);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Project microsite additions — appended to the collection hub's site.css.
   Everything above this line is the hub's file, copied unchanged. These
   rules cover what a project page needs and the hub's two pages don't:
   prose sections, code, tables, and the harness blocks inside a step.
   All values come from tokens.css; no new colors, no new rules weight.
   ══════════════════════════════════════════════════════════════════════ */

.intro--compact {
  padding-block: var(--s-8) var(--s-6);
}
.intro--compact h1 {
  margin-block: var(--s-6) var(--s-5);
  font-size: clamp(2.75rem, 6vw, 5rem);
}
.guide-source {
  max-width: 62ch;
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-rule);
}

.page-section {
  padding-block: var(--s-7);
}
.page-section .index-head {
  margin-bottom: var(--s-5);
}

.prose {
  max-width: 68ch;
}
.prose > * + * {
  margin-top: var(--s-4);
}
.prose p {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
}
.prose h3 {
  margin: 0;
}
.prose em {
  font-style: italic;
}
.prose code,
.prose pre code {
  font-family: var(--type-mono-family);
}
.prose p code,
.prose li code,
td code,
th code,
dd code {
  font-size: 0.9em;
  padding: 0.1em 0.32em;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-rule);
  overflow-wrap: anywhere;
}
.prose pre {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  overflow-x: auto;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-rule);
  font-size: var(--fs-code);
  line-height: 1.6;
}
.prose pre code {
  font-size: inherit;
  padding: 0;
  background: none;
  border: 0;
  /* Wrap rather than scroll: no unfocusable scroll region, no 320px overflow. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.facts {
  margin: 0;
  border-top: 1px solid var(--color-rule);
}
.fact {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--color-rule);
}
.fact dt {
  font-family: var(--type-mono-family);
  font-size: var(--fs-code);
  padding-top: 0.15em;
}
.fact dd {
  margin: 0;
  color: var(--color-ink-soft);
}

.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
}
.link-list li {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--color-rule);
}
.link-list a {
  font-family: var(--type-display-family);
  font-size: var(--fs-headline-sm);
  font-weight: 500;
  text-decoration: none;
}
.link-list p {
  max-width: 62ch;
  margin: var(--s-2) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--fs-body-md);
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin-block: var(--s-5);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-md);
  text-align: left;
}
table caption {
  padding-bottom: var(--s-3);
  text-align: left;
}
table th,
table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}
table thead th {
  font-family: var(--type-sans-family);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--color-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
table tbody th {
  font-weight: 600;
}
table tbody td {
  color: var(--color-ink-soft);
}

.harness {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--color-ink);
}
.harness__title {
  margin: 0 0 var(--s-4);
  font: 500 var(--fs-headline-sm)/1.3 var(--type-display-family);
  letter-spacing: var(--tracking-tight);
}
.harness .prose {
  max-width: 66ch;
}

@media (max-width: 640px) {
  .fact {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .assembly__step {
    padding-left: 44px;
  }
}