/* Light +RUMO link page: centered profile and outlined link cards.
   Design variance: 3; motion intensity: 2; visual density: 5.
   Profile/social links: circles; link cards: 18px radius. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("web-assets/fonts/inter-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bio-bg: #fafcf9;
  --bio-surface: #ffffff;
  --bio-text: #243320;
  --bio-muted: #586650;
  --bio-border: #d5e1d1;
  --bio-green: #367b30;
  --bio-hover: #edf4e9;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--bio-bg);
  color: var(--bio-text);
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(115 187 109 / 20%);
}

a:focus-visible { outline: 3px solid var(--bio-green); outline-offset: 5px; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 12px 18px;
  border-radius: 18px;
  background: var(--bio-green);
  color: #fafcf9;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.bio-shell {
  width: min(576px, 100%);
  margin-inline: auto;
  padding: max(74px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.bio-layout { scroll-margin-top: 24px; }
.bio-intro { text-align: center; }

.bio-portrait {
  width: 156px;
  height: 156px;
  margin-inline: auto;
  padding: 4px;
  overflow: hidden;
  border: 2px solid #a9c99f;
  border-radius: 50%;
}

.bio-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  background: #e8f1e3;
}

h1 {
  margin: 18px 0 0;
  color: var(--bio-green);
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.3;
  text-wrap: balance;
}

.bio-description { max-width: 390px; margin: 12px auto 0; color: var(--bio-text); font-size: 0.96rem; line-height: 1.75; text-wrap: balance; }
.bio-links { display: grid; gap: 14px; margin-top: 34px; }

.bio-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 20px;
  min-height: 96px;
  padding: 20px 24px;
  border: 1px solid #a9c99f;
  border-radius: 18px;
  background: #edf5e9;
  transition: transform 180ms ease;
}

.bio-link-content { display: grid; gap: 4px; min-width: 0; overflow-wrap: break-word; }
.bio-link-title { font-size: 1rem; font-weight: 650; line-height: 1.45; }
.bio-link-description { color: var(--bio-muted); font-size: 0.875rem; line-height: 1.55; }
.bio-link-arrow { display: grid; place-items: center; width: 24px; height: 24px; color: var(--bio-green); font-size: 1.3rem; line-height: 1; transition: transform 180ms ease; }
.bio-link:focus-visible { border-color: var(--bio-green); background: var(--bio-hover); }
.bio-link:focus-visible .bio-link-arrow { color: var(--bio-green); }

.bio-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 36px; }

.bio-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bio-border);
  border-radius: 50%;
  background: var(--bio-surface);
  transition: transform 180ms ease;
}

.bio-socials img { display: block; opacity: 0.7; }
.bio-link:active, .bio-socials a:active { transform: scale(0.98); }

@media (hover: hover) {
  .bio-link:hover { border-color: var(--bio-green); background: var(--bio-hover); transform: translateY(-2px); }
  .bio-link:hover .bio-link-arrow { color: var(--bio-green); transform: translateX(3px); }
  .bio-socials a:hover { border-color: var(--bio-green); background: var(--bio-hover); transform: translateY(-2px); }
  .bio-socials a:hover img { opacity: 1; }
  .bio-footer > a:last-child:hover { color: var(--bio-text); }
}

.bio-footer { display: grid; justify-items: center; gap: 8px; margin-top: 34px; color: var(--bio-muted); font-size: 0.72rem; }
.bio-brand { display: flex; align-items: center; min-height: 44px; }
.bio-brand img { display: block; width: 78px; height: auto; }
.bio-footer > a:last-child { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 599px) {
  .bio-shell { padding-top: max(50px, env(safe-area-inset-top)); }
  .bio-portrait { width: 140px; height: 140px; }
  h1 { margin-top: 16px; font-size: 1.5rem; }
  .bio-description { font-size: 0.9rem; line-height: 1.7; }
  .bio-links { margin-top: 32px; }
  .bio-link { gap: 14px; padding: 20px 24px; }
  .bio-socials { gap: 16px; margin-top: 36px; }
}

@media (max-width: 359px) {
  .bio-shell { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .bio-link { padding-left: 18px; }
  .bio-socials { gap: 12px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .bio-shell { padding-top: max(24px, env(safe-area-inset-top)); }
  .bio-portrait { width: 96px; height: 96px; }
  h1 { margin-top: 14px; font-size: 1.4rem; }
  .bio-description { margin-top: 8px; }
  .bio-links { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .bio-link, .bio-link-arrow, .bio-socials a { transition: none; }
  .bio-link:active, .bio-link:hover, .bio-link:hover .bio-link-arrow, .bio-socials a:active, .bio-socials a:hover { transform: none; }
}