/* Compact link hub and digital contact card share the main tokens. */
.mini-shell {
  width:min(600px,calc(100% - 40px));
  margin-inline:auto
}
.mini-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:94px
}
.mini-header .brand {
  width:132px
}
.share-button {
  background:var(--surface);
  min-height:44px;
  font-size:14px;
  padding:11px 16px;
  border-radius:var(--radius)
}
.share-button:hover {
  background:var(--surface-2)
}
.surface-nav {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  font-size:14px
}
.surface-nav>a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 6px;
  background:var(--surface);
  border-radius:var(--radius)
}
.surface-nav>a[aria-current=page] {
  background:var(--ink);
  color:var(--bg)
}
.surface-nav>a:hover {
  background:var(--surface-2);
  color:var(--ink)
}
.surface-nav>a[aria-current=page]:hover {
  background:var(--ink);
  color:var(--bg)
}
.bio-main,.card-main {
  padding-top:40px
}
.mini-identity {
  display:flex;
  gap:28px;
  align-items:center
}
.mini-identity .portrait {
  width:104px;
  flex-shrink:0;
  margin:5px
}
.mini-identity h1 {
  font-size:48px;
  line-height:1.08
}
.mini-intro {
  font-size:20px;
  line-height:1.5;
  max-width:30ch;
  margin-top:28px
}
.mini-body main>.primary {
  display:flex;
  width:100%;
  margin-top:24px
}
.mini-body .action-note {
  margin-top:12px;
  font-size:14px
}
.bio-links {
  display:grid;
  gap:12px;
  margin-top:32px
}
.bio-link {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100px;
  background:var(--surface);
  padding:24px;
  border-radius:var(--radius)
}
.bio-link strong {
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.03em;
  font-weight:500
}
.bio-link>span {
  font-size:16px;
  color:var(--muted);
  margin-top:7px;
  line-height:1.5
}
.bio-link:hover {
  background:var(--surface-2);
  color:var(--ink)
}
.bio-project {
  background:var(--surface);
  display:block;
  overflow:hidden;
  border-radius:var(--radius)
}
.bio-project>img {
  width:100%
}
.bio-project>div {
  padding:24px
}
.bio-project strong {
  font-size:32px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.035em
}
.bio-project p {
  font-size:16px;
  color:var(--muted);
  line-height:1.55;
  margin-top:12px;
  max-width:40ch
}
.bio-project:hover {
  background:var(--surface-2);
  color:var(--ink)
}
.mini-social-section {
  margin-top:48px
}
.mini-social-section>h2 {
  font-size:28px;
  line-height:1.2
}
.mini-socials {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:24px
}
.mini-socials>a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  background:var(--surface);
  font-size:14px;
  padding:10px 4px;
  border-radius:var(--radius)
}
.mini-socials>a:hover {
  background:var(--surface-2)
}
.mini-email {
  font-size:16px;
  display:flex;
  align-items:center;
  min-height:48px;
  margin-top:17px;
  overflow-wrap:anywhere
}
.mini-social-section>.text-link {
  margin-top:8px
}
.mini-footer {
  margin-top:48px;
  padding-bottom:40px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px
}
.mini-footer .brand {
  width:120px
}
.mini-footer p {
  width:100%;
  order:3;
  color:var(--muted);
  font-size:14px
}
.mini-footer>a:last-child {
  font-size:14px;
  min-height:44px;
  display:flex;
  align-items:center
}
.card-shortcuts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px
}
.card-shortcuts>a,.card-shortcuts>button {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:48px;
  padding:12px 8px;
  font-size:14px;
  background:var(--surface);
  border-radius:var(--radius)
}
.card-shortcuts>a:hover,.card-shortcuts>button:hover {
  background:var(--surface-2);
  color:var(--ink)
}
.card-details {
  margin-top:32px;
  padding:8px 24px;
  background:var(--surface);
  border-radius:var(--radius)
}
.card-details .contact-list {
  margin-top:0;
  gap:0
}
.card-details .contact-list>a,.card-details .email-row {
  padding:20px 0
}
.card-details .contact-list strong {
  font-size:20px
}
.card-materials {
  display:grid;
  gap:8px;
  margin-top:24px
}
.card-materials .text-link {
  min-height:48px
}
#qr-dialog {
  width:min(420px,calc(100vw - 32px));
  padding:24px
}
#qr-dialog .dialog-bar {
  padding:0;
  background:transparent;
  align-items:center;
  flex-wrap:nowrap
}
#qr-dialog h2 {
  font-size:24px;
  line-height:1.2
}
#qr-dialog>img {
  width:100%;
  height:auto;
  margin-top:24px
}
#qr-dialog>p {
  font-size:16px;
  line-height:1.5;
  margin-top:20px
}
#qr-dialog>.primary {
  display:flex;
  margin-top:20px
}
.mini-body .toast {
  bottom:32px
}
@media(min-width:900px) {
  .mini-shell {
    padding-top:24px
  }
  .mini-header {
    min-height:80px
  }
  .bio-main,.card-main {
    padding-top:48px
  }
  .mini-identity .portrait {
    width:120px
  }
  .mini-identity h1 {
    font-size:56px
  }
  .mini-intro {
    max-width:36ch
  }
  .bio-links {
    margin-top:40px
  }
}
@media(max-width:600px) {
  .mini-header {
    min-height:84px
  }
  .mini-header .brand {
    width:120px
  }
  .share-button {
    font-size:14px;
    padding:11px 12px
  }
  .surface-nav {
    font-size:14px
  }
  .bio-main,.card-main {
    padding-top:32px
  }
  .mini-identity {
    gap:22px
  }
  .mini-identity .portrait {
    width:88px
  }
  .mini-identity h1 {
    font-size:clamp(32px,9vw,44px)
  }
  .mini-intro {
    font-size:20px;
    line-height:1.5;
    margin-top:24px
  }
  .bio-link {
    padding:22px 20px;
    min-height:104px
  }
  .bio-link strong {
    font-size:24px
  }
  .bio-link>span {
    font-size:16px
  }
  .bio-project>div {
    padding:22px 20px
  }
  .bio-project strong {
    font-size:30px
  }
  .card-details {
    padding:6px 20px
  }
  .card-details .contact-list strong {
    font-size:19px
  }
  .mini-email {
    font-size:16px
  }
  .mini-social-section {
    margin-top:40px
  }
  .mini-footer {
    margin-top:40px
  }
  .mini-footer p {
    font-size:14px
  }
}
@media(max-width:359px) {
  .mini-shell {
    width:calc(100% - 32px)
  }
  .mini-identity {
    gap:17px
  }
  .mini-identity .portrait {
    width:72px
  }
  .mini-identity h1 {
    font-size:32px
  }
  .mini-intro {
    font-size:18px
  }
  .mini-socials>a {
    font-size:13px
  }
  .card-details .contact-list strong {
    font-size:18px
  }
  .mini-email {
    font-size:15px
  }
}