/* Home. Tokens only. */

/* Hero: name, what he does, who he is, portrait, two actions. On a phone
   the portrait leads, full width, and the words follow under it. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "portrait" "text";
  gap: var(--space-6);
  padding-block: var(--space-5) var(--space-6);
}
.hero__text { display: grid; grid-area: text; gap: var(--space-5); }
.hero__eyebrow { color: var(--accent); }
.hero__portrait { grid-area: portrait; width: 100%; max-width: 26rem; margin: 0; }
.hero__portrait .frame { --ratio: 1 / 1; }
.hero__portrait img { object-position: 50% 18%; }

.hero h1 { font-size: var(--step-6); }
.hero__lede {
  max-width: 30ch;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.hero__beyond { max-width: 46ch; font-size: var(--step-0); line-height: var(--leading-snug); color: var(--ink-2); }
.hero__status {
  display: flex;
  gap: var(--space-3);
  max-width: 52ch;
  color: var(--ink-3);
  font-size: var(--step-n1);
  line-height: var(--leading-snug);
}
.hero__dot {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  margin-top: 0.45em;
  border-radius: var(--radius-round);
  background: var(--accent);
  box-shadow: 0 0 0 var(--space-1) var(--accent-tint);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    grid-template-areas: "text portrait";
    align-items: center;
    gap: var(--space-8);
    padding-block: var(--space-8) var(--space-7);
  }
  .hero__text { align-content: center; }
  .hero__portrait { max-width: none; }
  .hero__portrait .frame { --ratio: 4 / 5; }
  .hero__portrait img { object-position: 50% 30%; }
}

/* Four facts in mono: the nerdy footnote under the hero. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: var(--space-5) 0;
  list-style: none;
  border-block: var(--hairline) solid var(--line);
  color: var(--ink-2);
  line-height: var(--leading-snug);
}
.facts__k {
  display: block;
  font-family: var(--font-mono);
  margin-bottom: var(--space-1);
  font-size: var(--step-n2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* A little more */
.about { display: grid; gap: var(--space-7); align-items: center; }
.about h2 { margin-bottom: var(--space-5); font-size: var(--step-3); }
.about__photo { max-width: 24rem; }
.about__photo .frame { --ratio: 4 / 5; }
.about__photo figcaption { margin-top: var(--space-2); color: var(--ink-3); font-size: var(--step-n1); }
@media (min-width: 60rem) {
  .about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); }
}

/* Beyond code: four doors, same ratio, same corners. */
.beyond {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-6) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.beyond__item { display: grid; gap: var(--space-2); color: inherit; text-decoration: none; }
.beyond__item .frame { --ratio: 4 / 5; margin-bottom: var(--space-2); }
.beyond__item .frame img { transition: transform var(--dur-slow) var(--ease); }
.beyond__item:hover .frame img { transform: scale(1.03); }
.beyond__item--math .frame img { object-position: 12% 50%; }
.beyond__title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: var(--leading-tight);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.beyond__item:hover .beyond__title { color: var(--accent); }
.beyond__line { color: var(--ink-3); font-size: var(--step-n1); line-height: var(--leading-snug); }

/* Closing */
.closing { padding-block: var(--space-4) 0; text-align: center; }
.closing .kuba { width: 10rem; margin: 0 auto var(--space-7); }
.closing h2 { margin-bottom: var(--space-4); font-size: var(--step-3); }
.closing p { max-width: 46ch; margin: 0 auto var(--space-4); color: var(--ink-2); }