/* Links / bio page — premium navy + gold, mobile-first */
.links-page {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  color: #e8eaf0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(204,164,59,0.18), transparent 60%),
    linear-gradient(170deg, #0d1526 0%, #111e35 55%, #0b1220 100%);
  background-attachment: fixed;
}

.bio {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 56px;
  box-sizing: border-box;
}

/* language switch */
.bio__lang { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.lang-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(204,164,59,0.25);
  border-radius: 50px;
}
.lang-btn {
  border: 0; cursor: pointer; min-width: 40px; min-height: 32px;
  padding: 4px 12px; border-radius: 50px;
  font: 600 13px/1 var(--font-sans); color: #cdd3e0; background: transparent;
  transition: background .2s, color .2s;
}
.lang-btn.active { background: var(--color-accent); color: #0d1526; }

/* header */
.bio__head { text-align: center; padding: 12px 0 8px; }
.bio__logo {
  width: 84px; height: 84px; object-fit: contain;
  border-radius: 22px; padding: 10px; box-sizing: border-box;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(204,164,59,0.3);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.bio__name {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 28px; margin: 16px 0 6px; letter-spacing: .3px; color: #fff;
}
.bio__tagline {
  margin: 0 auto; max-width: 34ch; font-size: 14px; line-height: 1.5;
  color: #aab2c5;
}

/* section */
.bio__section { margin-top: 30px; }
.bio__section-title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-light, #e8c56a);
}
.bio__section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(204,164,59,.4), transparent);
}

/* list rows */
.bio__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bio__row {
  display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 12px 16px;
  text-decoration: none; color: #0f172a;
  background: #fbfaf7; border: 1px solid rgba(0,0,0,.05);
  border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bio__row:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.28); }
.bio__row:active { transform: translateY(0); }
.bio__row-icon {
  flex: 0 0 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; font-size: 18px; color: var(--color-accent-dark, #b8922e);
  background: rgba(204,164,59,.12);
}
.bio__row-icon img { width: 28px; height: 28px; object-fit: contain; }
.bio__row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bio__row-title { font-weight: 600; font-size: 15px; }
.bio__row-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.bio__row-chevron { color: #c0c6d0; font-size: 13px; transition: transform .18s, color .18s; }
.bio__row:hover .bio__row-chevron { color: var(--color-accent-dark, #b8922e); transform: translateX(3px); }

/* grid (social) */
.bio__grid {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.bio__icon-btn {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px;
  color: #f3f4f7; font-size: 22px; text-decoration: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(204,164,59,.3);
  transition: transform .18s, background .18s, color .18s, border-color .18s;
}
.bio__icon-btn img { width: 30px; height: 30px; object-fit: contain; }
.bio__icon-btn:hover {
  transform: translateY(-3px) scale(1.04);
  background: var(--color-accent); color: #0d1526; border-color: var(--color-accent);
}

/* footer */
.bio__foot { margin-top: 40px; text-align: center; }
.bio__back {
  display: inline-flex; align-items: center; gap: 8px;
  color: #aab2c5; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 10px 16px; border-radius: 50px;
  transition: color .18s;
}
.bio__back:hover { color: var(--color-accent-light, #e8c56a); }

/* staggered load-in */
.bio__head, .bio__section, .bio__foot {
  opacity: 0; transform: translateY(12px);
  animation: bio-in .5s ease forwards;
  animation-delay: calc(var(--i, 0) * 80ms + 60ms);
}
@keyframes bio-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .bio__head, .bio__section, .bio__foot { animation: none; opacity: 1; transform: none; }
  .bio__row, .bio__icon-btn, .bio__row-chevron { transition: none; }
}