/* Page layout: masthead, ledger, bands, work list, model, record. */

.wrap {
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--s4);
}

@media (min-width: 880px) {
  .wrap {
    padding-inline: var(--s7);
  }
}

/* Top bar */

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule-strong);
}

.topbar nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  align-items: center;
}

.topbar a {
  display: inline-block;
  padding-block: var(--s3);
  text-decoration: none;
}

.topbar a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .topbar nav,
  .topbar nav ul {
    width: 100%;
  }

  .topbar nav ul {
    gap: var(--s2) var(--s3);
  }

  .topbar .button {
    padding-inline: var(--s3);
    white-space: nowrap;
  }
}

/* Masthead. The name is set far above the 56px type scale on purpose. */

.masthead {
  padding-block: var(--s5) 0;
}

.about {
  padding-block: var(--s6) var(--s8);
  border-top: 1px solid var(--rule-strong);
}

.name {
  font-size: clamp(3.5rem, 14.6vw, 13.5rem); /* unslop-ignore: poster-size name, the one break of the type scale */
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  margin-left: -0.04em;
  cursor: default;
}

:root[data-theme="terminal"] .name {
  font-size: clamp(2.5rem, 11.4vw, 10.5rem); /* unslop-ignore: poster-size name */
  letter-spacing: -0.05em;
}

.masthead-grid {
  display: grid;
  gap: var(--s6);
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--t24);
  line-height: 1.25;
  max-width: 30em;
}

.lede + p {
  margin-top: var(--s4);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-content: start;
}

.contact-links .button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

@media (min-width: 880px) {
  .masthead-grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--s9);
  }

  .contact-links {
    justify-content: end;
  }

  .lede {
    font-size: var(--t32);
  }
}

/* Contribution ledger */

.ledger {
  padding-block: 0 var(--s6);
}

.ledger-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  justify-content: space-between;
  margin-block: var(--s3);
}

.ledger-read {
  min-height: 3em;
  margin-top: var(--s4);
}

/* Bands: a label column on the left, content on the right. */

.band {
  display: grid;
  gap: var(--s5);
  padding-block: var(--s6) var(--s9);
  border-top: 1px solid var(--rule-strong);
}

.band > h2 {
  font-family: var(--font-mono);
  font-size: var(--t14);
  font-weight: 500;
}

.band > h2 span:first-child {
  color: var(--accent);
  margin-right: var(--s3);
}

.band-body > * + * {
  margin-top: var(--s5);
}

.statement {
  font-family: var(--font-serif);
  font-size: var(--t24);
  line-height: 1.25;
  max-width: 34em;
}

@media (min-width: 880px) {
  .band {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--s7);
  }

  .statement {
    font-size: var(--t32);
  }
}

/* Work list */

.work > li {
  position: relative;
  display: grid;
  gap: var(--s2) var(--s6);
  padding: var(--s5) var(--s2);
  border-top: 1px solid var(--rule);
}

.work > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.work > li:hover {
  background: var(--paper-2);
}

.work h3 {
  font-size: var(--t32);
}

.work h3 a {
  text-decoration: none;
}

.work h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.work > li:hover h3 a {
  color: var(--accent);
  text-decoration: underline;
}

.work .n {
  color: var(--accent);
}

.work dl {
  display: grid;
  gap: var(--s1);
  align-content: start;
  color: var(--ink-2);
}

@media (min-width: 880px) {
  .work > li {
    grid-template-columns: 48px minmax(0, 1fr) 260px;
  }

  .work h3 {
    font-size: var(--t40);
  }

  .work h3 + p {
    margin-top: var(--s3);
  }
}