:root { color-scheme: dark; --ink: #111; --paper: #f5f5f2; --muted: #aaa; }
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { min-height: 100vh; min-height: 100svh; margin: 0; overflow-x: hidden; color: #fff; background: #111; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.links-page { position: relative; isolation: isolate; }
.links-backdrop { position: fixed; z-index: -2; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% -10%, #353535 0, #191919 38%, #101010 72%); }
.links-backdrop::before { content: ""; position: absolute; inset: -8rem -18rem; opacity: .075; background: url("../img/brand/pattern.png") center / 32rem auto repeat; filter: invert(1); transform: rotate(-7deg) scale(1.1); }
.links-backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(to bottom, #000, transparent 76%); }
.links-backdrop span { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.links-backdrop span:nth-child(1) { width: 38rem; height: 38rem; top: -24rem; left: 50%; transform: translateX(-50%); }
.links-backdrop span:nth-child(2) { width: 26rem; height: 26rem; top: -18rem; left: 50%; transform: translateX(-50%); }
.links-backdrop span:nth-child(3) { width: 1rem; height: 1rem; top: 3.2rem; left: calc(50% + 10rem); background: #fff; box-shadow: 0 0 2rem rgba(255,255,255,.45); }
.links-shell { width: min(100%, 43rem); min-height: 100svh; margin: 0 auto; padding: max(2rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2rem) max(2rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.links-profile { padding: 1.2rem 0 2rem; text-align: center; }
.links-logo { width: min(21rem, 78vw); display: inline-block; }
.links-logo img { width: 100%; display: block; }
.links-kicker { margin: 2.3rem 0 .75rem; color: #bdbdbd; font-size: .67rem; font-weight: 800; letter-spacing: .23em; text-transform: uppercase; }
.links-profile h1 { max-width: 12ch; margin: 0 auto; font-size: clamp(2.85rem, 10vw, 5.2rem); line-height: .9; letter-spacing: -.065em; }
.links-intro { margin: 1.25rem auto 0; color: #a8a8a8; font-size: .92rem; }
.bio-links { display: grid; gap: .7rem; }
.bio-link { min-height: 4.6rem; padding: .65rem .72rem; display: grid; grid-template-columns: 3.2rem 1fr 2.7rem; gap: .75rem; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; color: #111; background: rgba(248,248,245,.97); box-shadow: 0 .8rem 2.6rem rgba(0,0,0,.18); transform: translateY(0); transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; animation: link-rise .55s both; animation-delay: calc(var(--link-index, 0) * 55ms + 80ms); }
.bio-link:hover, .bio-link:focus-visible { transform: translateY(-3px); border-color: #fff; background: #fff; box-shadow: 0 1rem 3.2rem rgba(0,0,0,.34); outline: none; }
.bio-link--no-icon { grid-template-columns: 1fr 2.7rem; padding-left: 1.35rem; }
.bio-link-icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: .72rem; color: #fff; background: #111; }
.bio-link-icon svg { width: 1.45rem; height: 1.45rem; }
.bio-link-label { min-width: 0; font-size: .91rem; font-weight: 800; letter-spacing: .025em; }
.bio-link-arrow { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border: 1px solid #d1d1d1; border-radius: 50%; font-size: 1.05rem; transition: color .2s ease, background .2s ease, transform .2s ease; }
.bio-link:hover .bio-link-arrow { color: #fff; background: #111; transform: rotate(12deg); }
.links-footer { margin-top: auto; padding: 2.2rem 0 .25rem; text-align: center; }
.links-footer a { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .28rem; border-bottom: 1px solid rgba(255,255,255,.45); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.links-footer p { margin: 1.15rem 0 0; color: #777; font-size: .66rem; }
.cookie-banner { position: fixed; z-index: 50; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left)); width: min(34rem, calc(100% - 2rem)); margin-left: auto; padding: 1rem; border: 1px solid #dedede; border-radius: 1rem; color: #111; background: #fff; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.35); }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0 0 .8rem; color: #555; font-size: .75rem; }
.cookie-banner p a { text-decoration: underline; }
.cookie-banner div { display: flex; justify-content: flex-end; gap: .45rem; }
.cookie-banner button { min-height: 2.4rem; padding: .45rem .8rem; border: 1px solid #111; border-radius: 999px; color: #111; background: #fff; font-size: .68rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.cookie-banner button:last-child { color: #fff; background: #111; }
@keyframes link-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 760px) {
  .links-shell { padding-top: 3rem; padding-bottom: 2.5rem; }
  .links-profile { padding-bottom: 2.4rem; }
  .bio-link { min-height: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}