/* Content layout corrections, separate from the mockup typography. */
.portfolio-page .info-layout {
  grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.22fr);
  gap: clamp(48px, 7vw, 112px);
  margin-top: 70px;
}
.portfolio-page .info-photo {
  display: block;
  width: min(100%, 500px);
  height: auto;
  justify-self: center;
  border: 1px solid var(--line);
}
.portfolio-page .info-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; max-width: none; }
.portfolio-page .info-content .email { grid-column: 1; grid-row: 1; }
.portfolio-page .info-content .socials { grid-column: 1 / -1; grid-row: 1; justify-self: start; align-self: start; margin-top: 0; align-items: center; gap: 22px; }
.portfolio-page .info-content .contact-email { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 0 8px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); font: 13px/1 'IBM Plex Mono', 'Courier New', monospace; letter-spacing: .1em; transition: color .18s ease, border-color .18s ease, transform .18s ease; }
.portfolio-page .info-content .contact-email svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.portfolio-page .info-content .contact-email:hover, .portfolio-page .info-content .contact-email:focus-visible { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.portfolio-page .info-content details:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.portfolio-page .info-content details:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.portfolio-page .info-content .social { width: 26px; height: 26px; color: #292a26; cursor: pointer; transition: opacity .2s ease; }
.portfolio-page .info-content .social:hover { opacity: .55; }
.portfolio-page .info-content .social svg { stroke-width: 1.35; }

.portfolio-page .portfolio-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.portfolio-page .portfolio-footer .instagram-link{justify-self:start}
.portfolio-page .portfolio-footer .email-mark{display:grid;place-items:center;justify-self:center;width:38px;height:32px;color:#4d4e49;transition:color .18s ease,transform .18s ease}
.portfolio-page .portfolio-footer .email-mark svg{display:block;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.portfolio-page .portfolio-footer .email-mark:hover,.portfolio-page .portfolio-footer .email-mark:focus-visible{color:var(--accent);transform:translateY(-1px);text-decoration:none}
.portfolio-page .portfolio-footer > a[href="#top"]{justify-self:end}

@media(max-width:700px){.portfolio-page .info-layout{grid-template-columns:1fr}.portfolio-page .info-photo{width:min(86vw,460px);justify-self:start}}