/* Home page — index.html */

.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
  display: grid;
  gap: 1.75rem;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink);
}

.hero__name {
  max-width: 16ch;
}

.hero__statement {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  max-width: 46ch;
}
.hero__statement span { color: var(--muted); }

/* ---------- Intro ---------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; }
}

/* ---------- What I do ---------- */

.focus-list { border-top: 1px solid var(--line); }

.focus-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
  .focus-item { grid-template-columns: 2.5rem 1fr; row-gap: 0.5rem; }
  .focus-item__desc { grid-column: 2 / -1; }
}

.focus-item__index { font-family: var(--font-mono); color: var(--muted); font-size: var(--step--1); }
.focus-item__title { font-family: var(--font-display); font-size: var(--step-2); }
.focus-item__desc { color: var(--muted); max-width: 42ch; }

/* ---------- CTA / transition to portfolio ---------- */

.cta-block {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-block h2 { max-width: 20ch; margin-inline: auto; }
.cta-block .link-arrow { margin-top: 2rem; justify-content: center; }
.cta-block__row { display: flex; justify-content: center; }