/* Link-in-bio page. Tokens, .btn, .kicker, .riso and the data-pp toggles come from /styles.css. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lk { max-width: 540px; margin: 0 auto; padding: clamp(32px, 7vw, 56px) 16px 32px; }

.lk-head { text-align: center; margin-bottom: 2rem; }
.lk-watch { display: block; width: 74px; height: auto; margin: 0 auto .9rem; }
.lk-head h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1; margin-bottom: .8rem; }
.lk-tag { color: var(--ink-soft); max-width: 34ch; margin: 0 auto; text-wrap: balance; }

.lk-group { margin-bottom: 2.4rem; }
.lk-group .kicker { margin: 0 0 .9rem; font-size: inherit; }

/* full-width version of the site's chunky button; right margin leaves room for the offset shadow */
.btn.lk-link { display: grid; grid-template-columns: auto 1fr auto; gap: .9em; width: calc(100% - 6px); min-height: 3.6rem; margin: 0 6px 14px 0; padding: .55em 1.2em .55em .55em; border-radius: 18px; text-align: left; line-height: 1.3; }
.lk-aqua { background: var(--aqua); }
.lk-t small { display: block; margin-top: .15em; font-weight: 500; font-size: .85rem; color: var(--ink-soft); }
.lk-link > i { font-style: normal; }

.lk-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); }
.btn-pink .lk-ic, .lk-aqua .lk-ic { background: var(--paper-2); }
.lk-ic svg, .lk-video b svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-art { display: block; width: 2.9rem; height: 2.9rem; border: 2px solid var(--ink); border-radius: 12px; object-fit: cover; }

/* rich previews: shared look for the poster, videos and products */
.lk-poster, .lk-video, .lk-product { display: block; color: var(--ink); text-decoration: none; background: var(--paper-2); border: var(--line); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
.lk-poster:hover, .lk-video:hover, .lk-product:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.lk-poster { margin: 0 6px 16px 0; }
.lk-poster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--line); }
.lk-poster .lk-when { display: block; padding: .75em 1em; }

.lk-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-right: 6px; }
.lk-thumb { position: relative; display: block; border-bottom: var(--line); }
.lk-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lk-video b { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--pink); }
.lk-video b svg { fill: var(--ink); stroke: none; transform: translateX(1px); }
.lk-video .lk-t { display: block; padding: .6em .8em .75em; font-weight: 700; font-size: .95rem; line-height: 1.25; }

.lk-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 6px 16px 0; }
.lk-product { border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
.lk-product img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: var(--line); }
.lk-product span { display: block; padding: .5em .6em .6em; font-weight: 700; font-size: .8rem; line-height: 1.25; }

.lk-foot { margin-top: 2.6rem; padding-top: 1.4rem; border-top: var(--line); }
.lk-foot .footer-links { margin: 0; }
.lk-foot a { font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .lk-poster, .lk-video, .lk-product { transition: none; }
}