/* (R)Evolution about page. Builds on articles.css: the contents header, the toner edge, the pixel rules. */

.about {
  --col: clamp(140px, 22vw, 340px);
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(48px, 7vw, 96px) var(--pad) 0;
  align-items: start;
}

.about__photo { margin: 0; position: sticky; top: 16px; }
.about__frame { border: 2px solid var(--ink); background: var(--paper); }
.about__frame img, .about__frame canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
/* the dithered canvas gets an inline pixel width from articles.js; keep it in the column */
.about__frame canvas { max-width: 100%; }
.about__photo figcaption {
  margin-top: 0.6em;
  font-variation-settings: "wdth" 118;
  font-size: 0.875rem;
}

.about__text { min-width: 0; max-width: 62ch; }

.about__h {
  margin: 0;
  font-variation-settings: "wdth" 50;
  font-weight: 900;
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  line-height: 0.85;
  letter-spacing: -0.012em;
}
.about__n {
  display: block;
  margin-bottom: 0.2em;
  font-size: 0.3em;
  letter-spacing: 0;
  line-height: 1;
}

.about__role {
  margin: 0.7em 0 0;
  font-variation-settings: "wdth" 150;
  font-weight: 330;
  font-size: clamp(1.125rem, 1.9vw, 1.75rem);
  line-height: 1.15;
}

.about__prose, .mansus__prose {
  font-variation-settings: "wdth" 102;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.62;
}
.about__prose { margin-top: 1.4em; }
.about__prose p, .mansus__prose p { margin: 0 0 1em; }

.about__sub {
  margin: 2.2em 0 0.6em;
  padding-top: 0.5em;
  border-top: 3px solid var(--ink);
  font-variation-settings: "wdth" 50;
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
}

.career { list-style: none; margin: 0; padding: 0; }
.career li {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  column-gap: 16px;
  padding: 0.8em 0;
  background: var(--sparse) 0 0 / 4px 4px repeat-x;
  line-height: 1.45;
}
.career li:first-child { background: none; padding-top: 0; }
.career__when { font-variation-settings: "wdth" 118; font-weight: 800; font-variant-numeric: tabular-nums; }
.career__what b { display: block; font-weight: 800; }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 0.25em 0.7em;
  border: 2px solid var(--ink);
  font-variation-settings: "wdth" 118;
  font-weight: 640;
  font-size: 0.9375rem;
}
.about__langs { margin: 1.1em 0 0; line-height: 1.5; }
.about__langs b { margin-right: 0.6em; font-weight: 800; }

/* ---------- projects ---------- */

.projects { padding: clamp(72px, 10vw, 140px) var(--pad) 0; }
.proj { list-style: none; margin: 0.6em 0 0; padding: 0; border-top: 4px solid var(--ink); }
.proj__row {
  display: grid;
  grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  padding: 14px 0;
  border-bottom: 2px solid var(--ink);
  align-items: baseline;
}
.proj__name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
}
.proj__desc { margin: 0; max-width: 62ch; line-height: 1.5; }
.proj__more { display: block; margin-top: 0.3em; font-variation-settings: "wdth" 118; font-size: 0.9375rem; }
.proj__more a { display: inline-block; min-height: 24px; }

.about__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 28px 0 0;
  font-variation-settings: "wdth" 125;
  font-weight: 700;
  font-size: 1.125rem;
}
.about__links a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* ---------- Mansus: the inked cut-out ---------- */

.mansus { padding: clamp(72px, 10vw, 140px) var(--pad) 0; }
.mansus__sheet {
  padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 72px) clamp(32px, 5vw, 72px);
  background: var(--ink);
  color: var(--paper);
  rotate: -0.4deg;
}
.mansus__sheet :focus-visible { outline-color: var(--paper); }
.mansus__quote {
  margin: 0.7em 0 1em;
  padding: 0;
  max-width: 16ch;
  font-variation-settings: "wdth" 150;
  font-weight: 330;
  font-size: clamp(1.75rem, 4.2vw, 4rem);
  line-height: 1.05;
  text-wrap: balance;
}
.mansus__quote p { margin: 0; }
.mansus__prose { max-width: 56ch; }

.about-foot { padding-left: 0; }

@media (max-width: 760px) {
  .about { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .about__photo { position: static; max-width: 280px; }
  .career li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .proj__row { grid-template-columns: minmax(0, 1fr); }
  .proj__name { min-height: 44px; }
  .mansus__sheet { rotate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mansus__sheet { rotate: none; }
}