/* =====================================================================
   Jesper Kristensen — link-in-bio
   Minimalist / modern, Apple- & SpaceX-inspired: monochrome, flat,
   hairline-separated rows, generous negative space, system (SF) type.
   No gradients, no glows, no glass. Edit the :root tokens to retheme.
   ===================================================================== */

:root {
  --bg:          #000000;
  --text:        #f5f5f7;                    /* near-white (primary) */
  --muted:       #a1a1a6;                    /* secondary text */
  --faint:       #6e6e73;                    /* labels, hostnames */
  --line:        rgba(255, 255, 255, 0.12);  /* hairline dividers */
  --line-strong: rgba(255, 255, 255, 0.30);
  --hover:       rgba(255, 255, 255, 0.04);  /* subtle row hover wash */

  --maxw: 560px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 4.5rem) clamp(1.25rem, 6vw, 1.75rem) 3.5rem;
}

/* ----------------------------- Profile ----------------------------- */
.profile { text-align: center; }

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);   /* a single hairline ring, no gradient */
}

.name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 1.3rem 0 0.45rem;
  font-size: clamp(1.45rem, 5vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.verified { display: inline-flex; width: 1.05em; height: 1.05em; }
.verified svg { width: 100%; height: 100%; }
.verified svg path:first-child { fill: var(--muted); }   /* monochrome badge */
.verified svg .check { stroke: var(--bg); }

.bio {
  margin: 0 auto;
  max-width: 32ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* Social icons — plain marks, no boxes */
.socials {
  display: flex;
  justify-content: center;
  gap: 1.45rem;
  margin-top: 1.5rem;
}
.socials a {
  display: inline-flex;
  color: var(--faint);
  transition: color .2s ease, transform .2s ease;
}
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.socials a:hover { color: var(--text); transform: translateY(-1px); }

/* ----------------------------- Links ------------------------------- */
.links { margin-top: 2.75rem; }

.section { margin-top: 2.5rem; }

.section-title {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Borderless hairline-separated rows (the Apple/SpaceX list pattern) */
.link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: padding-left .2s ease, background .2s ease;
}
.link:hover {
  background: var(--hover);
  padding-left: 0.6rem;
}

.link-text { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; flex: 1; }
.link-title { font-weight: 500; font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; }
.link-host {
  font-size: 0.78rem;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--faint);
  transition: transform .2s ease, color .2s ease;
}
.link:hover .arrow,
.link:focus-visible .arrow {
  color: var(--text);
  transform: translateX(3px);
}

/* Featured (pinned) — same row, just a label + slightly stronger title. */
.featured { flex-wrap: wrap; }
.featured .link-title { font-weight: 600; font-size: 1.08rem; }
.link-eyebrow {
  flex: 1 0 100%;
  margin-bottom: 0.45rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ----------------------------- Footer ------------------------------ */
.footer {
  margin-top: 3rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.8rem;
}
.footer p { margin: 0.35rem 0; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); }
.footer-sub { font-size: 0.74rem; }

/* ------------------------- A11y / motion --------------------------- */
a:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .page { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}