/* Hero: name, one-line positioning statement, the link row, and the portrait.
   The portrait shares its top edge with the name so the right column starts on
   the same line as the left one, continuing the rule under the top bar. */

.hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

/* Sized to sit under the top bar rather than shout over it — the emphasis is
   carried by the serif, the weight and the accent surname, not by scale. */
h1.name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 1.5rem;
  font-variation-settings: "opsz" 144;
}
h1.name .surname {
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}

/* Sans against the serif name, and emphasis by weight rather than colour — the accent
   stays a single moment in the hero (the surname). Mirrors `.about-prose strong`. */
.hero-tag {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 2rem;
}
.hero-tag strong { color: var(--ink); font-weight: 500; }

/* One row for every way to reach the work: the CV button leads, the profile
   links follow. `center` keeps the button's box optically level with the
   plain-text links beside it. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.hero-meta a { display: inline-flex; align-items: center; gap: .45rem; }
.hero-meta a:hover { color: var(--ink); }
.hero-meta svg { width: 13px; height: 13px; opacity: .7; }

/* Outlined sibling of `.cta` — same mono/uppercase language, less weight, so the
   filled "Email me" button in the footer stays the single loudest action. Its
   padding is tuned so the row's baseline of text links reads as one line. */
.cv-btn {
  padding: .55rem 1rem;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.hero-meta a.cv-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--paper);
  transform: translateY(-2px);
}
.hero-meta .cv-btn svg { width: 14px; height: 14px; opacity: 1; transition: transform .25s ease; }
.hero-meta a.cv-btn:hover svg { transform: translateY(2px); }

.portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 448px;
  /* Optical nudge: drops the top edge to the name's cap height, since the
     h1's line box starts a shade above the glyphs. */
  margin: .35rem 0 0 auto;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow);
  border-radius: 20%;
}
.portrait::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 60%, rgba(181,74,37,.08) 100%);
  pointer-events: none;
}
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(20%) contrast(1.02);
}
/* Shown by the <img>'s onerror handler when the portrait file is missing. */
.portrait .ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .75rem;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.portrait .ph svg { width: 56px; height: 56px; opacity: .35; }

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Stacked: the portrait is no longer a column, so it centres and shrinks. */
  .portrait { max-width: 180px; margin: 0 auto; }
  .hero-meta { gap: .75rem 1.25rem; }
}