@font-face {
  font-family: Inter;
  src: url("assets/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff4ec;
  background: #211a1b;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
svg { display: block; width: 24px; height: 24px; }
a:focus-visible { outline: 3px solid #f3b5c4; outline-offset: 5px; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.backdrop { display: none; }
.profile-card {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 15% 0, #744b4530, transparent 50%), #211a1b;
}
.profile-header { position: relative; padding: 26px 20px 0; text-align: center; }
.portrait {
  width: 154px;
  height: 154px;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid #e6b5a1;
  border-radius: 50%;
  box-shadow: 0 0 0 6px #e6b5a10d;
  background: #513d37;
  animation: reveal .7s ease both;
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 15%;
  transform: scale(1.95);
  transform-origin: 85% 22%;
}
.identity { position: relative; margin-top: 18px; animation: reveal .7s .08s ease both; }
.eyebrow { display: block; color: #e6b5a1; font-size: .625rem; font-weight: 600; line-height: 1.5; letter-spacing: .23em; text-transform: uppercase; }
h1 { margin: 6px 0 5px; font-size: 2.375rem; font-weight: 600; line-height: 1.1; letter-spacing: -.065em; }
h1 span { display: inline-block; position: absolute; margin-left: 9px; color: #e6b5a1; font-size: .64em; line-height: 1.75; font-weight: 400; }
.handle { margin: 0; font-size: .8125rem; line-height: 1.5; color: #d2bfb9; }
.intro { margin: 12px 0 0; color: #f0dbce; font-family: Georgia, "Times New Roman", serif; font-size: 1.125rem; line-height: 1.4; font-style: italic; }
.links { display: grid; gap: 14px; padding: 23px 18px 0; }
.featured-link {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 23px;
  background: #66564a;
  isolation: isolate;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .25s ease, box-shadow .3s ease;
  box-shadow: 0 12px 36px -16px #000b, 0 0 0 1px #e6b5a12b;
  animation: card-glow 6s ease-in-out infinite;
}
.featured-photo { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; }
.featured-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; display: block; animation: photo-drift 12s ease-in-out infinite alternate; }
.featured-link::before { content: ""; position: absolute; z-index: 3; inset: 0; border: 1px solid #f4dfce4d; border-radius: inherit; pointer-events: none; }
.featured-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, #17100f16, transparent 28%, transparent 47%, #20131530 61%, #201315c9 81%, #201315fa); pointer-events: none; }
.featured-shine { position: absolute; z-index: 2; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.featured-shine::after { content: ""; position: absolute; inset: -60%; background: linear-gradient(115deg, transparent 44%, #fff6e50a 48%, #fff6e521 50%, #fff6e50a 52%, transparent 56%); transform: translateX(-85%); animation: light-sweep 9s ease-in-out infinite; }
.featured-badge { position: absolute; z-index: 1; left: 15px; top: 15px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 30px; border: 1px solid #fff4ec4d; background: #241a1cbc; color: #fff8f3; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .6875rem; font-weight: 550; line-height: 1.3; letter-spacing: .015em; }
.featured-badge svg { width: 13px; height: 13px; color: #f4c9b6; }
.featured-content { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; color: #fff7ef; }
.featured-label { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 7.5vw, 2.375rem); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; text-shadow: 0 2px 12px #0005; }
.featured-note { display: block; margin-top: 7px; color: #f1dbcf; font-size: .75rem; line-height: 1.5; }
.featured-action { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 19px; padding: 13px 16px; border-radius: 12px; background: linear-gradient(110deg, #f5dbcc, #efb8bb); color: #3c232b; font-size: .8125rem; font-weight: 700; line-height: 1.4; box-shadow: 0 6px 20px #18100e4d; transition: transform .25s ease, box-shadow .25s ease; }
.featured-action svg { width: 18px; height: 18px; }
.featured-action .action-arrow { width: 19px; height: 19px; margin-left: auto; transition: transform .25s ease; }
.featured-action > span { margin-right: auto; }
.featured-link:active .featured-action { transform: scale(.98); }
.instagram-link { display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 17px 18px; border: 1px solid #e6b5a126; border-radius: 17px; background: #ffffff04; transition: transform .25s, border-color .25s, background .25s; }
.instagram-icon { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 12px; background: #e7aaaa10; color: #e7aaaa; }
.instagram-icon svg { width: 23px; height: 23px; }
.instagram-copy { display: grid; gap: 5px; font-size: .875rem; font-weight: 600; }
.instagram-copy small { font-size: .6875rem; font-weight: 400; color: #c7aaa3; }
.instagram-arrow { margin-left: auto; flex: 0 0 19px; width: 19px; height: 19px; color: #e0b7ac; transition: transform .25s; }
.profile-footer { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 25px 18px 0; color: #b99a91; font-size: .625rem; line-height: 1.5; letter-spacing: .06em; }
.profile-footer span { color: #d6ada2; font-size: .875rem; }

@media (hover: hover) {
  .featured-link:hover .featured-action { transform: translateY(-2px); box-shadow: 0 8px 28px #efb8bb26; }
  .featured-link:hover .action-arrow { transform: translateX(3px); }
  .instagram-link:hover { transform: translateY(-2px); border-color: #e6b5a166; background: #e7aaaa09; }
  .instagram-link:hover .instagram-arrow { transform: translateX(3px); }
}
@media (min-width: 768px) {
  .backdrop { display: block; position: fixed; inset: -8%; background: linear-gradient(#241b1ae8, #281b1ad9), url("assets/talinka-beach.jpg") center 45% / cover no-repeat; filter: blur(36px); pointer-events: none; }
  .profile-card { width: 530px; max-width: calc(100% - 48px); min-height: 0; margin: 28px auto; padding-bottom: 27px; border: 1px solid #f4dfce22; border-radius: 30px; box-shadow: 0 40px 100px -20px #000a; }
  .profile-header { padding: 0; }
  .portrait { width: 100%; height: 375px; border: 0; border-radius: 29px 29px 0 0; box-shadow: none; position: relative; }
  .portrait img { transform: none; object-position: 50% 26%; }
  .portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #211a1b00 27%, #211a1b12 44%, #211a1b5c 60%, #211a1be5 85%, #211a1b); }
  .identity { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 24px; text-shadow: 0 1px 10px #0005; animation: none; }
  h1 { font-size: 2.75rem; margin-top: 8px; }
  .eyebrow { color: #ffdbc3; }
  .intro { margin-top: 11px; }
  .links { padding: 26px 22px 0; gap: 16px; }
  .featured-content { padding: 25px; }
  .featured-badge { left: 20px; top: 20px; font-size: .75rem; }
  .featured-label { font-size: 2.5rem; }
  .featured-note { font-size: .8125rem; }
  .featured-action { margin-top: 21px; min-height: 53px; font-size: .875rem; }
}
@media (max-width: 350px) {
  .links { padding-left: 12px; padding-right: 12px; }
  .featured-content { padding: 16px; }
  .featured-action { margin-top: 14px; }
  .instagram-link { gap: 10px; padding: 16px 12px; }
}
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-glow { 0%, 100% { box-shadow: 0 12px 36px -16px #000b, 0 0 0 1px #e6b5a12b; } 50% { box-shadow: 0 14px 38px -16px #000b, 0 0 24px -12px #efb8bb52, 0 0 0 1px #e6b5a15c; } }
@keyframes photo-drift { from { transform: scale(1); } to { transform: scale(1.015); } }
@keyframes light-sweep { 0%, 65% { transform: translateX(-85%); } 90%, 100% { transform: translateX(85%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .featured-link { transform: none; }
  .featured-shine { display: none; }
}