/* Link page layout on top of organic.css (the Organic design system tokens + components, shared with the portfolio and the blog). */

body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }

.icon { fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }

.page {
  max-width: 580px;
  margin: 0 auto;
  padding: clamp(16px, 5vw, 48px) 16px 0;
  color: var(--color-text);
  font-family: var(--font-body);
}
.page, .page > main { display: flex; flex-direction: column; gap: 12px; }

/* ── Profile: a compact, centred take on the portfolio hero ── */
.profile {
  background: var(--color-surface);
  border-radius: 44px;
  padding: clamp(32px, 7vw, 44px) clamp(20px, 5vw, 36px) clamp(28px, 6vw, 38px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.avatar { position: relative; width: clamp(136px, 38vw, 160px); aspect-ratio: 1 / 1.05; margin-bottom: 30px; }
.avatar-dot {
  position: absolute; right: -18%; bottom: -12%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: var(--color-accent-2-300);
}
.avatar-blob {
  position: absolute; inset: 0;
  border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
  overflow: hidden;
  background: var(--color-accent-900);
}
/* Warm tint: lifts the dark studio backdrop into the page's terracotta palette */
.avatar-blob::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, transparent 30%, var(--color-accent-700) 85%);
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
}
.avatar-blob img { width: 100%; height: 100%; object-fit: cover; }

.greeting { font-size: 16px; font-weight: 700; color: var(--color-accent-700); margin-bottom: 8px; }
.profile h1 { font-size: clamp(36px, 9vw, 48px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; }
.profile-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.profile-tags .tag { font-size: 14px; padding: 7px 15px; }

/* ── Featured: portfolio and blog, tinted like the portfolio's featured project cards.
   Side by side down to ~320px wide phones, so the socials stay close to the top ── */
.featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr)); gap: 12px; }
.feature {
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(16px, 5vw, 24px);
  border-radius: clamp(32px, 9vw, 40px);
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.feature-1 { background: var(--color-accent-200); }
.feature-2 { background: var(--color-accent-2-200); }
.feature-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: clamp(8px, 2.5vw, 14px); }
.feature-icon {
  width: clamp(42px, 12vw, 52px); height: clamp(42px, 12vw, 52px); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
}
.feature-2 .feature-icon { background: var(--color-accent-2-700); }
.feature-mark { font-family: var(--font-heading); font-size: clamp(12px, 3.5vw, 15px); letter-spacing: 0.02em; } /* the favicon's VRP monogram */
.feature-title { font-family: var(--font-heading); font-size: clamp(20px, 6vw, 28px); line-height: 1.1; }
.feature-desc { font-size: clamp(13px, 3.8vw, 15px); line-height: 1.45; color: var(--color-neutral-800); text-wrap: pretty; }
.feature-url { margin-top: auto; padding-top: 10px; font-size: clamp(12.5px, 3.6vw, 14px); font-weight: 700; overflow-wrap: anywhere; }
.feature-1 .feature-url { color: var(--color-accent-700); }
.feature-2 .feature-url { color: var(--color-accent-2-700); }

/* ── Links ── */
.links { display: flex; flex-direction: column; gap: 10px; }
.link {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 24px 10px 10px;
  border-radius: 999px;
  background: var(--color-neutral-100);
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.link-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent-200); color: var(--color-accent-800);
  transition: background 0.2s ease, color 0.2s ease;
}
.link:hover .link-icon { background: var(--color-accent); color: var(--color-bg); }
.link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.link-title { font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.link-sub { font-size: 14px; color: var(--color-neutral-700); overflow-wrap: anywhere; }

/* Shared by both card styles: lift on hover, press in on tap, arrow nudges toward where it goes */
.feature:hover, .link:hover { color: var(--color-text); box-shadow: var(--shadow-md); }
.feature:active, .link:active { transform: scale(0.985); }
.arrow { flex: none; color: var(--color-neutral-600); transition: transform 0.2s ease, color 0.2s ease; }
a:hover .arrow { color: var(--color-accent-700); transform: translate(2px, -2px); }
.feature-2:hover .arrow { color: var(--color-accent-2-700); }

/* ── Contact ── */
.contact {
  margin-top: 4px;
  background: var(--color-accent-2-700);
  color: var(--color-bg);
  border-radius: 44px;
  padding: clamp(28px, 7vw, 40px) clamp(16px, 5vw, 40px);
  text-align: center;
}
.contact h2 { font-size: clamp(30px, 7.5vw, 40px); color: var(--color-bg); margin-bottom: 8px; }
.contact p { font-size: 16.5px; max-width: 32ch; margin: 0 auto 22px; color: var(--color-accent-2-100); text-wrap: pretty; }
.mail-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.btn-mail {
  background: var(--color-bg);
  color: var(--color-accent-2-900);
  font-size: clamp(14px, 4.2vw, 18px); /* small enough to keep the address on one line on a 320px phone */
  padding: 14px clamp(16px, 4.5vw, 22px);
  overflow-wrap: anywhere;
}
.btn-mail:hover { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.btn-copy {
  border: 1.5px solid var(--color-accent-2-300);
  color: var(--color-bg);
  font-size: 15px;
  padding: 12px 18px;
}
.btn-copy:hover { background: var(--color-accent-2-800); }
.btn-copy[hidden] { display: none; } /* .btn's inline-flex would otherwise beat [hidden] */
.btn-copy .icon-check, .btn-copy.copied .icon-copy { display: none; }
.btn-copy.copied .icon-check { display: block; }
.btn-copy.copied { border-color: var(--color-accent-2-100); }

/* ── Footer ── */
.footer {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 20px;
  padding: 12px 12px 32px;
  font-size: 13.5px;
  color: var(--color-neutral-700);
}

/* ── Cursor trail ── */
.cursor-trail { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* ── Motion ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
[data-float] { animation: float 4s ease-in-out infinite; }
/* Cards rise in one after another on load; --i is each card's place in the queue */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}
[data-rise] { animation: rise 0.5s ease backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) {
  [data-float], [data-rise] { animation: none; }
  .feature:active, .link:active, a:hover .arrow { transform: none; }
}