:root { --ink:#151515; --paper:#f5f4f0; --muted:#77756f; --line:rgba(21,21,21,.12); }
* { box-sizing:border-box; }
html,body { height:100%; overflow:hidden; background:#111; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Vazirmatn,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.links-page { position:relative; isolation:isolate; height:100svh; overflow:hidden; padding:clamp(12px,2.5vh,28px) 20px 14px; }
.ambient { position:absolute; z-index:-1; width:min(70vw,720px); aspect-ratio:1; filter:blur(4px); opacity:.38; pointer-events:none; }
.ambient-a { top:-34vw; right:-28vw; background:radial-gradient(circle,rgba(202,196,176,.7),transparent 64%); }
.ambient-b { bottom:-46vw; left:-32vw; background:radial-gradient(circle,rgba(176,182,182,.52),transparent 66%); }
.profile, .link-groups, footer { width:min(100%,560px); margin-inline:auto; }
.profile { display:grid; justify-items:center; text-align:center; }
.home-mark { display:block; width:clamp(116px,18vh,150px); line-height:0; margin-bottom:clamp(8px,1.4vh,14px); }
.home-mark img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.portrait-ring { display:grid; place-items:center; width:clamp(160px,21vh,184px); aspect-ratio:1; margin-bottom:clamp(8px,1.2vh,12px); padding:4px; border:1px solid rgba(21,21,21,.28); border-radius:50%; background:rgba(255,255,255,.5); box-shadow:0 9px 22px rgba(0,0,0,.1); }
.portrait-frame { width:100%; height:100%; overflow:hidden; border-radius:50%; background:#e9e8e4; }
.portrait-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 44%; filter:grayscale(1) contrast(1.04); }
.eyebrow { margin:0 0 6px; color:var(--muted); font:500 clamp(8px,1.2vh,10px)/1 Arial,sans-serif; letter-spacing:.24em; }
.bio { margin:0 0 6px; color:var(--muted); font:400 clamp(10px,1.45vh,12px)/1.4 Arial,sans-serif; letter-spacing:.04em; }
.verified { display:inline-flex; align-items:center; gap:5px; color:#67645f; font-size:clamp(9px,1.2vh,10px); }
.verified::before { width:6px; height:6px; border-radius:50%; background:#4b7669; content:""; box-shadow:0 0 0 3px rgba(75,118,105,.12); }
.link-groups { display:flex; flex-direction:column; margin-top:clamp(14px,2.4vh,24px); }
.contact-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:clamp(12px,1.8vh,18px); }
.contact-card { display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; min-height:54px; padding:8px 10px; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:rgba(255,255,255,.5); text-decoration:none; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.contact-card:hover,.contact-card:focus-visible { transform:translateY(-2px); background:#fff; border-color:rgba(21,21,21,.3); outline:none; }
.contact-card>span { grid-row:1 / span 2; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; font:600 8px/1 Arial,sans-serif; letter-spacing:.02em; }
.contact-card.whatsapp>span { background:#25d366; }
.contact-card.phone>span { background:#242424; }
.contact-card b { align-self:end; font-size:11px; font-weight:500; }
.contact-card small { align-self:start; color:var(--muted); font:400 8px/1.35 Arial,sans-serif; white-space:nowrap; }
.group-heading { display:flex; align-items:center; gap:10px; margin:0 4px 8px; color:#494741; font-size:12px; font-weight:500; }
.group-heading i { flex:1; height:1px; background:var(--line); }
.group-heading small { color:#8c8982; font:500 9px/1 Arial,sans-serif; letter-spacing:.16em; }
.link-stack { display:grid; gap:7px; }
.link-card { display:grid; grid-template-columns:36px 1fr 18px; align-items:center; gap:10px; min-height:57px; padding:8px 13px 8px 10px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:rgba(255,255,255,.53); box-shadow:0 7px 18px rgba(31,29,25,.035); text-decoration:none; transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease; }
.link-card:hover,.link-card:focus-visible { transform:translateY(-3px); background:#fff; border-color:rgba(21,21,21,.3); box-shadow:0 14px 28px rgba(31,29,25,.1); outline:none; }
.icon { display:block; width:100%; height:100%; background:currentColor; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.link-card>.icon { width:27px; height:27px; padding:6px; color:#fff; background-color:currentColor; }
.link-card.spotify>.icon { color:#1d1d1c; border-radius:12px; background:#1db954; }
.link-card.apple>.icon { color:#1d1d1c; border-radius:12px; background:linear-gradient(145deg,#fa4b88,#ad53d8); }
.link-card.soundcloud>.icon { color:#1d1d1c; border-radius:12px; background:#f36c21; }
.link-card>.icon { -webkit-mask:none; mask:none; position:relative; }
.link-card>.icon::after { position:absolute; inset:7px; background:#fff; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; content:""; }
.link-card strong,.link-card em { display:block; text-align:right; }
.link-card strong { font-size:13px; font-weight:500; }
.link-card em { margin-top:1px; color:var(--muted); font:400 10px/1.35 Arial,sans-serif; font-style:normal; }
.link-card b,.website-card b { direction:ltr; font:400 18px/1 Arial,sans-serif; }
.social-heading { order:1; margin-top:0; }
.social-grid { order:2; }
.music-heading { order:3; margin-top:15px; }
.link-stack.listen { order:4; }
.website-card { order:5; }
.secondary-contact { order:6; margin:8px 0 0; }
.secondary-contact .contact-card { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:6px 10px; }
.secondary-contact .contact-card>span { display:block; flex:none; width:22px; height:22px; }
.secondary-contact .contact-card b { align-self:center; font-size:10px; }
.social-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.social-grid a { display:grid; place-items:center; gap:6px; min-height:57px; padding:8px 4px 7px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:rgba(255,255,255,.43); text-decoration:none; transition:transform .25s ease,background .25s ease,border-color .25s ease; }
.social-grid a:hover,.social-grid a:focus-visible { transform:translateY(-3px); background:#fff; border-color:rgba(21,21,21,.32); outline:none; }
.social-grid .icon { width:19px; height:19px; }
.social-grid a span:last-child { font:400 9px/1 Arial,sans-serif; }
.website-card { display:grid; grid-template-columns:34px 1fr 20px; align-items:center; gap:10px; min-height:62px; margin-top:15px; padding:9px 13px 9px 10px; border:1px solid rgba(74,77,70,.2); border-radius:16px; color:#282a27; background:linear-gradient(135deg,#dfddd4 0%,#c8c8c0 100%); box-shadow:0 13px 28px rgba(74,77,70,.13); text-decoration:none; transition:transform .25s ease,box-shadow .25s ease,background .25s ease; }
.website-card:hover,.website-card:focus-visible { transform:translateY(-3px); background:linear-gradient(135deg,#ebe9e0 0%,#d2d3ca 100%); box-shadow:0 22px 40px rgba(74,77,70,.2); outline:none; }
.orbit { display:grid; place-items:center; width:30px; aspect-ratio:1; border:1px solid rgba(40,42,39,.4); border-radius:50%; font-size:16px; }
.website-card small,.website-card strong { display:block; text-align:right; }
.website-card small { margin-bottom:4px; color:#676962; font:500 9px/1 Arial,sans-serif; letter-spacing:.12em; }
.website-card strong { font-size:12px; font-weight:400; }
footer { margin-top:13px; color:#8a8780; text-align:center; font:400 9px/1.2 Arial,sans-serif; letter-spacing:.04em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:430px) { .links-page { padding-inline:15px; } .social-grid { gap:6px; } }
@media (max-height:760px) { .home-mark { width:104px; } .portrait-ring { width:66px; } .link-groups { margin-top:10px; } .link-card { min-height:51px; } .social-grid a { min-height:51px; } .website-card { min-height:56px; } footer { display:none; } }
@media (max-height:760px) and (orientation:portrait) { .portrait-ring { width:clamp(130px,19vh,145px); } }
@media (min-height:561px) and (max-height:760px) and (orientation:portrait) { .link-groups { margin-top:8px; } .social-grid a { min-height:44px; } .link-card { min-height:46px; } .website-card { min-height:51px; } .secondary-contact { margin-top:6px; } .secondary-contact .contact-card { min-height:40px; } }
@media (max-height:560px) { .links-page { padding:7px 20px; } .home-mark { width:82px; margin-bottom:3px; } .portrait-ring { width:42px; margin-bottom:3px; padding:2px; } .eyebrow,.bio,.verified { display:none; } .link-groups { margin-top:5px; } .contact-row { gap:6px; margin-bottom:6px; } .contact-card { grid-template-columns:25px 1fr; column-gap:6px; min-height:38px; padding:5px 8px; border-radius:12px; } .contact-card>span { width:24px; height:24px; font-size:7px; } .contact-card b { font-size:9px; } .contact-card small { font-size:7px; } .secondary-contact { margin:5px 0 0; } .secondary-contact .contact-card { min-height:32px; padding:4px 7px; gap:5px; } .secondary-contact .contact-card>span { width:17px; height:17px; } .secondary-contact .contact-card b { font-size:8px; } .group-heading { margin:0 3px 4px; font-size:10px; } .group-heading small { font-size:7px; } .music-heading { margin-top:7px; } .social-grid { gap:6px; } .social-grid a { min-height:38px; gap:3px; padding:4px 2px; border-radius:11px; } .social-grid .icon { width:15px; height:15px; } .social-grid a span:last-child { font-size:7px; } .link-stack { gap:4px; } .link-card { grid-template-columns:27px 1fr 14px; gap:7px; min-height:35px; padding:4px 9px 4px 7px; border-radius:12px; } .link-card>.icon { width:23px; height:23px; } .link-card>.icon::after { inset:6px; } .link-card strong { font-size:10px; } .link-card em { font-size:8px; } .link-card b,.website-card b { font-size:13px; } .website-card { grid-template-columns:25px 1fr 16px; gap:7px; min-height:40px; margin-top:7px; padding:5px 9px 5px 7px; border-radius:12px; } .orbit { width:23px; font-size:12px; } .website-card small { margin-bottom:2px; font-size:7px; } .website-card strong { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }