:root {
  color-scheme: light;
  --ink: #201e1c;
  --muted: #514b45;
  --blue: #263e92;
  --paper: #f0ebe2;
  --edge: rgba(255, 255, 255, .9);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 14% 10%, #fcfaf5 0, transparent 58%),
    radial-gradient(ellipse at 96% 75%, #e1e4ec 0, transparent 62%),
    var(--paper);
  font-family: var(--font);
  -webkit-tap-highlight-color: rgba(48, 72, 156, .18);
}

a { color: inherit; text-decoration: none; }
a[href]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.icon-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bio {
  width: min(100%, 480px);
  margin-inline: auto;
  padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
}

.profile {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 23px 23px;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, .93);
  background: #101519;
  box-shadow: 0 24px 54px -38px rgba(59, 44, 29, .45), 0 0 0 1px rgba(70, 52, 31, .07);
}

.profile::before,
.profile::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.profile::before {
  z-index: -1;
  background:
    linear-gradient(90deg, #101519 0%, rgba(16, 21, 25, .94) 19%, rgba(16, 21, 25, .62) 43%, transparent 73%),
    url("assets/felipe-belloni.webp") right 43% / 84% auto no-repeat;
}

.profile::after {
  border-radius: inherit;
  box-shadow: inset 0 1px 2px 1px rgba(255, 255, 255, .61), inset 0 -1px 4px rgba(255, 255, 255, .34);
}

.profile-copy {
  color: #fff;
  padding-top: 18px;
}

h1 {
  margin: 0 0 0 -.04em;
  font-size: clamp(2.85rem, 13.6vw, 4rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .99;
}

.profile-description {
  max-width: 22ch;
  margin: 13px 0 0;
  color: #e8edf2;
  font-size: .875rem;
  line-height: 1.45;
  text-shadow: 0 1px 4px #101519;
}

.socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.glass {
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .44);
  box-shadow: 0 4px 12px -8px rgba(47, 42, 61, .27);
}

.social {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.65vw, 9px);
  padding: 6px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  border-color: rgba(230, 240, 255, .37);
  --glass-reflection: rgba(232, 241, 255, .18);
  --glass-fill: rgba(12, 17, 27, .77);
}

.social > .icon { width: 15px; height: 15px; }
.social .card-arrow { width: 21px; flex: none; }
.social .card-arrow .icon { width: 11px; height: 11px; }
.social[href]:focus-visible { outline-color: #fff; }

.social[href],
.link-card[href] {
  transition: transform .22s cubic-bezier(.2, .75, .3, 1.2), box-shadow .18s ease;
}

@media (hover: hover) {
  .social[href]:hover,
  .link-card[href]:hover { transform: translateY(-2px); }
}

.social[href]:active,
.link-card[href]:active { transform: scale(.97); }

.social[href]:active {
  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, .78),
    inset -1px -1px 3px rgba(232, 239, 255, .48),
    0 2px 5px rgba(0, 0, 0, .22);
}

.links { margin-top: 26px; }
.links > section + section { margin-top: 22px; }
.downloads .link-card + .link-card { margin-top: 10px; }

.links-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 3px 13px;
}

h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 500;
}

.rule {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(67, 54, 39, .2), rgba(67, 54, 39, .045));
}

.link-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-card {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2.7vw, 12px);
  padding: 11px 12px;
  border-radius: 999px;
}

.link-card.glass {
  border-color: rgba(80, 76, 88, .14);
}

.link-card.glass,
.social {
  background:
    linear-gradient(42deg, var(--glass-reflection, rgba(255, 255, 255, .92)), transparent 25%, transparent 75%, var(--glass-reflection, rgba(255, 255, 255, .92))),
    var(--glass-fill, rgba(255, 255, 255, .32));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow:
    inset 2px -2px 2px -1px rgba(255, 255, 255, .95),
    inset -2px 2px 2px -1px rgba(255, 255, 255, .95),
    inset 0 0 5px rgba(80, 76, 88, .17),
    0 4px 9px rgba(47, 42, 61, .12);
}

.card-icon,
.card-arrow {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .85);
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .64), rgba(231, 233, 243, .36));
  color: #2a385b;
  box-shadow: 0 2px 5px rgba(27, 40, 70, .07), inset 0 1px 2px #fff;
}

.card-text {
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}

.card-text strong { font-size: 1rem; font-weight: 500; line-height: 1.2; }
.card-text > span { color: var(--muted); font-size: .8125rem; line-height: 1.3; }

.card-arrow {
  width: clamp(32px, 10vw, 40px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: #343745;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 2px 6px rgba(30, 32, 45, .23);
  transition: transform .22s ease;
}

.card-arrow .icon { width: 15px; height: 15px; }

@media (hover: hover) {
  :is(.link-card, .social):hover .card-arrow { transform: scale(1.08); }
}

:is(.link-card, .social):active .card-arrow { transform: scale(.94); }

.featured {
  color: #fff;
  background:
    radial-gradient(ellipse at 6% -30%, #647bd0 0, transparent 63%),
    radial-gradient(ellipse at 100% 140%, #4b66bf 0, transparent 65%),
    linear-gradient(135deg, #293f83, #19294f 64%);
  border: 1px solid #586ca9;
  box-shadow: inset 1px 1px 2px #a8b8ef, inset -1px -1px 2px #617ac4, 0 9px 18px -10px #263b86;
}

.featured .card-icon,
.featured .card-arrow {
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07));
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .17);
}

.featured .card-text > span { color: #e1e7fd; }

.footer {
  margin-top: 27px;
  text-align: center;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .095em;
  overflow-wrap: anywhere;
}

@media (max-width: 350px) {
  .bio { padding-inline: 13px; }
  .profile { padding-inline: 17px; }
  .link-card { gap: 9px; }
}

@media (min-width: 760px) {
  .bio {
    width: min(100%, 996px);
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(26px, 4.4vw, 62px);
    padding-inline: 32px;
  }

  .profile {
    min-height: 475px;
    padding: 40px 33px 30px;
    border-radius: 42px;
  }

  .profile-copy { padding-top: 24px; }
  h1 { font-size: clamp(4.1rem, 7vw, 5.25rem); }
  .socials { gap: 12px; }
  .social { min-height: 53px; }

  .links { margin-top: 0; }
  .links-header { margin-bottom: 18px; }
  h2 { font-size: 1.7rem; }
  .link-list { gap: 13px; }
  .link-card { min-height: 82px; padding-inline: 14px; }
  .footer { grid-column: 1 / -1; margin-top: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .social[href], .link-card[href], :is(.link-card, .social):is(:hover, :active) .card-arrow { transition: none; transform: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .link-card.glass { background: #faf9f7; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .social { background: #232a35; -webkit-backdrop-filter: none; backdrop-filter: none; }
}