.dev-hero {
  display: grid;
  min-block-size: clamp(38rem, 78dvh, 48rem);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-xl) var(--space-2xl);
  border-block-end: var(--rule-strong) solid var(--color-ink);
}

.dev-hero__copy {
  display: grid;
  gap: var(--space-lg);
}

.dev-hero__identity,
.dev-section-nav,
.section-heading--numbered > span,
.dev-contact > p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.dev-hero__identity {
  color: var(--color-accent);
}

.dev-hero h1 {
  max-inline-size: 10em;
}

.dev-hero__lede {
  max-inline-size: 45ch;
  font-size: var(--text-lg);
  line-height: 1.55;
}

.dev-hero__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-xl);
}

.dev-hero__links a {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  color: var(--color-accent);
  font-weight: 700;
  white-space: nowrap;
}

.dev-portrait {
  display: grid;
}

.dev-portrait__frame {
  position: relative;
  inline-size: min(100%, 16rem);
  justify-self: end;
  overflow: hidden;
  border-block-end: var(--rule-strong) solid var(--color-accent);
  background: var(--color-paper-3);
}

.dev-portrait img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
}

.dev-editorial {
  display: grid;
}

.dev-section-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
  row-gap: 0;
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hairline) solid var(--color-rule);
}

.dev-section-nav__label {
  inline-size: 100%;
  margin-block-end: var(--space-xs);
  color: var(--color-accent);
}

.dev-section-nav a {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.dev-editorial__body {
  min-inline-size: 0;
}

.section-heading--numbered {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.section-heading--numbered > span {
  color: var(--color-accent);
}

.section-heading--numbered > p,
.section-heading--numbered > a {
  grid-column: auto;
}

.section-heading--numbered > p {
  max-inline-size: 44ch;
  color: var(--color-muted);
}

.dev-about__copy {
  display: grid;
  max-inline-size: var(--measure);
  gap: var(--space-lg);
  font-size: var(--text-md);
  line-height: 1.75;
}

.dev-about__note {
  display: grid;
  max-inline-size: var(--measure);
  gap: var(--space-xs);
  margin-block-start: var(--space-2xl);
  padding: var(--space-lg) 0 var(--space-lg) var(--space-lg);
  border-inline-start: var(--rule-strong) solid var(--color-accent);
}

.dev-about__note p {
  color: var(--color-muted);
}

.skill-ledger {
  border-block-end: var(--rule-hairline) solid var(--color-rule);
}

.skill-ledger > div {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hairline) solid var(--color-rule);
}

.skill-ledger dt {
  font-size: var(--text-lg);
  font-weight: 800;
}

.skill-ledger dd {
  display: grid;
  gap: var(--space-md);
}

.skill-ledger dd > p {
  max-inline-size: 48ch;
  color: var(--color-muted);
}

.skill-ledger ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill-ledger li {
  position: relative;
  padding-inline-start: var(--space-sm);
  font-weight: 700;
}

.skill-ledger li::before {
  position: absolute;
  inset-block-start: 0.73em;
  inset-inline-start: 0;
  inline-size: var(--space-2xs);
  block-size: var(--space-2xs);
  background: var(--color-accent);
  content: "";
}

.experience-list {
  margin: 0;
  padding: 0;
  border-block-end: var(--rule-hairline) solid var(--color-rule);
  list-style: none;
}

.experience-list > li {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hairline) solid var(--color-rule);
}

.experience-list__period,
.experience-list__role {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.experience-list__main {
  display: grid;
  gap: var(--space-sm);
}

.experience-list__main ul {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  padding-inline-start: var(--space-lg);
}