.bio-page { position: relative; isolation: isolate; min-height: 100svh; background: #f1eeee; }
.bio-page > .effect-background { position: fixed; background-color: #f1eeee; background-image: repeating-linear-gradient(126deg, transparent 0 150px, #ffffff55 151px, transparent 153px), linear-gradient(126deg, #e9e0e3 0%, #faf8f7 30%, #f1e8e9 53%, #e4eae5 100%); }
.bio-main { width: min(100% - 48px, 480px); margin-inline: auto; padding: 24px 0 30px; }
.bio-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; color: #73626a; font-size: 10px; text-transform: uppercase; }
.bio-back { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #bdaeb555; border-radius: 50%; color: #70404a; transition: background 180ms; }
.bio-back:hover { background: #fffdfa; }
.bio-back .ui-icon { width: 18px; height: 18px; }
.bio-profile { text-align: center; margin-bottom: 25px; }
.bio-profile h1 { font-size: 62px; line-height: .92; }
.bio-profile h1 em { color: var(--wine); }
.bio-profile h1 > span { display: block; margin-top: 10px; font-size: 22px; }
.bio-tagline { color: #77676c; font-size: 13px; margin-top: 18px; }
.bio-lookbook { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin: 25px 0 27px; }
.bio-lookbook a { overflow: hidden; height: 108px; background: #d9cdcf; }
.bio-lookbook a:first-child { border-radius: 6px 0 0 6px; }
.bio-lookbook a:last-child { border-radius: 0 6px 6px 0; }
.bio-lookbook img { object-position: center 37%; transition: transform 400ms; }
.bio-lookbook a:hover img { transform: scale(1.045); }
.bio-links { display: grid; gap: 10px; }
.bio-link { display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 15px; min-height: 77px; padding: 15px 21px; border: 1px solid #c9b7bf80; border-radius: 7px; background: #fffdfaab; box-shadow: 0 2px 3px #493b4103; transition: transform 220ms, border-color 220ms, background 220ms, box-shadow 220ms; animation: bio-arrive 550ms both; animation-delay: calc(var(--entry, 0) * 65ms); }
.bio-link:hover { transform: translateY(-2px); border-color: #ad8e99; background: #fffdfacf; box-shadow: 0 6px 18px #493b4108; }
.bio-link:active { transform: translateY(0) scale(.995); }
.bio-link-icon { display: grid; place-items: center; color: #88616e; }
.bio-link-copy { min-width: 0; }
.bio-link > span:first-child:not(.bio-link-icon) { grid-column: span 2; }
.bio-link strong, .bio-link small { display: block; overflow-wrap: anywhere; }
.bio-link strong { font-size: 14px; font-weight: 500; line-height: 1.4; }
.bio-link small { color: #74636b; font-size: 12px; margin-top: 4px; line-height: 1.45; }
.bio-arrow { display: flex; color: #997a87; transition: transform 220ms; }
.bio-arrow .ui-icon { width: 18px; height: 18px; }
.bio-link:hover .bio-arrow { transform: translate(2px, -2px); }
.bio-link-primary { background: #593b47; border-color: #8e6877; color: #fff8f5; min-height: 90px; margin-bottom: 3px; --beam-size: 40px; }
.bio-link-primary:hover { background: #62414e; border-color: #ba939d; }
.bio-link-primary strong { font-size: 16px; }
.bio-link-primary small { color: #efdbdf; }
.bio-link-primary .bio-link-icon, .bio-link-primary .bio-arrow { color: #f2d6cd; }
.bio-link-primary::before { background: radial-gradient(300px circle at var(--x,50%) var(--y,50%), #ffe5cb1a, transparent 65%); }
.bio-link-primary::after { display: none; }
.bio-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 27px; padding-top: 18px; border-top: 1px solid #bdaeb54a; font-size: 11px; color: #73636b; }
.bio-footer a { color: var(--wine); display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.bio-footer .ui-icon { width: 14px; height: 14px; }
@keyframes bio-arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 1000px) {
  .bio-main { padding-top: 28px; }
  .bio-page > .effect-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 320px), #88616e0a calc(50% - 320px) calc(50% - 319px), transparent calc(50% - 319px) calc(50% + 319px), #88616e0a calc(50% + 319px) calc(50% + 320px), transparent calc(50% + 320px)); }
}
@media (max-width: 640px) {
  .bio-main { padding-top: 12px; }
  .bio-topline { margin-bottom: 20px; }
  .bio-profile h1 { font-size: 55px; }
  .bio-profile h1 > span { font-size: 21px; }
  .bio-lookbook { margin: 22px 0; }
  .bio-lookbook a { height: 92px; }
  .bio-link { padding: 14px 16px; gap: 12px; }
}
@media (max-width: 374px) {
  .bio-main { width: calc(100% - 36px); }
  .bio-profile h1 { font-size: 48px; }
  .bio-link { grid-template-columns: 28px minmax(0, 1fr) 18px; padding: 13px; gap: 10px; }
  .bio-link small { font-size: 11px; }
  .bio-footer { flex-wrap: wrap; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bio-link { animation: none; }
  .bio-link:hover, .bio-link:active, .bio-lookbook a:hover img { transform: none; }
}