/* /links — mobile-first digital business card. Builds on site.css tokens. */
.links-page { min-height: 100svh; }
.card-wrap {
  width: 100%; max-width: 460px; margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Identity */
.id { text-align: left; }
.id-photo {
  position: relative; overflow: hidden; border-radius: 20px;
  aspect-ratio: 5 / 4; background: #d6d5d8;
  view-transition-name: portrait;
}
.id-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.js .id-photo { clip-path: inset(0 0 100% 0 round 20px); animation: idIn 1s var(--ease) .05s forwards; }
@keyframes idIn { to { clip-path: inset(0 0 0 0 round 20px); } }
.id-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: color-mix(in srgb, #111 70%, transparent); color: #f4f1ea;
  padding: 7px 10px; border-radius: 999px; font-size: 11px;
}
.id h1 { font-size: clamp(52px, 15vw, 68px); margin: 18px 0 6px; line-height: .95; }
.id h1 em { font-style: italic; color: var(--accent); }
.id-role { margin: 0; font-weight: 600; font-size: 15.5px; }
.id-line { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }

/* Link stack */
.stack { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.link {
  display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 14px;
  min-height: 68px; padding: 10px 16px 10px 12px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}
.link:hover { border-color: var(--rule-strong); transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(0,0,0,.4); }
.link:active { transform: scale(.98); }
.link .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); transition: background .2s, color .2s; }
.link:hover .ic { background: var(--accent); color: var(--accent-ink); }
.link .tx { display: flex; flex-direction: column; min-width: 0; }
.link strong { font-size: 16px; font-weight: 600; }
.link small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link .go { justify-self: end; color: var(--muted); transition: transform .3s var(--ease), color .2s; }
.link:hover .go { color: var(--accent); transform: translateX(3px); }

.link.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.link.primary .ic { background: #0a66c2; color: #fff; }
.link.primary small, .link.primary .go { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.link.primary:hover .go { color: var(--paper); }

/* Featured reports */
.featured { margin-top: 26px; }
.featured h2 { margin: 0 0 8px; }
.featured ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.featured a {
  display: grid; grid-template-columns: 76px 1fr 20px; gap: 10px; align-items: center;
  min-height: 56px; padding: 8px 2px; border-bottom: 1px solid var(--rule);
  text-decoration: none; font-size: 14.5px;
}
.featured .fig { color: var(--accent); font-size: 15px; }
.featured a:hover span:last-child { color: var(--accent); }

.links-foot { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.links-foot .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mini {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center;
  border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent;
  font: 500 13px/1 var(--mono); color: var(--ink); text-decoration: none; cursor: pointer;
}
.mini:hover { background: var(--ink); color: var(--paper); }

/* Staggered entrance — quick, so the buttons are usable within a second */
.js .lk { opacity: 0; transform: translateY(10px); animation: lkIn .5s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms + 250ms); }
@keyframes lkIn { to { opacity: 1; transform: none; } }

/* Larger screens: center as a card */
@media (min-width: 720px) {
  .card-wrap { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lk, .js .id-photo { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}